/* Videos slider */
.videos {
  padding: 40px 0;
  background: #ffffff;
}

.videos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.videos h2 {
  margin: 0;
  font-size: clamp(22px, 3.2vw, 32px);
}

.videos-nav {
  display: flex;
  gap: 8px;
}

.arrow {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #e6eef8;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.arrow:hover {
  background: rgba(44, 59, 104, .06);
}

.video-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 12px;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
}

.video-card {
  scroll-snap-align: start;
  border: 1px solid #e6eef8;
  border-radius: 16px;
  overflow: hidden;
  background: #fbfdff;
  transition: transform .18s ease, box-shadow .2s ease;
  box-shadow: 0 6px 14px rgba(11, 27, 43, 0.06);
}

.video-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 16px 34px rgba(44, 59, 104, 0.14);
}

.video-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.video-card h4 {
  margin: 8px 10px 4px;
  font-size: 16px;
}

.video-card p {
  margin: 0 10px 12px;
  color: var(--ink-70);
  font-size: 13px;
}

/* Kit buy */
.kit {
  background: #f8fbff;
  padding: 42px 0;
}

.kit-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 20px;
  align-items: center;
}

.kit-media {
  position: relative;
  display: grid;
  place-items: center;
}

.kit-media img {
  width: min(100%, 420px);
  height: auto;
  filter: drop-shadow(0 18px 34px rgba(44, 59, 104, .22));
  position: relative;
  z-index: 1;
}

.kit-illustration {
  position: absolute;
  width: 90%;
  height: 85%;
  border: 1px dashed rgba(44, 59, 104, .25);
  border-radius: 24px;
  transform: rotate(-3deg);
}

.kit-copy h2 {
  margin: 0 0 6px;
  font-size: clamp(22px, 3.4vw, 34px);
}

.kit-copy p {
  margin: 0 0 8px;
  color: var(--ink-70);
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 10px;
}

.price {
  font-size: 28px;
  font-weight: 800;
  color: var(--blue-700);
}

.note {
  color: var(--ink-70);
  font-size: 12px;
}

.kit-points {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Hall of Fame - Professional Promotional Section */
.fame {
  padding: 80px 0;
  background: linear-gradient(135deg, #f8fbff 0%, #eef3ff 100%);
  position: relative;
  overflow: hidden;
}

.fame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(37, 124, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(37, 124, 255, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

.fame-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

.fame-header h2 {
  margin: 0 0 16px;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  color: var(--ink);
  position: relative;
}

.fame-header h2::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-700));
  border-radius: 2px;
}

.fame-header p {
  margin: 0;
  font-size: 20px;
  color: var(--ink-70);
  max-width: 600px;
  margin: 0 auto;
}

.fame-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

.stat-item {
  text-align: center;
  padding: 32px 24px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(11, 27, 43, 0.08);
  border: 1px solid #e6eef8;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-700));
}

.stat-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(37, 124, 255, 0.15);
}

.stat-number {
  font-size: 48px;
  font-weight: 800;
  color: var(--blue-700);
  margin-bottom: 8px;
  line-height: 1;
}

.stat-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-70);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fame-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 32px;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

.testimonial-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 8px 24px rgba(11, 27, 43, 0.08);
  border: 1px solid #e6eef8;
  transition: all 0.3s ease;
  position: relative;
}

.testimonial-card::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 24px;
  font-size: 48px;
  color: var(--blue-500);
  opacity: 0.2;
  font-family: serif;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(37, 124, 255, 0.12);
}

.testimonial-content {
  margin-bottom: 24px;
}

.testimonial-content p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-70);
  margin: 0;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.author-info h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.author-info span {
  font-size: 14px;
  color: var(--blue-700);
  font-weight: 600;
}

.fame-cta {
  text-align: center;
  position: relative;
  z-index: 1;
}

.fame-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: white;
  border: none;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(37, 124, 255, 0.3);
}

.fame-cta .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(37, 124, 255, 0.4);
}

/* Responsive Fame Section */
@media (max-width: 768px) {
  .fame {
    padding: 60px 0;
  }

  .fame-header {
    margin-bottom: 40px;
  }

  .fame-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 40px;
  }

  .stat-item {
    padding: 24px 16px;
  }

  .stat-number {
    font-size: 36px;
  }

  .fame-testimonials {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 40px;
  }

  .testimonial-card {
    padding: 24px;
  }
}

@media (max-width: 480px) {
  .fame-stats {
    grid-template-columns: 1fr;
  }

  .testimonial-content p {
    font-size: 16px;
  }
}

/* Components Section */
.components {
  background: #f8fbff;
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

.components::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(37, 124, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(37, 124, 255, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

.components-header {
  text-align: center;
  margin-bottom: 48px;
  position: relative;
  z-index: 1;
}

.components-header h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  color: var(--ink);
}

.components-header p {
  margin: 0;
  font-size: 18px;
  color: var(--ink-70);
  max-width: 600px;
  margin: 0 auto;
}

.components-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
  position: relative;
  z-index: 1;
}

.product-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(11, 27, 43, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #e6eef8;
  position: relative;
}

.product-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(37, 124, 255, 0.15);
  border-color: rgba(37, 124, 255, 0.2);
}

.product-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(37, 124, 255, 0.3);
}

.product-info {
  padding: 20px;
}

.product-info h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.product-price {
  font-size: 24px;
  font-weight: 800;
  color: var(--blue-700);
  margin-bottom: 16px;
}

.add-to-cart {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.add-to-cart::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.add-to-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 124, 255, 0.3);
}

.add-to-cart:hover::before {
  left: 100%;
}

.add-to-cart:active {
  transform: translateY(0);
}

.components-cta {
  text-align: center;
  position: relative;
  z-index: 1;
}

.components-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  border: 2px solid var(--blue-500);
  background: transparent;
  color: var(--blue-500);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.components-cta .btn:hover {
  background: var(--blue-500);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 124, 255, 0.3);
}

/* Responsive for new sections */
@media (max-width: 900px) {
  .kit-grid {
    grid-template-columns: 1fr;
  }

  .components-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }

  .components {
    padding: 40px 0;
  }

  .components-header {
    margin-bottom: 32px;
  }
}

@media (max-width: 600px) {
  .components-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .product-card {
    border-radius: 16px;
  }

  .product-info {
    padding: 16px;
  }
}

/* About Us Section */
.about {
  background: #ffffff;
  padding: 12px 0;
  position: relative;
  overflow: hidden;
}

.about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(37, 124, 255, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(37, 124, 255, 0.02) 0%, transparent 50%);
  pointer-events: none;
}

.about-header {
  text-align: center;
  margin-bottom: 48px;
  position: relative;
  z-index: 1;
}

.about-header h2 {
  margin: 0 0 16px;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  color: var(--ink);
  position: relative;
}

.about-header h2::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-700));
  border-radius: 2px;
}

.about-header p {
  margin: 0;
  font-size: 20px;
  color: var(--ink-70);
  max-width: 600px;
  margin: 0 auto;
}

.about-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 48px;
}

.about-text h3 {
  margin: 0 0 20px;
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
}

/* subtle heading accent */
.about-text h3::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-700));
  border-radius: 2px;
  margin-top: 8px;
}

.about-text p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-70);
  margin: 0 0 20px;
}

.about-text p:last-of-type {
  margin-bottom: 30px;
}

/* Make the text side feel open and elegant (no card) */
.about-text {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fbfdff;
  border: 1px solid #e6eef8;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(11, 27, 43, 0.06);
  font-weight: 700;
  color: var(--ink);
}

.stat-chip i {
  color: var(--blue-500);
}

.about-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border-radius: 10px;
  border: 1px dashed rgba(37, 124, 255, 0.35);
  transition: all 0.2s ease;
}

.feature-item:hover {
  background: rgba(37, 124, 255, 0.06);
  transform: translateY(-2px);
}

.feature-item i {
  color: var(--blue-500);
  font-size: 20px;
  width: 24px;
  text-align: center;
}

.feature-item span {
  font-weight: 600;
  color: var(--ink);
  font-size: 16px;
}

.about-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.photo-decor {
  position: absolute;
  inset: -24px -32px auto -32px;
  height: 240px;
  background:
    radial-gradient(600px 200px at 30% 50%, rgba(44, 59, 104, .08), transparent 60%),
    radial-gradient(400px 180px at 70% 60%, rgba(44, 59, 104, .06), transparent 60%);
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
}

.team-photo {
  position: relative;
  width: 100%;
  max-width: 640px;
  height: 380px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(11, 27, 43, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 4px solid #ffffff;
  z-index: 1;
}

.team-photo:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 30px 60px rgba(37, 124, 255, 0.2);
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: auto;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.team-photo:hover img {
  transform: scale(1.05);
}

.photo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(37, 124, 255, 0.8), rgba(37, 124, 255, 0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 16px;
}

.team-photo:hover .photo-overlay {
  opacity: 1;
}

.overlay-content {
  text-align: center;
  color: white;
}

.overlay-content h4 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
}

.overlay-content p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

/* Floating badge on photo */
.feature-item2 {
  position: absolute;
  bottom: -16px;
  right: -16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e6eef8;
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(11, 27, 43, 0.12);
  color: var(--ink);
  font-weight: 700;
  z-index: 2;
}

.feature-item2 i {
  color: var(--blue-500);
}

.mini-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 640px;
  margin-top: 12px;
  z-index: 1;
}

.mini-gallery img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #e6eef8;
  box-shadow: 0 8px 18px rgba(11, 27, 43, 0.06);
}

.values-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px dashed rgba(44, 59, 104, .15);
  border-bottom: 1px dashed rgba(44, 59, 104, .15);
  background: linear-gradient(180deg, #ffffff, #f9fbff);
  border-radius: 16px;
  margin-top: 12px;
}

.value-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fbfdff;
  border: 1px solid #e6eef8;
  border-radius: 999px;
  font-weight: 700;
  color: var(--ink);
}

.value-chip i {
  color: var(--blue-700);
}

/* Extra small badges around the photo to reduce empty space */
.photo-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #e6eef8;
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(11, 27, 43, 0.10);
  font-weight: 700;
  z-index: 3;
}

.photo-badge i {
  color: var(--blue-700);
}

.photo-badge.tl {
  top: 12px;
  left: 12px;
}

.photo-badge.tr {
  top: 12px;
  right: 12px;
}

.about-cta {
  text-align: center;
  position: relative;
  z-index: 1;
}

.about-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: white;
  border: none;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(37, 124, 255, 0.3);
}

.about-cta .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(37, 124, 255, 0.4);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive About Us */
@media (max-width: 768px) {
  .about {
    padding: 54px 0;
  }

  .photo-badge {
    display: none;
  }

  .about-header {
    margin-bottom: 40px;
  }

  .about-content {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 36px;
  }

  .about-text h3 {
    font-size: 24px;
  }

  .about-text {
    padding: 14px;
  }

  .about-features {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .about-text p {
    font-size: 16px;
  }

  .team-photo {
    max-width: 350px;
    height: 350px;
  }

  .feature-item2 {
    bottom: -12px;
    right: -12px;
    padding: 10px 14px;
  }

  .photo-badge.tl,
  .photo-badge.tr {
    top: -10px;
  }

  .mini-gallery {
    max-width: 350px;
  }
}

@media (max-width: 480px) {
  .about-content {
    gap: 24px;
  }

  .about-text h3 {
    font-size: 22px;
  }

  .about-text p {
    font-size: 15px;
  }

  .team-photo {
    max-width: 300px;
    height: 300px;
  }

  .feature-item2 {
    bottom: -10px;
    right: -10px;
    padding: 8px 12px;
  }

  .about-stats {
    gap: 8px;
  }

  .stat-chip {
    padding: 6px 10px;
  }

  .mini-gallery {
    max-width: 300px;
  }

  .feature-item {
    padding: 10px 12px;
  }

  .photo-badge {
    display: none;
  }

  .feature-item i {
    font-size: 18px;
  }

  .feature-item span {
    font-size: 14px;
  }
}

/* ========================================
   MEET OUR TEAM - PREMIUM DESIGN
   ======================================== */

.team-section-wrapper {
  margin-top: 80px;
  padding: 60px 0 40px;
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 50%, #ffffff 100%);
  overflow: hidden;
}

/* === DECORATIVE ELEMENTS === */
.team-decorations {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.team-deco-circle {
  position: absolute;
  border-radius: 50%;
  border: 2px dashed rgba(41, 55, 99, 0.08);
}

.team-deco-1 {
  width: 400px;
  height: 400px;
  top: -100px;
  right: -100px;
  animation: rotate-slow 30s linear infinite;
}

.team-deco-2 {
  width: 300px;
  height: 300px;
  bottom: -50px;
  left: -50px;
  animation: rotate-slow 25s linear infinite reverse;
}

@keyframes rotate-slow {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.team-deco-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(41, 55, 99, 0.1), transparent);
}

.team-line-1 {
  width: 100%;
  top: 50%;
}

.team-line-2 {
  width: 60%;
  left: 20%;
  top: 70%;
}

.team-deco-dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(41, 55, 99, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* === HEADER SECTION === */
.team-header-area {
  text-align: center;
  margin-bottom: 50px;
  position: relative;
  z-index: 1;
}

.team-label-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #293763 0%, #3d4f7a 100%);
  border-radius: 50px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(41, 55, 99, 0.25);
  animation: float-badge 3s ease-in-out infinite;
}

@keyframes float-badge {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.badge-icon {
  color: #ffd700;
  font-size: 12px;
  animation: twinkle 2s ease-in-out infinite;
}

.badge-icon:last-child {
  animation-delay: 1s;
}

@keyframes twinkle {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.badge-text {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.team-main-title {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 800;
  color: #293763;
  margin: 0 0 20px;
  line-height: 1.2;
}

.title-accent {
  position: relative;
  color: transparent;
  background: linear-gradient(135deg, #4a5d99, #6b7fc4, #4a5d99);
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 200% auto;
  animation: gradient-flow 3s ease-in-out infinite;
}

@keyframes gradient-flow {

  0%,
  100% {
    background-position: 0% center;
  }

  50% {
    background-position: 100% center;
  }
}

.title-accent::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #4a5d99, #6b7fc4);
  border-radius: 2px;
}

.team-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 18px;
  color: rgba(11, 27, 43, 0.6);
  font-weight: 500;
  max-width: 600px;
  margin: 0 auto;
}

.subtitle-line {
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(41, 55, 99, 0.3), transparent);
  flex-shrink: 0;
}

/* === FOUNDER SPOTLIGHT === */
.team-section-wrapper .founder-spotlight {
  display: block !important;
  max-width: 900px;
  margin: 0 auto 50px;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.team-section-wrapper .founder-spotlight .founder-card {
  display: block !important;
  position: relative;
  background: linear-gradient(145deg, #293763 0%, #1e2847 100%) !important;
  border-radius: 28px !important;
  padding: 40px !important;
  overflow: visible !important;
  min-height: 280px;
  max-width: 100% !important;
  flex: none !important;
  flex-direction: unset !important;
  border: none !important;
  box-shadow:
    0 30px 60px rgba(41, 55, 99, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
  animation: none !important;
}

.team-section-wrapper .founder-glow {
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, transparent 60%);
  animation: glow-pulse 4s ease-in-out infinite;
}

@keyframes glow-pulse {

  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.team-section-wrapper .founder-content {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.team-section-wrapper .founder-image-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.team-section-wrapper .founder-image-ring {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 3px solid transparent;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd700, #ffaa00, #ffd700) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ring-rotate 10s linear infinite;
}

@keyframes ring-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.team-section-wrapper .founder-image-wrapper {
  position: relative;
  width: 180px;
  height: 180px;
}

.team-section-wrapper .founder-image-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #ffffff;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.team-section-wrapper .founder-crown {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);
  animation: crown-bounce 2s ease-in-out infinite;
}

@keyframes crown-bounce {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-5px);
  }
}

.team-section-wrapper .founder-crown i {
  font-size: 22px;
  color: #293763;
}

.team-section-wrapper .founder-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.team-section-wrapper .status-dot {
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5);
  }

  50% {
    transform: scale(1.2);
    box-shadow: 0 0 0 8px rgba(74, 222, 128, 0);
  }
}

.team-section-wrapper .founder-status span:last-child {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 600;
}

.team-section-wrapper .founder-details h3 {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 8px !important;
}

.team-section-wrapper .founder-role {
  font-size: 16px !important;
  color: #ffd700 !important;
  font-weight: 600;
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
}

.team-section-wrapper .founder-bio {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  margin: 0 0 24px;
}

.team-section-wrapper .founder-stats {
  display: flex;
  gap: 30px;
  margin-bottom: 24px;
}

.team-section-wrapper .f-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.team-section-wrapper .f-stat-num {
  font-size: 28px;
  font-weight: 800;
  color: #ffd700;
}

.team-section-wrapper .f-stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.team-section-wrapper .founder-socials {
  display: flex;
  gap: 12px;
}

.team-section-wrapper .founder-socials .social-link {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.team-section-wrapper .founder-socials .social-link:hover {
  background: #ffd700;
  color: #293763;
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 10px 25px rgba(255, 215, 0, 0.4);
}

/* === CO-FOUNDERS SECTION === */
.cofounders-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.cofounder-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.cf-line {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(41, 55, 99, 0.2), transparent);
}

.cf-text {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: rgba(41, 55, 99, 0.06);
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  color: #293763;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cf-text i {
  color: #4a5d99;
}

.cofounders-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* 5 Cards Layout: 3 in first row, 2 centered in second */
.cofounders-grid.five-cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.cofounders-grid.five-cols .cofounder-card {
  flex: 0 0 calc(33.333% - 20px);
  max-width: calc(33.333% - 20px);
}

/* === FOUNDER HIGHLIGHT STYLES === */
.cofounder-card.founder-highlight {
  border: 2px solid #ffd700;
  box-shadow: 0 10px 40px rgba(255, 215, 0, 0.15);
}

.cofounder-card.founder-highlight:hover {
  box-shadow: 0 25px 50px rgba(255, 215, 0, 0.25);
}

.cofounder-card.founder-highlight .cf-card-bg {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 170, 0, 0.04) 100%);
}

/* Founder Golden Ring */
.founder-ring {
  background: linear-gradient(135deg, #ffd700, #ffaa00, #ffd700) !important;
}

/* Founder Crown Badge */
.founder-crown-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.5);
  animation: crown-float 2s ease-in-out infinite;
}

@keyframes crown-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

.founder-crown-badge i {
  font-size: 12px;
  color: #293763;
}

/* Founder Role Badge - Golden */
.founder-role-badge {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 170, 0, 0.15)) !important;
  color: #b8860b !important;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

/* Founder Skill Tag - Golden */
.skill-tag.founder-tag {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 170, 0, 0.1));
  color: #b8860b;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.skill-tag.founder-tag i {
  color: #ffd700;
}

/* Responsive for 5 cards layout */
@media (max-width: 1100px) {
  .cofounders-grid.five-cols .cofounder-card {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}

@media (max-width: 600px) {
  .cofounders-grid.five-cols .cofounder-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* === CO-FOUNDER CARD === */
.cofounder-card {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  padding: 30px 24px;
  text-align: center;
  border: 1px solid rgba(41, 55, 99, 0.08);
  box-shadow: 0 10px 40px rgba(41, 55, 99, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.cf-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(135deg, rgba(41, 55, 99, 0.04) 0%, rgba(74, 93, 153, 0.02) 100%);
  transition: all 0.4s ease;
}

.cofounder-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px rgba(41, 55, 99, 0.18);
}

.cofounder-card:hover .cf-card-bg {
  background: linear-gradient(135deg, rgba(41, 55, 99, 0.08) 0%, rgba(74, 93, 153, 0.05) 100%);
  height: 120px;
}

.cofounder-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #293763, #4a5d99, #6b7fc4);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.cofounder-card:hover::before {
  transform: scaleX(1);
}

/* Hexagonal Image Style */
.cf-image-container {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 20px;
}

.cf-hex-border {
  position: absolute;
  inset: -4px;
  background: linear-gradient(135deg, #293763, #4a5d99, #293763);
  border-radius: 50%;
  animation: hex-rotate 8s linear infinite;
}

@keyframes hex-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.cf-image-container img {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ffffff;
  z-index: 1;
  transition: transform 0.3s ease;
}

.cofounder-card:hover .cf-image-container img {
  transform: scale(1.08);
}

.cf-info h4 {
  font-size: 18px;
  font-weight: 700;
  color: #293763;
  margin: 0 0 6px;
}

.cf-role {
  display: inline-block;
  padding: 4px 14px;
  background: linear-gradient(135deg, rgba(41, 55, 99, 0.08), rgba(74, 93, 153, 0.06));
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #4a5d99;
  margin-bottom: 12px;
}

.cf-desc {
  font-size: 13px;
  color: rgba(11, 27, 43, 0.6);
  line-height: 1.5;
  margin: 0 0 16px;
}

.cf-skills {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.skill-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(41, 55, 99, 0.06);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #293763;
}

.skill-tag i {
  font-size: 10px;
  color: #4a5d99;
}

.cf-socials {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.cf-socials a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(41, 55, 99, 0.06);
  border-radius: 50%;
  color: #293763;
  font-size: 14px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.cf-socials a:hover {
  background: #293763;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(41, 55, 99, 0.3);
}

/* === TEAM VALUES STRIP === */
.team-values-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 30px 20px;
  margin-top: 50px;
  background: linear-gradient(135deg, rgba(41, 55, 99, 0.04) 0%, rgba(74, 93, 153, 0.02) 100%);
  border-top: 1px solid rgba(41, 55, 99, 0.08);
  border-bottom: 1px solid rgba(41, 55, 99, 0.08);
}

.value-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #293763;
}

.value-item i {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #293763, #4a5d99);
  border-radius: 12px;
  color: #ffffff;
  font-size: 16px;
}

.value-divider {
  width: 1px;
  height: 30px;
  background: rgba(41, 55, 99, 0.15);
}

/* === RESPONSIVE TEAM SECTION === */
@media (max-width: 1100px) {
  .cofounders-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .team-section-wrapper {
    margin-top: 50px;
    padding: 40px 0 30px;
  }

  .team-main-title {
    font-size: 32px;
  }

  .team-subtitle {
    flex-direction: column;
    gap: 10px;
    font-size: 16px;
  }

  .subtitle-line {
    display: none;
  }

  .founder-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
  }

  .founder-image-wrapper {
    width: 150px;
    height: 150px;
    margin: 0 auto;
  }

  .founder-image-ring {
    width: 170px;
    height: 170px;
  }

  .founder-stats {
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
  }

  .f-stat {
    padding: 12px 18px;
  }

  .founder-socials {
    justify-content: center;
  }

  .cofounders-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .cofounder-card {
    padding: 24px 16px;
  }

  .cf-image-container {
    width: 90px;
    height: 90px;
  }

  .team-values-strip {
    flex-direction: column;
    gap: 20px;
  }

  .value-divider {
    display: none;
  }
}

@media (max-width: 500px) {
  .team-label-badge {
    padding: 10px 20px;
  }

  .badge-text {
    font-size: 12px;
    letter-spacing: 1px;
  }

  .team-main-title {
    font-size: 28px;
  }

  .founder-card {
    padding: 30px 20px;
    border-radius: 20px;
  }

  .founder-details h3 {
    font-size: 26px;
  }

  .founder-bio {
    font-size: 14px;
  }

  .cofounders-grid {
    grid-template-columns: 1fr;
  }

  .cofounder-card {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* Schools & Educators */
.schools {
  background: #ffffff;
  padding: 48px 0;
}

.schools-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  align-items: center;
}

.schools-copy h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 3.2vw, 34px);
}

.schools-copy p {
  margin: 0 0 10px;
  color: var(--ink-70);
}

.icon-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eef3ff;
  color: var(--blue-500);
  border: 1px solid #e6eef8;
}

.i svg {
  width: 20px;
  height: 20px;
}

.schools-points {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 6px;
}

.schools-points li {
  position: relative;
  padding-left: 16px;
}

.schools-points li::before {
  content: '\2022';
  color: var(--blue-500);
  position: absolute;
  left: 0;
}

.schools-form-wrap {
  background: #fbfdff;
  border: 1px solid #e6eef8;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(11, 27, 43, .06);
  padding: 16px;
}

.schools-form .field {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.schools-form .field.two {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.schools-form label {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-70);
}

.schools-form input,
.schools-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #dfe8f4;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
}

.schools-form input:focus,
.schools-form textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(44, 59, 104, .15);
}

.schools-form .w-full {
  width: 100%;
}

.form-note {
  text-align: center;
  font-size: 12px;
  color: var(--ink-70);
  margin-top: 6px;
}

.form-note a {
  color: var(--blue-500);
  text-decoration: none;
}

@media (max-width: 900px) {
  .schools-grid {
    grid-template-columns: 1fr;
  }

  .photo-badge {
    display: none;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #0b1b2b;
  background: #ffffff;
}

:root {
  --blue-500: #2C3B68;
  --blue-700: #27345D;
  --ink: #0b1b2b;
  --ink-70: rgba(11, 27, 43, 0.7);
  --ink-10: rgba(11, 27, 43, 0.1);
  --white: #ffffff;
  --shadow: 0 10px 30px rgba(10, 102, 194, 0.25);
  --radius-lg: 20px;
}

.container {
  width: min(1120px, 92%);
  margin: 0 auto;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.65);
  border-bottom: 1px solid var(--ink-10);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.brand-logo {
  height: 48px;
  width: auto;
  display: block;
}

.brand-name {
  color: var(--ink);
}

/* Primary navigation */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 0;
}

.nav-link {
  position: relative;
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink-70);
  font-weight: 700;
  transition: color .2s ease, background .2s ease;
}

.nav-link:hover {
  color: var(--ink);
  background: rgba(11, 27, 43, 0.06);
}

.nav-link.active {
  color: var(--ink);
}

.nav-cta {
  margin-left: 6px;
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink-10);
  border-radius: 10px;
  background: #fff;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}

.nav-toggle .bar {
  width: 20px;
  height: 2px;
  background: var(--ink);
  display: block;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: var(--white);
  box-shadow: 0 10px 30px rgba(44, 59, 104, 0.35);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(30, 144, 255, .35);
}

.btn-outline {
  border: 2px solid var(--ink);
  color: var(--ink);
  background: transparent;
}

.btn-outline:hover {
  background: var(--ink);
  color: var(--white);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
}

.btn-ghost:hover {
  background: rgba(30, 144, 255, 0.1);
}

.btn-lg {
  padding: 14px 22px;
  border-radius: 14px;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(44, 59, 104, .12), transparent),
    conic-gradient(from 210deg at 20% 10%, rgba(44, 59, 104, .10), #ffffff 35%, rgba(44, 59, 104, .06) 55%, #ffffff 75%, rgba(44, 59, 104, .1));
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
  align-items: center;
  padding: 64px 0 40px;
}

.hero-copy h1 {
  margin: 0 0 14px;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.1;
}

.headline {
  background: linear-gradient(90deg, #2C3B68, #6b78a8, #2C3B68);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hueShift 8s ease-in-out infinite;
}

.accent {
  color: var(--blue-700);
  position: relative;
}

.accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 10px;
  background: rgba(30, 144, 255, .25);
  filter: blur(6px);
  z-index: -1;
}

.hero-copy p {
  margin: 0 0 18px;
  color: var(--ink-70);
  font-size: clamp(14px, 2.2vw, 18px);
}

.cta-group {
  display: flex;
  gap: 12px;
  margin: 18px 0 10px;
  flex-wrap: wrap;
}

.trust-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-70);
}

.badge {
  background: rgba(11, 27, 43, 0.06);
  border: 1px solid var(--ink-10);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ink-10);
  display: inline-block;
}

.hero-visual {
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
}

.morph-blob {
  position: absolute;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle at 30% 30%, rgba(44, 59, 104, .18), rgba(44, 59, 104, .06));
  filter: blur(18px);
  border-radius: 60% 40% 65% 35% / 55% 45% 55% 45%;
  animation: blob 14s ease-in-out infinite;
}

.orb,
.orb-blue,
.orb-white,
.sparkles,
.shape-pill {
  display: none !important;
}

.hero-bot {
  width: min(100%, 380px);
  height: auto;
  animation: bob 3s ease-in-out infinite;
  filter: drop-shadow(0 22px 36px rgba(11, 27, 43, 0.18));
  z-index: 2;
}

.glow-ring {
  position: absolute;
  width: 70%;
  max-width: 360px;
  height: 70%;
  max-height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44, 59, 104, 0.25), rgba(44, 59, 104, .08) 60%, transparent 70%);
  filter: blur(14px);
  z-index: 1;
}

.orbit {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  animation: spin 14s linear infinite;
}

.ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(44, 59, 104, .35);
}

.ring-outer {
  width: 360px;
  height: 360px;
}

.ring-inner {
  width: 240px;
  height: 240px;
  animation: spinReverse 18s linear infinite;
}

.satellite {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--blue-500);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(44, 59, 104, .15);
}

.s1 {
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
}

.s2 {
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}

.s3 {
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
}

.s4 {
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
}

.stat {
  position: absolute;
  background: #ffffff;
  border: 1px solid #e6eef8;
  border-radius: 12px;
  padding: 6px 10px;
  font-weight: 800;
  color: var(--blue-700);
  box-shadow: 0 10px 22px rgba(11, 27, 43, 0.08);
}

.stat-a {
  top: 8px;
  left: 8px;
}

.stat-b {
  bottom: 12px;
  right: 10px;
}

.stat-c {
  top: 50%;
  right: -2px;
  transform: translateY(-50%);
}

.sparkles {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .8), transparent 30%), radial-gradient(circle at 80% 40%, rgba(125, 249, 255, .9), transparent 26%), radial-gradient(circle at 60% 80%, rgba(255, 255, 255, .7), transparent 28%);
  animation: twinkle 6s ease-in-out infinite;
  pointer-events: none;
}

.float-badge {
  position: absolute;
  background: #ffffff;
  color: var(--blue-700);
  border: 1px solid rgba(44, 59, 104, .18);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 800;
  font-size: 12px;
  box-shadow: 0 10px 22px rgba(11, 27, 43, 0.08);
  animation: float 7s ease-in-out infinite;
}

.badge-a {
  top: 18px;
  right: 14px;
}

.badge-b {
  bottom: 18px;
  left: 6px;
  animation-delay: 1.2s;
}

.shape-pill {
  position: absolute;
  width: 120px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eaf5ff, #ffffff);
  border: 1px solid #e6eef8;
  box-shadow: 0 10px 22px rgba(11, 27, 43, 0.08);
  transform: rotate(-12deg);
}

.pill-a {
  left: -14px;
  bottom: 40px;
}

.pill-b {
  right: -20px;
  top: 40px;
  transform: rotate(18deg);
}

.eye {
  animation: blink 6s infinite;
  transform-origin: center;
}

.eye-right {
  animation-delay: 2.4s;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes bob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes blink {

  0%,
  92%,
  100% {
    r: 6;
  }

  95% {
    r: 1;
  }
}

@keyframes twinkle {

  0%,
  100% {
    opacity: .9;
    filter: hue-rotate(0deg);
  }

  50% {
    opacity: .6;
    filter: hue-rotate(20deg);
  }
}

@keyframes hueShift {
  0% {
    filter: hue-rotate(0deg);
  }

  50% {
    filter: hue-rotate(10deg);
  }

  100% {
    filter: hue-rotate(0deg);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinReverse {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes blob {

  0%,
  100% {
    border-radius: 60% 40% 65% 35% / 55% 45% 55% 45%;
  }

  50% {
    border-radius: 40% 60% 35% 65% / 45% 55% 45% 55%;
    transform: scale(1.06);
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.shape-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 100px;
  background: linear-gradient(180deg, transparent, #f1f7ff);
  mask-image: radial-gradient(150px 40px at 10% 0, black, transparent 60%), radial-gradient(150px 40px at 40% 0, black, transparent 60%), radial-gradient(150px 40px at 70% 0, black, transparent 60%), radial-gradient(150px 40px at 100% 0, black, transparent 60%);
  mask-size: 25% 100%;
  mask-repeat: no-repeat;
  mask-position: 0 0, 33% 0, 66% 0, 100% 0;
}

/* ============================================
   SOCIAL CONNECT SECTION
============================================ */
.social-connect-section {
  padding: 60px 0;
  background: #f8fbff;
}

.social-connect-header {
  text-align: center;
  margin-bottom: 40px;
}

.social-connect-header h2 {
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 800;
  color: #1a2340;
  margin: 0 0 8px;
}

.social-connect-header p {
  font-size: 15px;
  color: #666;
  margin: 0;
}

.social-connect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.social-connect-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #e8ecf4;
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(42, 56, 99, 0.06);
}

.social-connect-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(42, 56, 99, 0.12);
}

.social-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  flex-shrink: 0;
}

.social-connect-card.linkedin .social-icon {
  background: linear-gradient(135deg, #0077B5, #005582);
}

.social-connect-card.instagram .social-icon {
  background: linear-gradient(135deg, #E1306C, #C13584, #833AB4);
}

.social-connect-card.playstore .social-icon {
  background: linear-gradient(135deg, #34A853, #0F9D58);
}

.social-info {
  flex: 1;
}

.social-info h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1a2340;
  margin: 0 0 2px;
}

.social-info p {
  font-size: 13px;
  color: #666;
  margin: 0;
}

.social-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2A3863;
  font-size: 14px;
  transition: all 0.3s ease;
}

.social-connect-card:hover .social-arrow {
  background: #2A3863;
  color: white;
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .social-connect-grid {
    grid-template-columns: 1fr;
  }
}

/* Professional Courses Section */
.courses-section {
  padding: 60px 0;
  background: #f8fbff;
}

.courses-header {
  text-align: center;
  margin-bottom: 32px;
}

.courses-badge {
  display: inline-block;
  background: rgba(42, 56, 99, 0.1);
  color: #2A3863;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 50px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.courses-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  color: #1a2340;
  margin: 0 0 12px;
}

.text-accent {
  color: #2A3863;
}

.courses-subtitle {
  font-size: 17px;
  color: #666;
  margin: 0;
}

.courses-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.course-item {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e8ecf4;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(42, 56, 99, 0.06);
}

.course-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(42, 56, 99, 0.12);
  border-color: rgba(42, 56, 99, 0.2);
}

.course-number {
  display: none;
}

.course-image {
  height: 160px;
  background: #f0f4fa;
  overflow: hidden;
}

.course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.course-info {
  padding: 20px;
}

.course-tags {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.tag {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
}

.tag-age {
  background: rgba(42, 56, 99, 0.08);
  color: #2A3863;
}

.tag-level {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.course-name {
  font-size: 24px;
  font-weight: 800;
  color: #1a2340;
  margin: 0 0 12px;
}

.course-desc {
  font-size: 15px;
  color: #555;
  line-height: 1.7;
  margin: 0 0 16px;
}

.course-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.course-highlights li {
  position: relative;
  font-size: 14px;
  color: #444;
  padding-left: 18px;
}

.course-highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #2A3863;
  border-radius: 50%;
}

.course-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #2A3863;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  align-self: flex-start;
  margin-top: auto;
}

.course-btn:hover {
  background: #1A2340;
  transform: translateX(4px);
}

/* Courses Section Responsive */
@media (max-width: 900px) {
  .course-item {
    flex-direction: column;
  }

  .course-image {
    width: 100%;
    height: 200px;
  }

  .course-number {
    top: 12px;
    left: 12px;
    font-size: 36px;
  }

  .course-info {
    padding: 24px;
  }

  .course-name {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .courses-section {
    padding: 48px 0;
  }

  .courses-header {
    margin-bottom: 32px;
  }

  .course-image {
    height: 160px;
    padding: 16px;
  }

  .course-info {
    padding: 20px;
  }

  .course-highlights {
    flex-direction: column;
    gap: 8px;
  }
}

/* Legacy courses class for compatibility */
.courses {
  padding: 48px 0 64px;
  background: #f8fbff;
}

.courses h2 {
  margin: 0 0 18px;
  font-size: clamp(22px, 3.4vw, 34px);
  text-align: center;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.course-card {
  background: var(--white);
  border: 1px solid #e6eef8;
  border-radius: 20px;
  box-shadow: 0 6px 14px rgba(11, 27, 43, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .2s ease;
}

.course-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(44, 59, 104, 0.18);
}

.course-media {
  height: 160px;
  background: #eef3ff;
  display: grid;
  place-items: center;
  border-bottom: 1px solid #e6eef8;
}

.course-media img {
  width: 100%;
  height: 160px;
}

.course-body {
  padding: 14px 16px 16px;
  display: grid;
  gap: 8px;
}

.rating {
  color: #ffb400;
  letter-spacing: 2px;
  font-size: 14px;
}

.course-card h3 {
  margin: 0;
  text-align: center;
  line-height: 1.2;
}

.course-card p {
  margin: 0;
  color: var(--ink-70);
  font-size: 14px;
}

.bullets {
  list-style: none;
  margin: 4px 0 10px;
  padding: 0;
  display: grid;
  gap: 6px;
  color: var(--ink);
}

.bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.bullets svg {
  width: 16px;
  height: 16px;
  color: var(--blue-500);
}

.course-cta {
  width: 100%;
  justify-content: center;
}

/* CTA Section */
.cta-section {
  background: radial-gradient(800px 400px at 20% 10%, rgba(30, 144, 255, .12), transparent), #ffffff;
  padding: 40px 0 80px;
}

.cta-box {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: var(--white);
  border-radius: 24px;
  padding: 28px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px;
  box-shadow: 0 18px 40px rgba(44, 59, 104, .35);
}

.cta-box h2 {
  margin: 0;
  font-size: clamp(24px, 3.8vw, 40px);
}

.cta-box p {
  margin: 0 0 8px;
  opacity: .95;
}

.cta-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-ghost-white {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.btn-ghost-white:hover {
  background: rgba(255, 255, 255, 0.2);
}

.pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
}

.cta-highlights {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.cta-shape {
  position: absolute;
  filter: blur(18px);
  opacity: .35;
}

.cta-shape.c1 {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
  top: -40px;
  left: -30px;
}

.cta-shape.c2 {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
  bottom: -60px;
  right: -40px;
}

/* Footer */
.site-footer {
  border-top: 1px solid #e6eef8;
  background: #fbfdff;
}

.footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}

.footer-links {
  display: flex;
  gap: 14px;
}

.footer-links a {
  color: var(--ink-70);
  text-decoration: none;
  font-weight: 600;
}

.footer-links a:hover {
  color: var(--ink);
}

/* Responsive */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    padding: 24px 0 10px;
  }

  .hero-copy {
    text-align: center;
  }

  .cta-group {
    justify-content: center;
  }

  .hero-visual {
    min-height: 280px;
  }

  .courses-grid {
    grid-template-columns: 1fr;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .primary-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    background: #ffffff;
    border: 1px solid #e6eef8;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(11, 27, 43, 0.12);
    padding: 10px;
    display: none;
  }

  .primary-nav.open {
    display: grid;
    gap: 8px;
  }

  .nav-list {
    flex-direction: column;
    gap: 4px;
  }

  .nav-link {
    padding: 10px 12px;
  }

  .nav-cta {
    margin: 4px 2px 2px;
  }

  .nav-cta .btn-primary {
    width: 100%;
  }
}

/* Tablet tweaks */
@media (min-width: 900px) and (max-width: 1150px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .nav-list {
    gap: 8px;
  }

  .nav-link {
    padding: 8px 10px;
  }
}

/* Blockly Section */
.blockly {
  background: #F8FBFF;
  padding: 54px 0;
}

.blockly-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  align-items: start;
}

.blockly-copy h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 3.2vw, 34px);
}

.blockly-copy p {
  margin: 0 0 12px;
  color: var(--ink-70);
}

.blockly-ui {
  display: grid;
  grid-template-columns: 1.2fr 0.02fr;
  gap: 16px;
  align-items: start;
}

.toolbox {
  background: #fbfdff;
  border: 1px solid #e6eef8;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 10px 24px rgba(11, 27, 43, .06);
}

.workspace {
  position: relative;
  min-height: 340px;
  background: linear-gradient(180deg, #f8fbff, #ffffff);
  border: 1px dashed #dbe7f7;
  border-radius: 16px;
  overflow: hidden;
}

.grid-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(44, 59, 104, .08) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.block {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #fff;
  font-weight: 800;
  margin: 6px 0;
  user-select: none;
  cursor: grab;
  box-shadow: 0 10px 20px rgba(44, 59, 104, .18);
  transform-origin: center;
  transition: transform .15s ease, filter .15s ease;
}

.block:active {
  cursor: grabbing;
}

.block.move {
  background: linear-gradient(135deg, #29a3ff, #1f7ae6);
}

.block.turn {
  background: linear-gradient(135deg, #6b78a8, #2C3B68);
}

.block.sensor {
  background: linear-gradient(135deg, #0bbf8a, #0a9d74);
}

.block.control {
  background: linear-gradient(135deg, #ff9f1a, #ff7a00);
}

.block.action {
  background: linear-gradient(135deg, #9b51e0, #6a3dbd);
}

.float-anim {
  animation: floatBlocks 6s ease-in-out infinite;
}

@keyframes floatBlocks {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-8px)
  }
}

.block:hover {
  transform: translateY(-2px) rotate(-1deg);
  filter: brightness(1.05);
}

.jiggle {
  animation: jiggle 2.2s ease-in-out infinite;
}

@keyframes jiggle {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  30% {
    transform: translateY(-2px) rotate(-1deg);
  }

  60% {
    transform: translateY(1px) rotate(1deg);
  }
}

.workspace .block {
  position: absolute;
}

.trash {
  display: none;
}

.blockly-side {
  display: grid;
  gap: 12px;
}

.feature-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: #fff;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(44, 59, 104, .25);
}

.blockly-figure {
  position: relative;
  margin: 0;
  background: #ffffff;
  border: 1px solid #e6eef8;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(11, 27, 43, .12);
}

.blockly-figure::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: conic-gradient(from 120deg, rgba(44, 59, 104, .15), rgba(44, 59, 104, 0), rgba(44, 59, 104, .15));
  filter: blur(10px);
  z-index: 0;
}

.blockly-figure img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.blockly-figure figcaption {
  font-size: 12px;
  color: var(--ink-70);
  padding: 8px 10px;
}

.side-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.side-highlights li {
  background: #fbfdff;
  border: 1px solid #e6eef8;
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 700;
  color: var(--blue-700);
}

.blockly-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Side feature copy */
.feature-copy {
  background: linear-gradient(135deg, #ffffff, #f6f9ff);
  border: 1px solid #e6eef8;
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 12px 28px rgba(11, 27, 43, .08);
}

.feature-badge {
  display: inline-block;
  background: #eef3ff;
  color: var(--blue-700);
  border: 1px solid #e6eef8;
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 800;
  font-size: 11px;
}

.feature-copy h3 {
  margin: 8px 0 6px;
  font-size: 20px;
}

.feature-copy p {
  margin: 0 0 8px;
  color: var(--ink-70);
}

.feature-points {
  margin: 0 0 10px;
  padding-left: 16px;
}

.feature-points li {
  margin: 4px 0;
}

/* Chatbot Floating Button */
.chatbot {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
}

.chatbot-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  box-shadow: 0 18px 40px rgba(44, 59, 104, .35);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  font-size: 24px;
  pointer-events: auto;
  position: relative;
  z-index: 10000;
}

.chatbot-toggle:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 22px 48px rgba(44, 59, 104, .45);
  filter: drop-shadow(0 0 8px rgba(44, 59, 104, .35));
}

.chatbot-toggle:active {
  transform: translateY(0) scale(0.98);
}

/* Chatbot Window */
.chatbot-window {
  position: fixed;
  right: 18px;
  bottom: 86px;
  width: min(340px, 92vw);
  max-height: 500px;
  background: #ffffff;
  border: 1px solid #e6eef8;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(11, 27, 43, .22);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  transform: translateY(14px) scale(0.95);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease, visibility .22s ease;
  z-index: 9998;
}

.chatbot-window.active {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.chatbot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: #fff;
  font-weight: 800;
}

.chatbot-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.chatbot-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.chatbot-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.chatbot-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 320px;
  overflow-y: auto;
  background: #fbfdff;
}

.chatbot-body::-webkit-scrollbar {
  width: 6px;
}

.chatbot-body::-webkit-scrollbar-track {
  background: transparent;
}

.chatbot-body::-webkit-scrollbar-thumb {
  background: #d1d9e6;
  border-radius: 3px;
}

.chatbot-body::-webkit-scrollbar-thumb:hover {
  background: #b8c4d6;
}

.chat-message {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  max-width: 80%;
  word-wrap: break-word;
}

.chat-message.bot {
  background: #eef3ff;
  color: var(--blue-700);
  align-self: flex-start;
}

.chat-message.bot p {
  margin: 0;
  line-height: 1.5;
}

.chat-message.user {
  background: #e9fbf5;
  color: #0a7a5e;
  align-self: flex-end;
}

.chat-message.user p {
  margin: 0;
  line-height: 1.5;
}

.chatbot-input {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #e6eef8;
  background: #fff;
}

.chatbot-input input {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #dfe8f4;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.chatbot-input input:focus {
  border-color: var(--blue-500);
}

.chatbot-input button {
  padding: 10px 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.chatbot-input button:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

.chatbot-input button:active {
  transform: scale(0.95);
}

/* Chatbot User Registration Form */
.chatbot-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(135deg, #ffffff, #f8fbff);
  border-radius: 14px;
  border: 1px solid #e6eef8;
  box-shadow: 0 4px 16px rgba(44, 59, 104, 0.08);
}

.chatbot-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chatbot-form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-700);
  display: flex;
  align-items: center;
  gap: 6px;
}

.chatbot-form-group label i {
  font-size: 12px;
  opacity: 0.7;
}

.chatbot-form-group input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #dfe8f4;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
  background: #fff;
}

.chatbot-form-group input:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(44, 59, 104, 0.1);
}

.chatbot-form-group input::placeholder {
  color: #a0aec0;
}

.chatbot-submit-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(44, 59, 104, 0.25);
}

.chatbot-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(44, 59, 104, 0.35);
}

.chatbot-submit-btn:active {
  transform: translateY(0);
}

.chatbot-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Typing Indicator Animation */
.typing-indicator p {
  display: flex;
  align-items: center;
  gap: 4px;
}

.typing-indicator i {
  font-size: 6px;
  color: var(--blue-500);
  animation: typingPulse 1.2s infinite ease-in-out;
}

.typing-indicator i:nth-child(1) {
  animation-delay: 0s;
}

.typing-indicator i:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator i:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingPulse {

  0%,
  60%,
  100% {
    transform: scale(0.6);
    opacity: 0.4;
  }

  30% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Chat message with HTML content */
.chat-message p strong {
  font-weight: 700;
  color: inherit;
}

.chatbot-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 1px solid #e6eef8;
  color: var(--white);
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  box-shadow: 0 18px 40px rgba(44, 59, 104, .35);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 200;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.chatbot-window.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 900px) {
  .blockly-grid {
    grid-template-columns: 1fr;
  }

  .blockly-ui {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .blockly-side {
    order: -1;
  }

  .toolbox {
    display: none;
  }
}


.nav-dropdown {
  position: relative;
}

.nav-dropdown:hover .nav-link i {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  padding: 1rem 0;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a {
  display: block;
  padding: 0.75rem 1.5rem;
  color: #4a4a4a;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.dropdown-menu a:hover {
  background: #f8f9fa;
  color: #1a1a1a;
}

@media (max-width: 768px) {
  .nav-dropdown {
    position: relative;
  }

  .nav-dropdown .dropdown-menu {
    position: static;
    background: rgba(30, 64, 175, 0.05);
    border-radius: 12px;
    margin: 0.5rem 1rem 0;
    padding: 0.5rem 0;
    box-shadow: none;
    border: 1px solid rgba(30, 64, 175, 0.1);
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .nav-dropdown.active .dropdown-menu {
    display: block;
    max-height: 300px;
    animation: slideDown 0.3s ease;
  }

  .nav-dropdown:hover .dropdown-menu {
    display: block;
    animation: slideDown 0.3s ease;
  }

  .nav-dropdown .dropdown-menu a {
    display: block;
    padding: 0.8rem 2rem;
    color: var(--text-gray);
    font-size: 1rem;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 0.2rem 1rem;
  }

  .nav-dropdown .dropdown-menu a:hover {
    background: rgba(30, 64, 175, 0.1);
    color: var(--royal-blue);
    transform: translateX(3px);
  }

  /* Active dropdown state */
  .nav-dropdown.active .nav-link {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.1), rgba(59, 130, 246, 0.05));
    color: var(--deep-blue);
  }

  .nav-dropdown.active .nav-link i {
    transform: rotate(180deg);
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 480px) {
  .nav-dropdown .dropdown-menu {
    margin: 0.5rem 0.8rem 0;
  }

  .nav-dropdown .dropdown-menu a {
    padding: 0.7rem 1.5rem;
    font-size: 0.95rem;
    margin: 0.2rem 0.8rem;
  }

  /* Active dropdown state for small mobile */
  .nav-dropdown.active .dropdown-menu {
    display: block;
    max-height: 300px;
  }

  .nav-dropdown.active .nav-link {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.1), rgba(59, 130, 246, 0.05));
    color: var(--deep-blue);
  }

  .nav-dropdown.active .nav-link i {
    transform: rotate(180deg);
  }
}

@media (max-width: 900px) {
  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 90vw;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
  }

  .primary-nav.active {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    gap: 0;
  }

  .nav-list li {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #eee;
  }

  .nav-cta {
    margin: 1rem 0;
    text-align: center;
  }

  .nav-toggle {
    display: flex !important;
  }
}

@media (max-width: 900px) {
  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 90vw;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
  }

  .primary-nav.active {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    gap: 0;
  }

  .nav-list li {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #eee;
  }

  .nav-cta {
    margin: 1rem 0;
    text-align: center;
  }

  .nav-toggle {
    display: flex !important;
  }
}

/* Creative Kit Showcase (Main Section) */
.creative-kits-section {
  background: linear-gradient(120deg, #f8fbff 80%, #e9ecff 100%);
  padding: 62px 0 64px;
  position: relative;
}

.showcase-kits {
  display: flex;
  flex-direction: column;
  gap: 54px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.kit-showcase {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 0;
  position: relative;
  min-height: 340px;
}

.kit-showcase.alt {
  flex-direction: row-reverse;
}

.kit-show-imgbox {
  position: relative;
  flex-shrink: 0;
  width: 350px;
  min-width: 260px;
  aspect-ratio: 1.07/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e3ecfc 60%, #dbe3ff 100%);
  border-radius: 32px 26px 40px 30px;
  box-shadow: 0 14px 38px rgba(37, 124, 255, .09);
  z-index: 1;
  overflow: visible;
}

.kit-show-img {
  width: 94%;
  height: auto;
  border-radius: 26px;
  box-shadow: 0 18px 30px rgba(44, 59, 104, .22);
  z-index: 2;
  background: #fff9;
  object-fit: cover;
  filter: drop-shadow(0 18px 32px rgba(44, 59, 104, .12));
}

.kit-badge {
  position: absolute;
  top: 17px;
  left: 17px;
  background: linear-gradient(90deg, #2C3B68 60%, #6b78a8 100%);
  color: #fff;
  padding: 7px 22px 7px 12px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 99px 14px 24px 99px;
  box-shadow: 0 4px 16px rgba(23, 56, 108, 0.09);
  z-index: 3;
  letter-spacing: 0.2px;
}

.kit-badge.best {
  background: linear-gradient(93deg, #ff8e2a 75%, #ffbc46 100%);
}

.kit-badge.new {
  background: linear-gradient(93deg, #42b0ff 60%, #2C3B68 100%);
}

.kit-badge.value {
  background: linear-gradient(93deg, #ffd75c 70%, #ff9332 100%);
  color: #1e1e1e;
}

.kit-show-info {
  flex: 1 1 0;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 200px;
}

.kit-show-info h3 {
  font-size: 30px;
  margin: 0 0 5px;
  font-weight: 800;
  color: var(--blue-700);
}

.kit-show-info p {
  font-size: 17px;
  margin: 0 0 2px;
  color: var(--ink-70);
}

.pill-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.pill {
  background: #eaf1fa;
  color: #252525;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 99px;
  letter-spacing: 0.3px;
  border: none;
  box-shadow: 0 2px 6px rgba(60, 100, 190, 0.05);
  display: inline-block;
}

.kit-show-buy {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}

.price {
  font-size: 26px;
  font-weight: 800;
  color: var(--blue-700);
}

.buy-btn {
  background: linear-gradient(90deg, #28459d 75%, #2C3B68 100%);
  color: #fff;
  border: none;
  border-radius: 90px 13px 23px 90px;
  padding: 10px 28px;
  font-size: 16.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 16px rgba(53, 44, 104, .16);
  transition: all 0.18s;
  margin: 0 0 0 0;
}

.buy-btn:hover {
  background: linear-gradient(90deg, #23377c 85%, #3f6599 100%);
  color: #ffe799;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 30px rgba(44, 59, 104, 0.17);
}

.kit-note {
  font-size: 13px;
  color: #a3acbd;
  margin-left: 5px;
  margin-top: 0;
}

/* Responsive for kit showcase */
@media (max-width: 900px) {
  .kit-showcase {
    flex-direction: column !important;
    gap: 24px;
    min-height: 0;
  }

  .kit-show-imgbox {
    width: 89vw;
    min-width: 0;
    border-radius: 22px;
  }

  .kit-show-img {
    width: 99%;
    border-radius: 16px;
  }

  .kit-show-info {
    padding: 0;
  }
}

@media (max-width: 600px) {
  .creative-kits-section {
    padding: 32px 0 20px;
  }

  .kit-show-info h3 {
    font-size: 22px;
  }

  .kit-show-info p {
    font-size: 15px;
  }

  .showcase-kits {
    gap: 36px;
  }

  .price {
    font-size: 20px;
  }

  .buy-btn {
    font-size: 14px;
    padding: 7px 16px;
  }

  .kit-show-imgbox {
    max-width: 99vw;
  }
}

@media (max-width: 1200px) {
  #kit .container>div:nth-child(3) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 800px) {
  #kit .container>div:nth-child(3) {
    grid-template-columns: 1fr !important;
    max-width: 400px;
    margin: 0 auto;
  }
}

.glow-circles {
  z-index: 1;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}

.glow-circle {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  opacity: 0.24;
  filter: blur(38px);
  transition: opacity .4s;
}

.pulse {
  animation: pulseGlow 6s infinite linear;
}

.float {
  animation: floatUp 8s alternate infinite;
}

@keyframes pulseGlow {
  0% {
    opacity: 0.20;
    transform: scale(1);
  }

  50% {
    opacity: 0.36;
    transform: scale(1.11);
  }

  100% {
    opacity: 0.19;
    transform: scale(1);
  }
}

@keyframes floatUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-45px);
  }
}

/* Kit card hover animation */
.kit-card:hover {
  box-shadow: 0 8px 48px 0 rgba(44, 62, 112, 0.17), 0 0 16px 6px #92BDFE;
  transform: translateY(-9px) scale(1.025);
}

.kit-img-bg {
  position: relative;
}

.kit-img-glow {
  z-index: 1;
}

.about-blobs {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.ab-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.25;
}

.b1 {
  width: 400px;
  height: 235px;
  top: -60px;
  left: -90px;
  background: #a4cef9;
}

.b2 {
  width: 340px;
  height: 170px;
  top: 52%;
  left: 68%;
  background: #e0cffc;
}

.b3 {
  width: 180px;
  height: 130px;
  bottom: 18%;
  right: 10%;
  background: #caf5e6;
}

.ab-bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0.16;
  filter: blur(9px);
  mix-blend-mode: lighten;
}

.bub1 {
  width: 52px;
  height: 52px;
  left: 8%;
  top: 16%;
  background: #bffafd;
  animation: aboutb1 8s infinite alternate;
}

.bub2 {
  width: 34px;
  height: 34px;
  left: 80%;
  top: 36%;
  background: #c2d3fe;
  animation: aboutb2 8s infinite alternate;
}

.bub3 {
  width: 62px;
  height: 62px;
  right: 8%;
  bottom: 10%;
  background: #efc5fa;
  animation: aboutb3 9s infinite alternate;
}

@keyframes aboutb1 {
  0% {
    transform: scale(1);
    opacity: .16;
  }

  40% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1.19);
    opacity: .25;
  }
}

@keyframes aboutb2 {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-22px)scale(1.09);
  }
}

@keyframes aboutb3 {
  0% {
    opacity: .23;
  }

  50% {
    opacity: .33;
  }

  100% {
    opacity: .16;
  }
}

.card-glass {
  box-shadow: 0 12px 64px 0 #b499ff24, 0 0 0 #fff, 0 4px 50px #b3a9f9a0;
  border-radius: 1.22rem;
  border: 0.5px solid #e1eaff99;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(0.5px);
  position: relative;
}

.about-btnrow-wrap {
  margin: 0 auto;
  max-width: 670px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-btnrow-glow {
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  bottom: -14px;
  z-index: 1;
  border-radius: 28px;
  opacity: 0.6;
  box-shadow: 0 8px 32px rgba(35, 48, 117, 0.12), 0 0 60px rgba(35, 48, 117, 0.08);
  transition: opacity 0.3s ease;
}

.about-btnrow-wrap:hover .about-btnrow-glow {
  opacity: 0.85;
}

.about-btnrow-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.04rem;
  background: transparent;
  border-radius: 1.2rem;
  box-shadow: none;
  padding: 0;
  min-width: 0;
}

@media (max-width: 650px) {
  .about-btnrow-content {
    grid-template-columns: 1fr;
    gap: .62rem;
  }
}

.ab-btn {
  display: flex;
  align-items: center;
  gap: 0.72em;
  border: 1.5px solid rgba(35, 48, 117, 0.08);
  outline: none;
  background: linear-gradient(135deg, #ffffff 0%, #fafbfd 100%);
  padding: 0.85em 1.4em 0.85em 1.15em;
  font-size: 1.07rem;
  font-weight: 600;
  border-radius: 14px;
  color: #233075;
  box-shadow: 0 3px 12px rgba(35, 48, 117, 0.08), 0 1px 3px rgba(35, 48, 117, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  min-width: 185px;
  margin: 0.19em 0;
  position: relative;
  overflow: hidden;
}

.ab-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s ease;
}

.ab-btn:hover::before {
  left: 100%;
}

.ab-btn-icon {
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

.ab-btn:hover .ab-btn-icon {
  transform: scale(1.1);
}

.ab-btn span:not(.ab-btn-icon) {
  position: relative;
  z-index: 1;
}

.ab-btn:hover,
.ab-btn:focus {
  background: linear-gradient(135deg, #f8fbff 0%, #f0f5fc 100%);
  border-color: rgba(35, 48, 117, 0.2);
  box-shadow: 0 8px 24px rgba(35, 48, 117, 0.15), 0 2px 8px rgba(35, 48, 117, 0.1);
  transform: translateY(-3px) scale(1.02);
  color: #1a2744;
}

@media (max-width:650px) {
  .about-btnrow-content {
    grid-template-columns: 1fr;
    grid-gap: .6rem;
  }

  .about-btnrow-glow {
    top: -9px;
    bottom: -7px;
  }

  .about-container {
    padding: 0 0.3rem;
  }

  .card-glass {
    padding: 2.2rem 0.7rem 1.8rem 0.7rem
  }
}

@media (max-width:420px) {
  .ab-btn {
    min-width: 90px;
    font-size: .98rem;
    padding: .7em .7em;
  }
}

.about-tobotics {
  position: relative;
  background: linear-gradient(120deg, #f9fbfc 68%, #e9eef7 100%);
  padding: clamp(3.8rem, 7vw, 6.5rem) 1rem clamp(4.6rem, 7vw, 6.8rem) 1rem;
  color: #212B36;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
  text-align: center;
  z-index: 1;
}

.about-tobotics::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url('data:image/svg+xml;utf8,<svg width="100%25" height="100%25" xmlns="http://www.w3.org/2000/svg"><ellipse rx="42%25" ry="21%25" cx="50%25" cy="-6%25" fill="%23e3ebf4"/><ellipse rx="15%25" ry="10%25" cx="89%25" cy="23%25" fill="%23edeff3" opacity="0.72"/><ellipse rx="19%25" ry="11%25" cx="7%25" cy="39%25" fill="%23ebeefa" opacity="0.42"/></svg>');
  pointer-events: none;
  opacity: .87;
  z-index: 0;
}

.about-blobs,
.ab-blob,
.ab-bubble {
  display: none !important;
}

.about-container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  background: transparent;
  padding: 0 0.7rem;
}

.title-glow {
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  font-weight: 800;
  margin-bottom: 1.1rem !important;
  line-height: 1.13;
  color: #192038 !important;
  letter-spacing: -1px;
  position: relative;
}

.title-glow::after {
  content: '';
  display: block;
  margin: 0.62em auto 0 auto;
  width: 58px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #256ccf 55%, #c8d8f6 100%);
  opacity: 0.34;
}

.card-glass {
  background: #fff;
  border-radius: 2.1rem;
  box-shadow: 0 1px 16px 0 rgba(28, 39, 77, 0.08), 0 1.5px 0 #fff;
  margin-bottom: 2.7rem;
  position: relative;
  z-index: 2;
  padding: clamp(2.3rem, 6vw, 3.7rem) clamp(1.4rem, 4vw, 2.5rem) clamp(2rem, 5vw, 2.7rem) clamp(1.4rem, 4vw, 2.5rem);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-glass:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(35, 48, 117, 0.15), 0 4px 12px rgba(35, 48, 117, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.card-glass p {
  font-size: clamp(1.08rem, 2vw, 1.30rem);
  line-height: 1.7;
  max-width: 790px;
  margin: 0 auto 2.40rem auto;
  color: #26324a;
  font-weight: 400;
}

.about-btnrow-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: clamp(.28rem, 1vw, 1.15rem);
  background: transparent;
  border-radius: 0.99rem;
  box-shadow: none;
  padding: 0;
  min-width: 0;
}

.ab-btn {
  border: 1.5px solid #dde4ef;
  background: #fcfdfe;
  color: #23306a;
  font-size: 1.07rem;
  font-weight: 600;
  border-radius: 16px;
  padding: 0.76em 1.19em;
  box-shadow: 0 2px 6px #e7eaf623;
  transition: box-shadow .18s, border .18s, background .17s, color .17s;
  cursor: pointer;
  min-width: 180px;
  margin: 0.19em auto;
  display: flex;
  align-items: center;
  gap: 0.72em;
  justify-content: center;
}

.ab-btn:hover,
.ab-btn:focus {
  border-color: #b6cef5;
  background: #f5f8fd;
  color: #174987;
  box-shadow: 0 0px 13px #d9e3f782;
}

.ab-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Simple Clean Feature Items */
.about-features-simple {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.feature-item-simple {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: #f8fbff;
  border: 1px solid rgba(35, 48, 117, 0.1);
  border-radius: 12px;
  transition: all 0.25s ease;
  cursor: pointer;
}

.feature-item-simple:hover {
  background: #ffffff;
  border-color: rgba(35, 48, 117, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(35, 48, 117, 0.1);
}

.feature-icon-simple {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(35, 48, 117, 0.08);
  border-radius: 10px;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.feature-item-simple:hover .feature-icon-simple {
  background: rgba(35, 48, 117, 0.12);
  transform: scale(1.1);
}

.feature-item-simple span {
  font-size: 0.95rem;
  font-weight: 500;
  color: #233075;
  line-height: 1.4;
}

.about-simple-card {
  transition: all 0.3s ease;
}

.about-simple-card:hover {
  box-shadow: 0 8px 24px rgba(35, 48, 117, 0.08);
}

/* Two Column Layout Styles - Larger Image */
.about-content-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

.about-image-wrapper {
  position: relative;
  overflow: visible;
}

.about-image-container {
  position: relative;
}

.about-main-img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  height: auto;
  min-height: 400px;
  object-fit: cover;
}

.about-image-wrapper:hover .about-main-img {
  transform: scale(1.02);
}

.about-text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Responsive Design */
@media (max-width: 968px) {
  .about-content-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .about-image-wrapper {
    order: -1;
  }

  .about-main-img {
    min-height: 280px !important;
    max-height: 350px;
  }

  .about-features-simple {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 700px) {
  .about-content-grid {
    gap: 1.5rem !important;
  }

  .about-simple-card {
    padding: 1.25rem !important;
    margin: 0 0.5rem !important;
  }

  .about-features-simple {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
  }

  .feature-item-simple {
    padding: 0.7rem 0.875rem !important;
  }

  .about-main-img {
    min-height: 200px !important;
    max-height: 280px !important;
  }

  .about-container {
    padding: 0 0.5rem !important;
  }

  .about-text-wrapper p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
  }

  .card-glass {
    padding: 2.1rem 0.6rem 1.5rem 0.6rem;
  }

  .about-tobotics {
    padding: 3rem 0.5rem 3rem 0.5rem !important;
  }

  .title-glow {
    font-size: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
}

@media (max-width:420px) {
  .about-btnrow-content {
    grid-template-columns: 1fr;
    gap: .62em;
  }

  .about-tobotics {
    padding: 2rem 0.25rem 2rem 0.25rem !important;
  }

  .about-simple-card {
    padding: 1rem !important;
    margin: 0 0.25rem !important;
    border-radius: 16px !important;
  }

  .about-main-img {
    min-height: 180px !important;
    max-height: 220px !important;
    border-radius: 12px !important;
  }

  .about-text-wrapper p {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
  }

  .feature-item-simple {
    padding: 0.6rem 0.75rem !important;
  }

  .feature-item-simple span {
    font-size: 0.85rem !important;
  }

  .card-glass {
    padding: 1.38rem 0.3rem 1.01rem 0.3rem;
  }

  .title-glow {
    font-size: 1.25rem !important;
    margin-bottom: 1.25rem !important;
  }
}

.about-highlights-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.4rem;
  margin: 2.2rem 0 1.7rem 0;
  width: 100%;
  padding: 0 0.3rem;
}

.about-highlight {
  background: #f6f8fc;
  border-radius: 1.1rem;
  text-align: center;
  padding: 1.35rem 0.7rem 1.1rem 0.7rem;
  box-shadow: 0 2px 22px rgba(67, 85, 151, 0.047);
  transition: box-shadow 0.2s, transform 0.2s;
}

.about-highlight:hover {
  box-shadow: 0 6px 16px #c7dfff4c;
  transform: translateY(-2px) scale(1.035);
}

.highlight-stat {
  font-size: 2.1rem;
  font-weight: 700;
  color: #256ccf;
  margin-bottom: 0.20em;
  letter-spacing: -1.2px;
}

.highlight-desc {
  font-size: 1.05rem;
  color: #24508b;
  margin-top: 0.27em;
  font-weight: 500;
}

.about-mission {
  border-left: 4px solid #256ccf22;
  padding: 1.1em 1.4em;
  margin: 1.4em auto 1em auto;
  max-width: 660px;
  background: #fafdff;
  color: #29354c;
  font-size: 1.16rem;
  font-style: italic;
  border-radius: 0 13px 13px 0;
  box-shadow: 0 3px 16px #d2eafe15;
}

.about-quote {
  text-align: center;
  margin-top: 2.1em;
  margin-bottom: 1.4em;
  max-width: 590px;
  margin-left: auto;
  margin-right: auto;
  background: #f5f8fc;
  border-radius: 1.2em;
  padding: 1.1em 0.7em 0.7em 0.7em;
  box-shadow: 0 1.5px 11px #c1d4f54a;
}

.about-quote-text {
  font-size: 1.19rem;
  color: #34435a;
  line-height: 1.59;
  font-style: italic;
  margin-bottom: 0.6em;
}

.about-quote-author {
  font-size: 1.01rem;
  color: #24508b;
  font-weight: 500;
}

@media (max-width: 750px) {
  .about-highlights-row {
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
  }

  .about-highlight {
    font-size: 1rem;
    padding: 1rem .4rem;
  }
}

@media (max-width: 480px) {
  .about-highlights-row {
    grid-template-columns: 1fr;
    gap: .81rem;
  }

  .about-highlight {
    font-size: .96rem;
    padding: .79rem .15rem;
  }
}

.about-card-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.1rem;
  margin: 0.8rem 0 1.15rem 0;
  width: 100%;
}

.about-card-highlight {
  background: #f6f8fc;
  border-radius: 14px;
  text-align: center;
  padding: 1.1rem 0.3rem 0.86rem 0.3rem;
  color: #204278;
  font-size: 1.04rem;
  font-weight: 500;
  box-shadow: 0 2px 12px rgba(44, 76, 125, 0.045);
  transition: box-shadow 0.2s, transform 0.2s;
}

.about-card-highlight:hover {
  box-shadow: 0 6px 14px #c7dfff4f;
  transform: translateY(-2px) scale(1.03);
}

.achieve-stat {
  display: block;
  font-size: 1.41rem;
  color: #1d5ac9;
  font-weight: 700;
  letter-spacing: -1.1px;
  margin-bottom: 0.1em;
}

.about-card-mission {
  display: block;
  margin: 0.9em auto 0 auto;
  color: #2c4162;
  opacity: 0.92;
  font-size: 1rem;
  font-style: italic;
  text-align: center;
  max-width: 540px;
}

@media (max-width: 700px) {
  .about-card-highlights {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  .about-card-highlight {
    padding: 0.85rem 0.10rem .74rem 0.10rem;
    font-size: .99rem;
  }
}

@media (max-width:440px) {
  .about-card-highlights {
    grid-template-columns: 1fr;
    gap: .51rem;
  }
}

/* --- Founders Row modern card layout --- */
.founders-row {
  display: flex;
  gap: 32px;
  margin: 18px 0 38px 0;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.founder-card {
  background: linear-gradient(110deg, #f8fbff 60%, #e6eaff 100%);
  border-radius: 22px;
  box-shadow: 0 4px 24px rgba(44, 59, 104, 0.06);
  border: 1px solid #e6eef8;
  padding: 32px 28px 24px 28px;
  min-width: 210px;
  max-width: 280px;
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: box-shadow .23s, transform .23s, background .19s;
  z-index: 2;
  animation: fadeInUp 0.85s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.founder-card:hover {
  box-shadow: 0 8px 38px 0 rgba(44, 59, 104, 0.13), 0 0 16px 4px #b7d0f7;
  transform: translateY(-4px) scale(1.035);
}

.founder-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 22px rgba(44, 59, 104, 0.11);
  margin-bottom: 15px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.founder-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.founder-card h4 {
  margin: 0 0 2px 0;
  font-size: 1.22rem;
  font-weight: 800;
  color: #202355;
  letter-spacing: -0.5px;
}

.founder-role {
  font-size: 1.01rem;
  font-weight: 600;
  color: var(--blue-700);
  margin-bottom: 2px;
  display: block;
}

.founder-tagline {
  font-size: 0.99rem;
  color: #394687;
  margin-top: 9px;
  text-align: center;
  font-weight: 500;
  background: linear-gradient(90deg, #e2e3fb 30%, #eaffe8 100%);
  border-radius: 12px;
  padding: 2px 15px;
}

.founder-animate {
  opacity: 0;
  animation: fadeInUp 0.9s 0.17s forwards;
}

.founder-card:nth-child(2) {
  animation-delay: 0.32s;
}

@media (max-width: 900px) {
  .founders-row {
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }

  .founder-card {
    max-width: 99vw;
    min-width: 0;
    width: 100%;
  }
}

/* --- Divider with icon --- */
.about-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px auto 30px auto;
  font-size: 2.1rem;
  color: #2869ca;
  opacity: .17;
  letter-spacing: 9px;
  width: 100%;
}

.about-divider i {
  filter: drop-shadow(0 2px 2px #a9d9fe33);
}

/* --- Inspiring story block ---*/
.our-story-highlight {
  background: linear-gradient(100deg, #f8fdff 70%, #eaeaff 100%);
  border-left: 4px solid #6290f533;
  box-shadow: 0 1px 23px #bad5fb13;
  border-radius: 15px;
  padding: 36px 3vw 24px 32px;
  margin-bottom: 22px;
  position: relative;
  animation: fadeInUp 0.7s 0.38s both;
}

.our-story-highlight p {
  font-size: 1.13rem;
  color: #1a2747;
  font-weight: 500;
  line-height: 1.75;
  margin: 0 0 14px 0;
  text-align: left;
}

.our-story-highlight .about-heart {
  color: #ee457a;
  margin-left: 6px;
  font-size: 1.05em;
  vertical-align: middle;
}

@media (max-width:650px) {
  .our-story-highlight {
    padding: 18px 8px 14px 10px;
    border-radius: 8px;
  }

  .founder-card {
    padding: 22px 9px 14px 9px;
  }
}

/* --- Leadership List (Text-only) --- */
.leadership-list {
  margin: 22px 0 34px 0;
  font-size: 1.05rem;
  color: #213356;
  font-weight: 500;
}

.leadership-list ul {
  list-style: disc inside;
  margin: 10px 0 0 0;
  padding-left: 1.2em;
}

.leadership-list li {
  margin-bottom: 6px;
  line-height: 1.59;
}

.founder-tagline {
  color: #5681ca;
  font-size: 0.96em;
  font-weight: 400;
  font-style: italic;
  margin-left: 4px;
}

/* Remove card/photo founder styles (from previous step) */
.founders-row,
.founder-card,
.founder-avatar {
  display: none !important;
}

/* --- MEET OUR TEAM SECTION --- */
.team-leadership {
  margin: 4rem 0 3rem 0;
  padding: 3rem 0;
  position: relative;
}

.team-leadership-header {
  text-align: center;
  margin-bottom: 3rem;
}

.team-leadership-header h3 {
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 800;
  color: #163167;
  margin: 0 0 0.5rem 0;
  position: relative;
  display: inline-block;
}

.team-leadership-header h3::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #293762, #6b78a8);
  border-radius: 2px;
}

.team-leadership-header p {
  color: #607296;
  font-size: 1.1rem;
  margin-top: 1.2rem;
  font-weight: 500;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* First 3 cards in first row - each spans 2 columns */
.team-member:nth-child(1) {
  grid-column: 1 / 3;
}

.team-member:nth-child(2) {
  grid-column: 3 / 5;
}

.team-member:nth-child(3) {
  grid-column: 5 / 7;
}

/* Center the last 2 cards in second row - each spans 2 columns, centered */
.team-member:nth-child(4) {
  grid-column: 2 / 4;
}

.team-member:nth-child(5) {
  grid-column: 4 / 6;
}

.team-member {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #e6eef8;
  border-radius: 1.2rem;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(44, 62, 112, 0.06);
  position: relative;
  overflow: hidden;
}

.team-member::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #293762, #6b78a8, #293762);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.team-member:hover::before {
  transform: scaleX(1);
}

.team-member:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(44, 62, 112, 0.15);
  border-color: #b7d0f7;
}

.team-member.founder {
  background: linear-gradient(135deg, #f8fbff 0%, #eef3ff 100%);
  border: 2px solid #b7d0f7;
  box-shadow: 0 6px 28px rgba(44, 62, 112, 0.12);
}

.team-member.founder::before {
  background: linear-gradient(90deg, #ffd700, #ffed4e, #ffd700);
  height: 5px;
}

.team-member-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.2rem;
  background: linear-gradient(135deg, #293762, #6b78a8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 53, 98, 0.2);
  transition: all 0.3s ease;
}

.team-member.founder .team-member-icon {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  box-shadow: 0 8px 24px rgba(255, 215, 0, 0.3);
}

.team-member-icon i {
  font-size: 2rem;
  color: #ffffff;
}

.team-member.founder .team-member-icon i {
  color: #163167;
}

.team-member:hover .team-member-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 12px 32px rgba(37, 53, 98, 0.3);
}

.team-member h4 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #163167;
  margin: 0 0 0.4rem 0;
}

.team-role {
  font-size: 0.95rem;
  font-weight: 600;
  color: #293762;
  margin: 0 0 0.8rem 0;
  padding: 0.4rem 0.8rem;
  background: #eef3ff;
  border-radius: 20px;
  display: inline-block;
}

.team-member.founder .team-role {
  background: linear-gradient(135deg, #fff9e6, #fffbf0);
  color: #b8860b;
}

.team-description {
  font-size: 0.9rem;
  color: #607296;
  line-height: 1.6;
  margin: 0;
}

/* Join Our Team Button with Mobile Numbers Hover */
.about-cta {
  position: relative;
  z-index: 10;
}

.join-team-btn {
  position: relative;
  display: inline-flex !important;
}

.contact-numbers {
  position: absolute;
  bottom: calc(100% + 15px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #ffffff;
  border: 1px solid #e6eef8;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  box-shadow: 0 8px 32px rgba(44, 62, 112, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  z-index: 1001;
  min-width: 220px;
  pointer-events: none;
}

.contact-numbers::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #ffffff;
  z-index: 1;
}

.contact-numbers::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top-color: #e6eef8;
  margin-top: -1px;
  z-index: 0;
}

.join-team-btn:hover .contact-numbers,
.about-cta:hover .contact-numbers {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Show on the side for larger screens */
@media (min-width: 900px) {
  .contact-numbers {
    bottom: auto;
    top: 50%;
    left: calc(100% + 15px);
    transform: translateY(-50%) translateX(-10px);
  }

  .contact-numbers::before {
    top: 50%;
    left: -8px;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-right-color: #ffffff;
    border-top: none;
    border-bottom: none;
  }

  .contact-numbers::after {
    top: 50%;
    left: -9px;
    transform: translateY(-50%);
    border: 9px solid transparent;
    border-right-color: #e6eef8;
    border-top: none;
    border-bottom: none;
    margin-top: 0;
    margin-left: -1px;
  }

  .join-team-btn:hover .contact-numbers,
  .about-cta:hover .contact-numbers {
    transform: translateY(-50%) translateX(0);
  }
}

.about-cta .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(37, 124, 255, 0.4);
}

.contact-number-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  color: #163167;
  font-weight: 600;
  font-size: 0.95rem;
}

.contact-number-item:not(:last-child) {
  border-bottom: 1px solid #e6eef8;
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
}

.contact-number-item i {
  color: #293762;
  font-size: 1rem;
  width: 20px;
  text-align: center;
}

.contact-number-item span {
  color: #163167;
  font-weight: 600;
}

/* Responsive Team Section */
@media (max-width: 1200px) {
  .team-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.2rem;
  }

  .team-member:nth-child(1) {
    grid-column: 1 / 3;
  }

  .team-member:nth-child(2) {
    grid-column: 3 / 5;
  }

  .team-member:nth-child(3) {
    grid-column: 5 / 7;
  }

  .team-member:nth-child(4) {
    grid-column: 2 / 4;
  }

  .team-member:nth-child(5) {
    grid-column: 4 / 6;
  }
}

@media (max-width: 900px) {
  .team-leadership {
    margin: 3rem 0 2rem 0;
    padding: 2rem 0;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }

  .team-member:nth-child(1),
  .team-member:nth-child(2),
  .team-member:nth-child(3),
  .team-member:nth-child(4),
  .team-member:nth-child(5) {
    grid-column: span 1;
  }

  .team-member:nth-child(1) {
    grid-column: 1;
  }

  .team-member:nth-child(2) {
    grid-column: 2;
  }

  .team-member:nth-child(3) {
    grid-column: 1;
  }

  .team-member:nth-child(4) {
    grid-column: 2;
  }

  .team-member:nth-child(5) {
    grid-column: 1 / 3;
    max-width: 300px;
    margin: 0 auto;
  }

  .team-member {
    padding: 1.5rem 1rem;
  }

  .team-member-icon {
    width: 70px;
    height: 70px;
  }

  .team-member-icon i {
    font-size: 1.7rem;
  }

  .team-member h4 {
    font-size: 1.15rem;
  }
}

@media (max-width: 600px) {
  .team-leadership {
    margin: 2.5rem 0 1.5rem 0;
    padding: 1.5rem 0;
  }

  .team-leadership-header {
    margin-bottom: 2rem;
  }

  .team-leadership-header h3 {
    font-size: 22px;
  }

  .team-leadership-header p {
    font-size: 0.95rem;
  }

  .team-grid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem;
    max-width: 100%;
  }

  /* Force each card to take full width and appear in its own row */
  .team-member {
    grid-column: 1 !important;
    width: 100%;
    max-width: 100%;
    padding: 1.5rem 1.2rem;
  }

  .team-member:nth-child(1),
  .team-member:nth-child(2),
  .team-member:nth-child(3),
  .team-member:nth-child(4),
  .team-member:nth-child(5) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .team-member-icon {
    width: 65px;
    height: 65px;
    margin-bottom: 1rem;
  }

  .team-member-icon i {
    font-size: 1.5rem;
  }

  .team-member h4 {
    font-size: 1.1rem;
  }

  .team-role {
    font-size: 0.85rem;
    padding: 0.35rem 0.7rem;
  }

  .team-description {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .team-member {
    grid-column: 1 !important;
    width: 100%;
    padding: 1.2rem 1rem;
  }

  .team-member:nth-child(1),
  .team-member:nth-child(2),
  .team-member:nth-child(3),
  .team-member:nth-child(4),
  .team-member:nth-child(5) {
    grid-column: 1 !important;
  }

  .team-member-icon {
    width: 60px;
    height: 60px;
  }

  .team-member-icon i {
    font-size: 1.3rem;
  }

  .contact-numbers {
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 200px;
    padding: 0.8rem 1.2rem;
  }

  .contact-number-item {
    font-size: 0.85rem;
  }

  .join-team-btn:hover .contact-numbers {
    transform: translateX(-50%) translateY(0);
  }
}

/* --- END MEET OUR TEAM SECTION --- */

/* --- KIT SECTION RESPONSIVE IMPROVEMENTS --- */
@media (max-width: 1200px) {
  #kit .container>div:nth-child(3) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 800px) {
  #kit .container>div:nth-child(3) {
    grid-template-columns: 1fr !important;
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  #kit .container {
    padding: 0 0.3rem;
  }

  #kit .container>div:nth-child(3) {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  #kit .kit-card {
    min-height: auto !important;
  }

  #kit .kit-card h3 {
    font-size: 1rem !important;
  }

  #kit .kit-card p,
  #kit .kit-card div,
  #kit .kit-card span {
    font-size: 0.92rem !important;
  }

  #kit .kit-card button {
    font-size: 0.98rem !important;
    padding: 0.5rem !important;
    border-radius: 0.5rem !important;
  }

  #kit .container>div:last-child {
    flex-direction: column;
    gap: 0.8rem !important;
  }

  #kit .container>div:last-child button {
    width: 100%;
    display: block;
    margin-bottom: 0.5rem;
  }

  /* Make images BIG on mobile */
  #kit .kit-img-bg {
    height: 300px !important;
    min-height: 280px !important;
    padding: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #kit .kit-img-bg img {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 400px) {
  #kit .container>div:nth-child(3) {
    max-width: 98vw;
  }

  #kit .kit-card {
    min-height: auto !important;
  }

  /* Even bigger images on very small screens */
  #kit .kit-img-bg {
    height: 280px !important;
    min-height: 260px !important;
    padding: 12px !important;
  }

  #kit .kit-img-bg img {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: auto !important;
  }
}

/* --- END KIT SECTION RESPONSIVE IMPROVEMENTS --- */

/* --- KIT CARDS GRID SYSTEM --- */
.kit-cards-row {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  padding: 1.5rem 1rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

.kit-cards-row::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* --- EYE-CATCHING KIT CARD DESIGN --- */
.ref-card {
  flex: 0 0 280px;
  max-width: 280px;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 4px 20px rgba(26, 43, 86, 0.06);
  border: 1px solid rgba(226, 233, 251, 0.7);
  position: relative;
}

.ref-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 2px;
  background: linear-gradient(135deg, transparent 40%, rgba(76, 151, 255, 0.15) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.ref-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 60px rgba(26, 43, 86, 0.12);
}

.ref-card:hover::after {
  opacity: 1;
}

/* Image Section — BIGGER */
.ref-card-image {
  height: 250px;
  background: linear-gradient(180deg, #f5f8ff 0%, #edf2ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  position: relative;
  overflow: hidden;
}

.ref-card-image::before {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(76, 151, 255, 0.08) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ref-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: linear-gradient(135deg, #ff9f43 0%, #ff6b35 100%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  z-index: 3;
  letter-spacing: 0.3px;
  box-shadow: 0 3px 10px rgba(255, 107, 53, 0.3);
}

.ref-card-image img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 12px 25px rgba(0, 0, 0, 0.12));
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ref-card:hover .ref-card-image img {
  transform: scale(1.08);
}

/* Content Body */
.ref-card-body {
  padding: 1.4rem 1.3rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ref-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1a2b56;
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

/* Details Text */
.ref-card-details-text {
  font-size: 0.88rem;
  color: #6b7fa5;
  line-height: 1.55;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Age Range Chip */
.ref-card-age {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #4b63ac;
  background: #f0f4ff;
  padding: 6px 14px;
  border-radius: 10px;
  margin-bottom: 1rem;
  width: fit-content;
  border: 1px solid rgba(75, 99, 172, 0.1);
}

.ref-card-age i {
  color: #4c97ff;
  font-size: 0.9rem;
}

/* Price Row */
.ref-card-price-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.25rem;
  flex-wrap: nowrap;
}

.ref-card-price-block {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ref-card-price {
  font-size: 1.5rem;
  font-weight: 900;
  color: #1a2b56;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.ref-card-original-price {
  font-size: 0.95rem;
  font-weight: 600;
  color: #aab4c8;
  text-decoration: line-through;
  white-space: nowrap;
}

.ref-card-shipping {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #10b981;
  white-space: nowrap;
  background: #ecfdf5;
  padding: 6px 14px;
  border-radius: 10px;
  margin-bottom: 1rem;
  width: fit-content;
  border: 1px solid rgba(16, 185, 129, 0.1);
}

.ref-card-shipping i {
  font-size: 0.82rem;
}

/* Buy Button */
.ref-card-btn {
  background: linear-gradient(135deg, #253562 0%, #344580 100%);
  color: #ffffff !important;
  width: 100%;
  padding: 0.9rem;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  transition: all 0.35s ease;
  box-shadow: 0 6px 18px rgba(37, 53, 98, 0.18);
  margin-top: auto;
  letter-spacing: 0.3px;
}

.ref-card-btn:hover {
  background: linear-gradient(135deg, #1a274a 0%, #253562 100%);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(37, 53, 98, 0.28);
}

.ref-card-btn i {
  font-size: 0.95rem;
}

/* Mobile */
@media (max-width: 650px) {
  .kit-cards-row {
    padding: 1rem 0.5rem;
    gap: 16px;
  }
  .ref-card {
    flex: 0 0 240px;
    max-width: 240px;
  }
}

/* --- OUT OF STOCK STYLES --- */
.ref-card.out-of-stock {
  opacity: 0.85;
}

.ref-card.out-of-stock:hover {
  transform: translateY(-4px);
}

.oos-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  z-index: 4;
  pointer-events: none;
}

.oos-badge {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.3) !important;
}

.oos-badge i {
  margin-right: 2px;
}

.ref-card.out-of-stock .ref-card-image img {
  filter: grayscale(60%) drop-shadow(0 12px 25px rgba(0, 0, 0, 0.08));
}

.oos-btn {
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important;
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.15) !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========== PRODUCT DETAIL MODAL (REDESIGNED) ========== */
.kit-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s ease;
  padding: 1.5rem;
}

.kit-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.kit-modal {
  background: #ffffff;
  border-radius: 24px;
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
  transform: translateY(30px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.kit-modal-overlay.active .kit-modal {
  transform: translateY(0) scale(1);
}

.kit-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  color: #1a2b56;
  font-size: 1.3rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.kit-modal-close:hover {
  background: #fef2f2;
  color: #ef4444;
}

/* Hero Image (Top, Compact) */
.km-hero {
  background: linear-gradient(180deg, #eef3ff 0%, #dfe8ff 50%, #f0f4ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 2rem;
  position: relative;
  border-radius: 24px 24px 0 0;
  height: 280px;
  overflow: hidden;
}

.km-hero::before {
  content: '';
  position: absolute;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(76, 151, 255, 0.12) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.km-hero img {
  max-width: 80%;
  max-height: 240px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.15));
}

.kit-modal-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: linear-gradient(135deg, #ff9f43 0%, #ff6b35 100%);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(255, 107, 53, 0.35);
  z-index: 3;
  letter-spacing: 0.3px;
}

.oos-modal-badge {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
}

.discount-modal-badge {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

/* Body Content */
.km-body {
  padding: 1.75rem 2rem 2rem;
}

/* Header */
.km-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.km-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1a2b56;
  line-height: 1.3;
  margin: 0;
}

.km-type {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #4b63ac;
  background: #f0f4ff;
  padding: 3px 12px;
  border-radius: 6px;
  margin-top: 6px;
}

.km-stock {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.km-stock.in-stock {
  background: #ecfdf5;
  color: #10b981;
}

.km-stock.out-stock {
  background: #fef2f2;
  color: #ef4444;
}

/* Info */
.km-info {
  font-size: 0.95rem;
  color: #6b7fa5;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

/* Sections */
.km-section {
  margin-bottom: 1.25rem;
}

.km-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1a2b56;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.km-section-title i {
  color: #4c97ff;
  font-size: 0.9rem;
}

.km-text {
  font-size: 0.92rem;
  color: #607296;
  line-height: 1.7;
  background: #f8faff;
  padding: 12px 16px;
  border-radius: 12px;
  border-left: 3px solid #4c97ff;
}

/* Specs Row */
.km-specs-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 1.25rem;
}

.km-spec {
  background: #f8faff;
  border: 1px solid #eef2f8;
  border-radius: 12px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.km-spec i {
  font-size: 1.1rem;
  color: #4c97ff;
  margin-bottom: 2px;
}

.km-spec-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: #8694b1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.km-spec-val {
  font-size: 0.9rem;
  font-weight: 800;
  color: #1a2b56;
}

/* Assembly List */
.km-assembly-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.km-assembly-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #344580;
  background: #f8faff;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #eef2f8;
  transition: all 0.2s ease;
}

.km-assembly-list li:hover {
  background: #edf2ff;
  border-color: #d0dbf5;
}

.km-assembly-list li i {
  color: #10b981;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.km-assembly-list li span {
  text-transform: capitalize;
}

/* Footer: Price + Buy */
.km-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid #eef2f8;
  margin-top: 0.5rem;
}

.km-price-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.km-price {
  font-size: 1.8rem;
  font-weight: 900;
  color: #1a2b56;
  letter-spacing: -1px;
}

.km-original {
  font-size: 1rem;
  font-weight: 600;
  color: #aab4c8;
  text-decoration: line-through;
}

.km-save-tag {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
}

.km-buy-btn {
  background: linear-gradient(135deg, #253562 0%, #344580 100%);
  color: #ffffff !important;
  padding: 0.85rem 2rem;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.3s ease;
  box-shadow: 0 6px 18px rgba(37, 53, 98, 0.18);
  white-space: nowrap;
  flex-shrink: 0;
}

.km-buy-btn:hover {
  background: linear-gradient(135deg, #1a274a 0%, #253562 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(37, 53, 98, 0.28);
}

.oos-modal-btn {
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important;
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.15) !important;
  cursor: not-allowed;
}

.oos-modal-btn:hover {
  transform: none !important;
}

/* Modal Mobile */
@media (max-width: 600px) {
  .km-hero { height: 220px; padding: 1.5rem; }
  .km-hero img { max-height: 180px; max-width: 85%; }
  .km-body { padding: 1.25rem 1.5rem 1.5rem; }
  .km-header { flex-direction: column; gap: 0.5rem; }
  .km-title { font-size: 1.25rem; }
  .km-specs-row { grid-template-columns: repeat(2, 1fr); }
  .km-assembly-list { grid-template-columns: 1fr; }
  .km-footer { flex-direction: column; }
  .km-buy-btn { width: 100%; justify-content: center; }
}

/* --- END KIT CARDS GRID SYSTEM --- */

/* ====================================
   REFINED "WHAT IS TOBOTICS?" SECTION
   Professional UI Polish
   ==================================== */

.about-tobotics-refined {
  position: relative;
  background: linear-gradient(180deg, #fafcff 0%, #f5f8fc 100%);
  padding: clamp(4rem, 8vw, 6rem) 1.5rem;
  text-align: center;
  overflow: hidden;
}

/* Subtle decorative background */
.about-tobotics-refined::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(42, 56, 99, 0.03) 0%, transparent 70%),
    radial-gradient(ellipse 40% 20% at 80% 70%, rgba(42, 56, 99, 0.02) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.about-container-refined {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding: 0 1rem;
}

/* Title Styling */
.about-title-refined {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  color: #2A3863;
  margin: 0 0 2rem 0;
  letter-spacing: -0.5px;
  line-height: 1.2;
  position: relative;
  display: inline-block;
}

.about-title-refined::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, #2A3863 0%, rgba(42, 56, 99, 0.3) 100%);
  margin: 0.75rem auto 0;
  border-radius: 2px;
}

/* Main Card */
.about-card-refined {
  background: #ffffff;
  border-radius: 1.5rem;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
  box-shadow:
    0 1px 3px rgba(42, 56, 99, 0.04),
    0 4px 12px rgba(42, 56, 99, 0.06);
  border: 1px solid rgba(42, 56, 99, 0.05);
}

/* Text Styling */
.about-text-refined {
  font-family: 'Segoe UI', 'Inter', sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.8;
  color: #3a4a68;
  margin: 0 auto 1.25rem;
  max-width: 720px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.about-text-secondary-refined {
  font-family: 'Segoe UI', 'Inter', sans-serif;
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  line-height: 1.75;
  color: #5a6a84;
  margin: 0 auto 2rem;
  max-width: 680px;
  font-weight: 400;
}

/* Brand Name */
.brand-name-refined {
  color: #2A3863;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Highlighted Keywords */
.highlight-keyword {
  color: #2A3863;
  font-weight: 600;
  position: relative;
  background: linear-gradient(180deg, transparent 65%, rgba(42, 56, 99, 0.1) 65%);
  padding: 0 2px;
}

/* Accent Words */
.accent-word {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.accent-word.fun {
  color: #0097a7;
}

.accent-word.simple {
  color: #26a69a;
}

.accent-word.practical {
  color: #2A3863;
}

/* Button Row */
.about-btnrow-refined {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.875rem;
  max-width: 600px;
  margin: 0 auto;
  padding-top: 0.5rem;
}

/* Refined Buttons */
.ab-btn-refined {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  background: #fafbfd;
  border: 1px solid #e8ecf4;
  border-radius: 12px;
  font-family: 'Segoe UI', 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: #2A3863;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(42, 56, 99, 0.04);
}

.ab-btn-refined:hover {
  background: #ffffff;
  border-color: #d0d9e8;
  box-shadow: 0 2px 8px rgba(42, 56, 99, 0.08);
  transform: translateY(-1px);
}

.ab-btn-refined:focus {
  outline: none;
  border-color: #2A3863;
  box-shadow: 0 0 0 3px rgba(42, 56, 99, 0.1);
}

.ab-btn-icon-refined {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ab-btn-icon-refined svg {
  opacity: 0.85;
}

/* Responsive Adjustments */
@media (max-width: 700px) {
  .about-tobotics-refined {
    padding: clamp(3rem, 6vw, 4rem) 1rem;
  }

  .about-card-refined {
    padding: 1.75rem 1.25rem;
    border-radius: 1.25rem;
  }

  .about-btnrow-refined {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .about-title-refined {
    font-size: 1.5rem;
  }

  .about-card-refined {
    padding: 1.5rem 1rem;
  }

  .about-text-refined {
    font-size: 1rem;
  }

  .about-text-secondary-refined {
    font-size: 0.92rem;
  }

  .about-btnrow-refined {
    grid-template-columns: 1fr;
    gap: 0.625rem;
  }

  .ab-btn-refined {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
}

/* =============================================
   ENHANCED "WHAT IS TOBOTICS?" SECTION
   Visually Impressive & Professional
   ============================================= */

.about-tobotics-enhanced {
  position: relative;
  background: linear-gradient(180deg, #f8fbff 0%, #f0f5fc 50%, #f5f8fd 100%);
  padding: clamp(4rem, 10vw, 7rem) 1.5rem;
  overflow: hidden;
}

/* Background Elements Container */
.about-bg-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Animated Gradient Blobs */
.about-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
  animation: blobFloat 20s ease-in-out infinite;
}

.blob-1 {
  width: 400px;
  height: 400px;
  top: -100px;
  left: -100px;
  background: linear-gradient(135deg, rgba(42, 56, 99, 0.08) 0%, rgba(100, 140, 200, 0.06) 100%);
  animation-delay: 0s;
}

.blob-2 {
  width: 300px;
  height: 300px;
  top: 40%;
  right: -80px;
  background: linear-gradient(135deg, rgba(100, 160, 220, 0.07) 0%, rgba(42, 56, 99, 0.05) 100%);
  animation-delay: -7s;
}

.blob-3 {
  width: 350px;
  height: 350px;
  bottom: -100px;
  left: 30%;
  background: linear-gradient(135deg, rgba(42, 56, 99, 0.06) 0%, rgba(140, 180, 220, 0.05) 100%);
  animation-delay: -14s;
}

@keyframes blobFloat {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(30px, -20px) scale(1.05);
  }

  50% {
    transform: translate(-20px, 30px) scale(0.95);
  }

  75% {
    transform: translate(20px, 20px) scale(1.02);
  }
}

/* Floating Particles */
.about-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
}

.particle-1 {
  width: 8px;
  height: 8px;
  top: 15%;
  left: 10%;
  background: rgba(42, 56, 99, 0.15);
  animation: particleFloat1 15s ease-in-out infinite;
}

.particle-2 {
  width: 6px;
  height: 6px;
  top: 60%;
  left: 85%;
  background: rgba(42, 56, 99, 0.12);
  animation: particleFloat2 18s ease-in-out infinite;
}

.particle-3 {
  width: 10px;
  height: 10px;
  top: 80%;
  left: 20%;
  background: rgba(42, 56, 99, 0.1);
  animation: particleFloat3 12s ease-in-out infinite;
}

.particle-4 {
  width: 5px;
  height: 5px;
  top: 25%;
  right: 15%;
  background: rgba(42, 56, 99, 0.18);
  animation: particleFloat4 20s ease-in-out infinite;
}

@keyframes particleFloat1 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(40px, -30px);
  }
}

@keyframes particleFloat2 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-30px, 40px);
  }
}

@keyframes particleFloat3 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(25px, -20px);
  }
}

@keyframes particleFloat4 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-20px, 30px);
  }
}

/* Wave Decorations */
.about-wave-top,
.about-wave-bottom {
  position: absolute;
  width: 100%;
  height: 80px;
  left: 0;
}

.about-wave-top {
  top: 0;
}

.about-wave-bottom {
  bottom: 0;
}

/* Grid Pattern */
.about-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(42, 56, 99, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 56, 99, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.5;
}

/* Main Container */
.about-container-enhanced {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding: 0 1rem;
}

/* Section Header */
.about-header-enhanced {
  text-align: center;
  margin-bottom: 3rem;
}

.about-badge {
  display: inline-block;
  background: linear-gradient(135deg, rgba(42, 56, 99, 0.08) 0%, rgba(42, 56, 99, 0.04) 100%);
  color: #2A3863;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  margin-bottom: 1rem;
  letter-spacing: 0.03em;
  border: 1px solid rgba(42, 56, 99, 0.1);
}

.about-title-enhanced {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #1a2744;
  margin: 0 0 0.75rem 0;
  line-height: 1.15;
  letter-spacing: -1px;
}

.title-highlight {
  color: #2A3863;
  position: relative;
}

.title-highlight::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg, rgba(42, 56, 99, 0.15) 0%, rgba(42, 56, 99, 0.05) 100%);
  border-radius: 4px;
  z-index: -1;
}

.title-underline {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #2A3863 0%, rgba(42, 56, 99, 0.3) 100%);
  margin: 0 auto;
  border-radius: 2px;
}

/* Content Wrapper - Two Columns */
.about-content-wrapper {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 3rem;
}

/* Image Side */
.about-image-side {
  position: relative;
}

.about-image-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-glow {
  position: absolute;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(42, 56, 99, 0.1) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 0;
}

.about-main-image {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: 24px;
  z-index: 1;
  filter: drop-shadow(0 20px 40px rgba(42, 56, 99, 0.15));
  transition: transform 0.4s ease;
}

.about-main-image:hover {
  transform: scale(1.02) translateY(-5px);
}

/* Floating Badges on Image */
.image-float-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(42, 56, 99, 0.12);
  font-size: 0.85rem;
  font-weight: 600;
  color: #2A3863;
  z-index: 2;
  animation: badgeFloat 4s ease-in-out infinite;
}

.badge-top {
  top: 10%;
  right: -10%;
  animation-delay: 0s;
}

.badge-bottom {
  bottom: 15%;
  left: -5%;
  animation-delay: -2s;
}

@keyframes badgeFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* Text Side */
.about-text-side {
  position: relative;
}

.about-card-enhanced {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  padding: clamp(2rem, 4vw, 2.5rem);
  box-shadow:
    0 4px 20px rgba(42, 56, 99, 0.06),
    0 1px 3px rgba(42, 56, 99, 0.04);
  border: 1px solid rgba(42, 56, 99, 0.06);
}

.about-intro-text {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: #3a4a68;
  margin: 0 0 1.25rem 0;
  font-weight: 400;
}

.brand-highlight {
  color: #2A3863;
  font-weight: 700;
  font-size: 1.1em;
}

/* Keyword Pills */
.keyword-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.keyword-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #2A3863 0%, #3d5189 100%);
  color: white;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.65rem 1.25rem;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(42, 56, 99, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.keyword-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(42, 56, 99, 0.25);
}

.keyword-pill svg {
  opacity: 0.9;
}

.about-desc-text {
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  line-height: 1.75;
  color: #5a6a84;
  margin: 0 0 1.75rem 0;
}

/* Accent Glow Words */
.accent-glow {
  font-weight: 700;
  position: relative;
}

.accent-glow.fun {
  color: #0097a7;
}

.accent-glow.simple {
  color: #26a69a;
}

.accent-glow.practical {
  color: #2A3863;
}

/* Feature Buttons Grid */
.about-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.875rem;
}

.feature-btn-enhanced {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  background: linear-gradient(135deg, #fafbfe 0%, #f5f7fb 100%);
  border: 1px solid rgba(42, 56, 99, 0.08);
  border-radius: 14px;
  font-family: 'Segoe UI', 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #2A3863;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(42, 56, 99, 0.04);
}

.feature-btn-enhanced:hover {
  background: white;
  border-color: rgba(42, 56, 99, 0.15);
  box-shadow: 0 4px 16px rgba(42, 56, 99, 0.1);
  transform: translateY(-2px);
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, rgba(42, 56, 99, 0.08) 0%, rgba(42, 56, 99, 0.04) 100%);
  border-radius: 10px;
  color: #2A3863;
  flex-shrink: 0;
}

.feature-text {
  text-align: left;
  line-height: 1.3;
}

/* Trust Indicators Row */
.about-trust-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  padding: 2rem;
  background: white;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(42, 56, 99, 0.06);
  border: 1px solid rgba(42, 56, 99, 0.05);
}

.trust-item {
  text-align: center;
}

.trust-number {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: #2A3863;
  line-height: 1.2;
  letter-spacing: -1px;
}

.trust-label {
  display: block;
  font-size: 0.85rem;
  color: #5a6a84;
  font-weight: 500;
  margin-top: 0.25rem;
}

.trust-divider {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, transparent, rgba(42, 56, 99, 0.15), transparent);
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 900px) {
  .about-content-wrapper {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-image-side {
    order: -1;
  }

  .about-main-image {
    max-width: 320px;
  }

  .badge-top {
    right: 5%;
  }

  .badge-bottom {
    left: 5%;
  }
}

@media (max-width: 700px) {
  .about-tobotics-enhanced {
    padding: clamp(3rem, 8vw, 5rem) 1rem;
  }

  .about-header-enhanced {
    margin-bottom: 2rem;
  }

  .about-card-enhanced {
    padding: 1.5rem 1.25rem;
    border-radius: 20px;
  }

  .about-features-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .about-trust-row {
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.5rem 1rem;
  }

  .trust-divider {
    display: none;
  }

  .trust-item {
    flex: 1 1 80px;
    min-width: 80px;
  }

  .image-float-badge {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
  }

  .badge-top {
    top: 5%;
    right: 0;
  }

  .badge-bottom {
    bottom: 10%;
    left: 0;
  }
}

@media (max-width: 480px) {
  .about-title-enhanced {
    font-size: 1.75rem;
  }

  .about-badge {
    font-size: 0.75rem;
    padding: 0.4rem 1rem;
  }

  .keyword-pills {
    flex-direction: column;
    gap: 0.6rem;
  }

  .keyword-pill {
    justify-content: center;
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
  }

  .feature-btn-enhanced {
    padding: 0.75rem 0.9rem;
    font-size: 0.85rem;
  }

  .feature-icon {
    width: 32px;
    height: 32px;
  }

  .about-main-image {
    max-width: 280px;
  }

  .image-float-badge {
    display: none;
  }
}

/* ============================================
   TOBOTICS APPLICATIONS & SOFTWARE SECTION
   Modern, Creative, Premium Design
   ============================================ */

.tobotics-apps-section {
  position: relative;
  background: linear-gradient(180deg, #f8fbff 0%, #f0f5fc 50%, #f8fbff 100%);
  padding: clamp(4rem, 8vw, 6rem) 1.5rem;
  overflow: hidden;
}

/* Background Decorative Elements */
.tobotics-apps-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 60% 30% at 20% 20%, rgba(42, 56, 99, 0.04) 0%, transparent 70%),
    radial-gradient(ellipse 50% 25% at 80% 80%, rgba(42, 56, 99, 0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.apps-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Section Header */
.apps-header {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
  animation: fadeInUp 0.6s ease-out;
}

.apps-title {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  color: #1a2744;
  margin: 0 0 1rem 0;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.apps-title-accent {
  color: #2A3863;
  position: relative;
}

.apps-subtitle {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: #5a6a84;
  margin: 0;
  font-weight: 400;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Section Subtitle */
.apps-section-title {
  margin-bottom: 2rem;
  animation: fadeInUp 0.7s ease-out 0.3s both;
}

.section-subtitle {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: #2A3863;
  margin: 0;
  text-align: center;
}

/* Apps Grid - 4 Column Layout */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  animation: fadeInUp 0.8s ease-out 0.4s both;
  margin-bottom: 2rem;
}

/* Software Grid - Single Column */
.software-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 600px;
  margin: 0 auto;
  animation: fadeInUp 0.8s ease-out 0.5s both;
}

/* Individual App Item Cards */
.app-item-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 1.75rem;
  border: 1px solid rgba(42, 56, 99, 0.1);
  box-shadow: 0 4px 16px rgba(42, 56, 99, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.app-item-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2A3863 0%, rgba(42, 56, 99, 0.5) 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.app-item-card:hover::before {
  transform: scaleX(1);
}

.app-item-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 32px rgba(42, 56, 99, 0.12);
  border-color: rgba(42, 56, 99, 0.2);
}

/* Coming Soon Card */
.coming-soon-card {
  position: relative;
  opacity: 0.9;
}

.coming-soon-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, #ff9800 0%, #ff6b00 100%);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.4rem 0.875rem;
  border-radius: 20px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
  letter-spacing: 0.5px;
}

/* App Item Image */
.app-item-image {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, #f0f5fc 0%, #e8f0fa 100%);
  border-radius: 16px;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.app-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.app-item-card:hover .app-item-img {
  transform: scale(1.05);
}

/* App Item Content */
.app-item-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.app-item-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2A3863;
  margin: 0 0 0.75rem 0;
  line-height: 1.3;
}

.app-item-desc {
  font-size: 0.95rem;
  color: #5a6a84;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
  flex-grow: 1;
}

/* App Item Buttons */
.app-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.play-store-link {
  background: linear-gradient(135deg, #2A3863 0%, #3d5189 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(42, 56, 99, 0.2);
}

.play-store-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(42, 56, 99, 0.3);
  background: linear-gradient(135deg, #3d5189 0%, #2A3863 100%);
}

.software-download-link {
  background: linear-gradient(135deg, #2A3863 0%, #3d5189 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(42, 56, 99, 0.2);
}

.software-download-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(42, 56, 99, 0.3);
  background: linear-gradient(135deg, #3d5189 0%, #2A3863 100%);
}

.coming-soon-btn {
  background: rgba(42, 56, 99, 0.1);
  color: #5a6a84;
  pointer-events: none;
}

.app-item-btn svg {
  flex-shrink: 0;
}

.app-item-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.app-item-btn:hover::before {
  left: 100%;
}

/* Software Card - Larger */
.software-card {
  padding: 2.5rem;
}

.software-card .app-item-image {
  height: 240px;
}

.software-card .app-item-name {
  font-size: 1.5rem;
}

.software-card .app-item-desc {
  font-size: 1.05rem;
  margin-bottom: 2rem;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .apps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 768px) {
  .apps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .app-item-card {
    padding: 1.5rem;
  }

  .app-item-image {
    height: 150px;
  }

  .app-item-name {
    font-size: 1.1rem;
  }

  .app-item-desc {
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
  }

  .app-item-btn {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }

  .software-card {
    padding: 2rem;
  }

  .software-card .app-item-image {
    height: 200px;
  }
}

@media (max-width: 640px) {
  .tobotics-apps-section {
    padding: 3rem 1rem;
  }

  .apps-header {
    margin-bottom: 2.5rem;
  }

  .apps-section-title {
    margin-bottom: 1.5rem;
  }

  .section-subtitle {
    font-size: 1.5rem;
  }

  .apps-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .app-item-card {
    padding: 1.5rem 1.25rem;
  }

  .app-item-image {
    height: 180px;
  }

  .app-item-name {
    font-size: 1.15rem;
  }

  .app-item-desc {
    font-size: 0.95rem;
  }

  .app-item-btn {
    padding: 0.875rem 1.25rem;
    font-size: 0.95rem;
  }

  .coming-soon-badge {
    font-size: 0.7rem;
    padding: 0.35rem 0.75rem;
    top: 0.75rem;
    right: 0.75rem;
  }

  .software-card {
    padding: 2rem 1.5rem;
  }

  .software-card .app-item-image {
    height: 200px;
  }

  .software-card .app-item-name {
    font-size: 1.35rem;
  }
}

@media (max-width: 480px) {
  .apps-grid {
    gap: 1rem;
  }

  .app-item-card {
    padding: 1.25rem 1rem;
  }

  .app-item-image {
    height: 160px;
  }

  .app-item-name {
    font-size: 1.1rem;
  }

  .app-item-desc {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  .app-item-btn {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
}

/* ===================================================
   TOBOTICS SOFTWARE SHOWCASE SECTION STYLES
   Premium Modern Design with Glassmorphism & 3D Effects
   =================================================== */

.software-showcase {
  position: relative;
  padding: 6rem 1.5rem;
  background: linear-gradient(135deg, #0a1628 0%, #1a2d4a 50%, #0f1f36 100%);
  overflow: hidden;
  min-height: 100vh;
}

/* Animated Background Elements */
.software-bg-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.software-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: blobFloat 15s ease-in-out infinite;
}

.blob-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  top: -150px;
  left: -100px;
  animation-delay: 0s;
}

.blob-2 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #06b6d4, #22d3ee);
  top: 50%;
  right: -100px;
  animation-delay: -5s;
}

.blob-3 {
  width: 350px;
  height: 350px;
  background: linear-gradient(135deg, #f43f5e, #ec4899);
  bottom: -100px;
  left: 30%;
  animation-delay: -10s;
}

@keyframes blobFloat {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(30px, -30px) scale(1.05);
  }

  50% {
    transform: translate(-20px, 20px) scale(0.95);
  }

  75% {
    transform: translate(20px, 30px) scale(1.02);
  }
}

.software-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* Floating Icons */
.floating-icon {
  position: absolute;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 1.2rem;
  animation: floatIcon 6s ease-in-out infinite;
  backdrop-filter: blur(10px);
}

.fi-1 {
  top: 15%;
  left: 8%;
  animation-delay: 0s;
}

.fi-2 {
  top: 25%;
  right: 10%;
  animation-delay: -1.5s;
}

.fi-3 {
  bottom: 30%;
  left: 5%;
  animation-delay: -3s;
}

.fi-4 {
  bottom: 20%;
  right: 8%;
  animation-delay: -4.5s;
}

@keyframes floatIcon {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(5deg);
  }
}

/* Container */
.software-container {
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

/* Section Header */
.software-header {
  text-align: center;
  margin-bottom: 4rem;
}

.software-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
  border: 1px solid rgba(139, 92, 246, 0.3);
  padding: 0.6rem 1.2rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
  animation: badgePulse 3s ease-in-out infinite;
}

.software-badge .badge-icon {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.8rem;
}

.software-badge span:last-child {
  color: #c4b5fd;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

@keyframes badgePulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
  }

  50% {
    box-shadow: 0 0 20px 5px rgba(139, 92, 246, 0.2);
  }
}

.software-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 1rem 0;
  line-height: 1.2;
}

.gradient-text {
  background: linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.software-subtitle {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Software Cards Grid */
.software-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

/* Software Card */
.software-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.software-card:hover {
  transform: translateY(-10px) scale(1.02);
}

.card-glow {
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899, #6366f1);
  background-size: 400% 400%;
  border-radius: 26px;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: glowRotate 5s linear infinite;
  z-index: -1;
}

.software-card:hover .card-glow {
  opacity: 1;
}

@keyframes glowRotate {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.card-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
  z-index: 10;
  pointer-events: none;
}

.software-card:hover .card-shine {
  left: 100%;
}

.software-card-inner {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  overflow: hidden;
  height: 100%;
}

/* Featured Card */
.software-card-featured .software-card-inner {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.software-card-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: white;
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 20;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

/* Card Image */
.software-card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: linear-gradient(135deg, #1e293b, #334155);
}

.software-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.software-card:hover .software-card-image img {
  transform: scale(1.1);
}

.image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.8), rgba(139, 92, 246, 0.8));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.software-card:hover .image-overlay {
  opacity: 1;
}

.overlay-icon {
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.overlay-icon:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.3);
}

/* Card Content */
.software-card-content {
  padding: 1.5rem;
}

.software-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.version-tag {
  background: rgba(34, 211, 238, 0.15);
  color: #22d3ee;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.platform-tag {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.software-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.75rem 0;
}

.software-desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1.25rem 0;
}

/* Software Features */
.software-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.software-features .feature-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: #4ade80;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
}

.software-features .feature-chip i {
  font-size: 0.65rem;
}

/* Software Stats */
.software-stats {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 1.25rem;
}

.stat-item-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stat-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
}

.stat-lbl {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Download Button */
.download-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.download-btn:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateY(-2px);
}

.download-btn .btn-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.download-btn .btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.download-btn .btn-main {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}

.download-btn .btn-sub {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.download-btn .btn-arrow {
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.download-btn:hover .btn-arrow {
  color: #a78bfa;
  transform: translateX(5px);
}

/* Primary Download (Featured) */
.primary-download {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
}

.primary-download .btn-icon {
  background: rgba(255, 255, 255, 0.2);
}

.primary-download:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 15px 40px rgba(99, 102, 241, 0.5);
}

/* Trust Indicators */
.software-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  margin-bottom: 3rem;
}

.software-trust .trust-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  font-weight: 500;
}

.software-trust .trust-item i {
  color: #4ade80;
  font-size: 1.2rem;
}

/* System Requirements */
.system-requirements {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 2rem;
}

.req-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.req-header i {
  color: #60a5fa;
  font-size: 1.3rem;
}

.req-header h4 {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}

.req-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.req-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.req-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.req-value {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
}

/* Responsive Styles for Software Showcase */
@media (max-width: 1024px) {
  .software-showcase {
    padding: 4rem 1rem;
  }

  .software-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }

  .software-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
  }
}

@media (max-width: 768px) {
  .software-showcase {
    padding: 3rem 1rem;
  }

  .software-header {
    margin-bottom: 2.5rem;
  }

  .software-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .software-card:hover {
    transform: translateY(-5px);
  }

  .software-card-image {
    height: 180px;
  }

  .software-trust {
    gap: 1rem;
    padding: 1.5rem;
  }

  .software-trust .trust-item {
    flex: 1 1 45%;
    justify-content: center;
    font-size: 0.85rem;
  }

  .req-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .floating-icon {
    display: none;
  }
}

@media (max-width: 480px) {
  .software-showcase {
    padding: 2.5rem 0.75rem;
  }

  .software-title {
    font-size: 1.6rem;
  }

  .software-subtitle {
    font-size: 1rem;
  }

  .software-card-content {
    padding: 1.25rem;
  }

  .software-name {
    font-size: 1.2rem;
  }

  .software-stats {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .stat-item-mini {
    flex: 1 1 30%;
  }

  .download-btn {
    padding: 0.875rem 1rem;
  }

  .download-btn .btn-icon {
    width: 40px;
    height: 40px;
  }

  .download-btn .btn-main {
    font-size: 0.9rem;
  }

  .software-trust .trust-item {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .req-grid {
    grid-template-columns: 1fr;
  }

  .blob-1,
  .blob-2,
  .blob-3 {
    opacity: 0.2;
  }
}

/* ===================================================
   MOBILE APPLICATIONS SECTION STYLES
   Creative & Professional Design
   =================================================== */

.mobile-apps-section {
  padding: 5rem 1.5rem;
  background: linear-gradient(135deg, #eef2f9 0%, #f5f7fc 30%, #e8eef9 60%, #f0f4ff 100%);
  position: relative;
  overflow: hidden;
}

/* Animated Gradient Overlay */
.mobile-apps-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(60deg, rgba(41, 55, 99, 0.04) 0%, transparent 50%),
    linear-gradient(300deg, rgba(41, 55, 99, 0.03) 0%, transparent 50%);
  animation: appsGradientShift 12s ease-in-out infinite;
}

/* Dot Pattern */
.mobile-apps-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(41, 55, 99, 0.04) 1.5px, transparent 1.5px);
  background-size: 35px 35px;
  pointer-events: none;
}

@keyframes appsGradientShift {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* Decorations Container */
.apps-decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Floating Orbs */
.apps-orb {
  position: absolute;
  border-radius: 50%;
  animation: appsOrbFloat 18s ease-in-out infinite;
}

.apps-orb-1 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(41, 55, 99, 0.1) 0%, rgba(41, 55, 99, 0.05) 40%, transparent 70%);
  top: -150px;
  left: -100px;
  animation-delay: 0s;
}

.apps-orb-2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(58, 77, 140, 0.08) 0%, rgba(58, 77, 140, 0.04) 40%, transparent 70%);
  bottom: -100px;
  right: -80px;
  animation-delay: -6s;
}

.apps-orb-3 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(99, 117, 168, 0.08) 0%, transparent 60%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: appsOrbPulse 10s ease-in-out infinite;
}

@keyframes appsOrbFloat {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(25px, -25px) scale(1.03);
  }

  50% {
    transform: translate(-15px, 15px) scale(0.97);
  }

  75% {
    transform: translate(20px, 20px) scale(1.01);
  }
}

@keyframes appsOrbPulse {

  0%,
  100% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* Geometric Shapes */
.apps-shape {
  position: absolute;
  opacity: 0;
  animation: appsShapeFloat 15s ease-in-out infinite;
}

.apps-shape-1 {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(41, 55, 99, 0.2);
  border-radius: 8px;
  top: 20%;
  right: 10%;
  transform: rotate(45deg);
  animation-delay: 0s;
}

.apps-shape-2 {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(58, 77, 140, 0.18);
  border-radius: 50%;
  bottom: 25%;
  left: 8%;
  animation-delay: -5s;
}

.apps-shape-3 {
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 30px solid rgba(99, 117, 168, 0.12);
  top: 60%;
  right: 5%;
  animation-delay: -10s;
}

@keyframes appsShapeFloat {

  0%,
  100% {
    opacity: 0;
    transform: translateY(0) rotate(0deg);
  }

  15%,
  45% {
    opacity: 0.5;
    transform: translateY(-15px) rotate(90deg);
  }

  50% {
    opacity: 0.7;
    transform: translateY(-25px) rotate(135deg);
  }

  55%,
  85% {
    opacity: 0.4;
    transform: translateY(-10px) rotate(180deg);
  }
}

/* Floating Particles */
.apps-particle {
  position: absolute;
  border-radius: 50%;
  animation: appsParticleFloat 12s ease-in-out infinite;
}

.ap-1 {
  width: 8px;
  height: 8px;
  background: rgba(41, 55, 99, 0.4);
  top: 15%;
  left: 20%;
  animation-delay: 0s;
}

.ap-2 {
  width: 6px;
  height: 6px;
  background: rgba(58, 77, 140, 0.35);
  top: 40%;
  right: 15%;
  animation-delay: -3s;
}

.ap-3 {
  width: 7px;
  height: 7px;
  background: rgba(99, 117, 168, 0.4);
  bottom: 30%;
  left: 12%;
  animation-delay: -6s;
}

.ap-4 {
  width: 5px;
  height: 5px;
  background: rgba(41, 55, 99, 0.3);
  bottom: 20%;
  right: 25%;
  animation-delay: -9s;
}

@keyframes appsParticleFloat {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }

  25% {
    transform: translate(20px, -30px) scale(1.3);
    opacity: 0.8;
  }

  50% {
    transform: translate(-15px, -50px) scale(0.9);
    opacity: 0.6;
  }

  75% {
    transform: translate(15px, -25px) scale(1.1);
    opacity: 0.7;
  }
}

/* Hide decorative elements on mobile */
@media (max-width: 768px) {

  .apps-shape,
  .apps-particle {
    display: none;
  }

  .apps-orb-1,
  .apps-orb-2 {
    opacity: 0.5;
  }
}

.apps-container {
  max-width: 1200px;
  margin: 0 auto;
}

.apps-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.apps-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #34a853, #0f9d58);
  color: white;
  padding: 0.5rem 1.2rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
  box-shadow: 0 4px 15px rgba(52, 168, 83, 0.3);
}

.apps-badge i {
  font-size: 1rem;
}

.apps-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #1a2744;
  margin: 0 0 1rem 0;
}

.apps-accent {
  background: linear-gradient(135deg, #233075, #3a4db8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.apps-subtitle {
  font-size: 1.1rem;
  color: #5a6a8a;
  max-width: 550px;
  margin: 0 auto;
}

.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* App Card */
.app-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  border: 1px solid rgba(35, 48, 117, 0.08);
}

.app-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(35, 48, 117, 0.15);
}

.app-card.coming-soon {
  opacity: 0.85;
}

.coming-soon-ribbon {
  position: absolute;
  top: 12px;
  left: -8px;
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 16px 6px 12px;
  border-radius: 0 8px 8px 0;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

.app-image {
  position: relative;
  height: 180px;
  background: linear-gradient(135deg, #e8eef9, #f5f7fc);
  overflow: hidden;
}

.app-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.app-card:hover .app-image img {
  transform: scale(1.08);
}

.app-store-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #34a853, #0f9d58);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1rem;
  box-shadow: 0 4px 15px rgba(52, 168, 83, 0.4);
}

.app-store-badge.coming {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.app-content {
  padding: 1.5rem;
}

.app-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a2744;
  margin: 0 0 0.6rem 0;
}

.app-desc {
  font-size: 0.9rem;
  color: #5a6a8a;
  line-height: 1.5;
  margin: 0 0 1rem 0;
}

.app-rating {
  margin-bottom: 1.2rem;
}

.app-rating .stars {
  color: #f59e0b;
  font-size: 0.9rem;
  margin-right: 0.5rem;
}

.app-rating .rating-text {
  color: #7a8aa8;
  font-size: 0.8rem;
}

.coming-soon-text {
  color: #f59e0b;
  font-weight: 600;
  font-size: 0.85rem;
}

.app-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.9rem 1rem;
  background: linear-gradient(135deg, #233075, #3a4db8);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.app-download-btn:hover {
  background: linear-gradient(135deg, #1a2358, #2d3d94);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(35, 48, 117, 0.3);
}

.app-download-btn.disabled {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  cursor: not-allowed;
}

.app-download-btn.disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Launch Soon / Early Access Styles */
.app-card.launching-soon {
  position: relative;
  border: 2px solid #2A3863;
}

.launch-ribbon {
  position: absolute;
  top: 12px;
  left: -8px;
  background: linear-gradient(135deg, #2A3863, #3a4db8);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 16px 6px 12px;
  border-radius: 0 8px 8px 0;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(42, 56, 99, 0.3);
}

.launch-ribbon::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  border: 4px solid transparent;
  border-top-color: #1e2a4a;
  border-right-color: #1e2a4a;
}

.early-access-badge {
  display: inline-block;
  background: linear-gradient(135deg, #e8ecf5, #d4dced);
  color: #2A3863;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid #b8c4dc;
}

.app-download-btn.early-access {
  background: linear-gradient(135deg, #2A3863, #3a4db8);
}

.app-download-btn.early-access:hover {
  background: linear-gradient(135deg, #1e2a4a, #2A3863);
  box-shadow: 0 6px 20px rgba(42, 56, 99, 0.3);
}

.playstore-note {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 8px;
}

.coming-soon-text {
  display: inline-block;
  color: #6b7280;
  font-size: 0.85rem;
  font-weight: 600;
}

/* ===================================================
   DESKTOP SOFTWARE HERO SECTION (LIGHT THEME)
   Unique Split-Layout Design
   =================================================== */

.software-hero-section {
  position: relative;
  padding: 6rem 1.5rem;
  background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 20%, #e8f0ff 40%, #ffffff 60%, #f5f8ff 80%, #ffffff 100%);
  overflow: hidden;
}

/* Premium Gradient Overlay with Animation */
.software-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(41, 55, 99, 0.06) 0%, transparent 50%),
    linear-gradient(240deg, rgba(58, 77, 140, 0.05) 0%, transparent 50%),
    linear-gradient(0deg, rgba(41, 55, 99, 0.03) 0%, transparent 30%);
  animation: gradientShift 12s ease-in-out infinite;
}

@keyframes gradientShift {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.02);
  }
}

/* Shimmer Animation */
@keyframes shimmerEffect {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* Decorative Elements */
.soft-decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Animated Gradient Orbs */
.soft-circle {
  position: absolute;
  border-radius: 50%;
  animation: orbFloat 20s ease-in-out infinite;
}

.soft-c1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(41, 55, 99, 0.12) 0%, rgba(58, 77, 140, 0.08) 40%, transparent 70%);
  top: -200px;
  right: -150px;
  animation-delay: 0s;
}

.soft-c2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(99, 117, 168, 0.1) 0%, rgba(41, 55, 99, 0.06) 40%, transparent 70%);
  bottom: -150px;
  left: -100px;
  animation-delay: -7s;
}

/* Additional Creative Orbs */
.soft-decorations::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41, 55, 99, 0.1) 0%, transparent 60%);
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  animation: orbPulse 8s ease-in-out infinite;
}

.soft-decorations::after {
  content: '';
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58, 77, 140, 0.08) 0%, transparent 60%);
  top: 20%;
  left: 10%;
  animation: orbFloat 15s ease-in-out infinite reverse;
}

@keyframes orbFloat {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(20px, -30px) scale(1.05);
  }

  50% {
    transform: translate(-15px, 20px) scale(0.95);
  }

  75% {
    transform: translate(25px, 15px) scale(1.02);
  }
}

@keyframes orbPulse {

  0%,
  100% {
    opacity: 0.5;
    transform: translateX(-50%) scale(1);
  }

  50% {
    opacity: 0.8;
    transform: translateX(-50%) scale(1.1);
  }
}

/* Geometric Accent Lines */
.soft-wave {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.soft-wave::before {
  content: '';
  position: absolute;
  top: 10%;
  left: -10%;
  width: 120%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(41, 55, 99, 0.15), rgba(58, 77, 140, 0.1), transparent);
  transform: rotate(-5deg);
}

.soft-wave::after {
  content: '';
  position: absolute;
  bottom: 15%;
  right: -10%;
  width: 120%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(41, 55, 99, 0.12), rgba(58, 77, 140, 0.08), transparent);
  transform: rotate(3deg);
}

/* Floating Geometric Shapes */
.software-hero-section .soft-decorations .geo-shape {
  position: absolute;
  border: 2px solid;
  opacity: 0.15;
  animation: geoFloat 12s ease-in-out infinite;
}

/* Dot Pattern Overlay */
.software-hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(41, 55, 99, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

@keyframes geoFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.15;
  }

  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 0.25;
  }
}

.software-hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 10;
}

/* Left Content */
.software-hero-content {
  position: relative;
}

.software-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, rgba(41, 55, 99, 0.1), rgba(58, 77, 140, 0.1));
  border: 1px solid rgba(41, 55, 99, 0.2);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
}

.software-label .label-icon {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #293763, #3a4d8c);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.75rem;
}

.software-label .label-text {
  color: #293763;
  font-weight: 600;
  font-size: 0.85rem;
}

.software-hero-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #1a2744;
  margin: 0 0 1rem 0;
  line-height: 1.1;
}

.title-highlight {
  background: linear-gradient(135deg, #293763, #3a4d8c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.software-hero-desc {
  font-size: 1.1rem;
  color: #5a6a8a;
  line-height: 1.7;
  margin: 0 0 2rem 0;
}

/* Feature Pills - Enhanced */
.software-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.software-pills .pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(41, 55, 99, 0.15);
  padding: 0.65rem 1.1rem;
  border-radius: 50px;
  font-size: 0.85rem;
  color: #4b5563;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(41, 55, 99, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.software-pills .pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(41, 55, 99, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.software-pills .pill:hover {
  border-color: #293763;
  color: #293763;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(41, 55, 99, 0.2);
}

.software-pills .pill:hover::before {
  opacity: 1;
}

.software-pills .pill i {
  color: #293763;
  font-size: 0.9rem;
  position: relative;
  z-index: 1;
}

.software-pills .pill span {
  position: relative;
  z-index: 1;
}

/* Stats Row - Enhanced with Glow */
.software-stats-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 1.75rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(41, 55, 99, 0.1);
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(41, 55, 99, 0.08);
}

.soft-stat {
  text-align: center;
}

.soft-stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #1a2744;
}

.soft-stat-label {
  font-size: 0.8rem;
  color: #7a8aa8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: #e5e7eb;
}

/* Download CTA - Premium Enhancement */
.software-cta-area {
  margin-bottom: 1.5rem;
}

.software-download-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, #293763 0%, #3a4d8c 50%, #293763 100%);
  background-size: 200% 200%;
  color: white;
  padding: 1.1rem 1.75rem;
  border-radius: 18px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 10px 35px rgba(41, 55, 99, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}

.software-download-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.software-download-cta:hover::before {
  left: 100%;
}

.software-download-cta:hover {
  background-position: 100% 100%;
  transform: translateY(-4px);
  box-shadow:
    0 20px 50px rgba(41, 55, 99, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.software-download-cta .cta-icon {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  position: relative;
  z-index: 1;
}

.software-download-cta .cta-text {
  flex: 1;
  position: relative;
  z-index: 1;
}

.software-download-cta .cta-main {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
}

.software-download-cta .cta-sub {
  font-size: 0.82rem;
  opacity: 0.9;
}

.software-download-cta .cta-arrow {
  font-size: 1.3rem;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

.software-download-cta:hover .cta-arrow {
  transform: translateX(6px);
}

/* Trust Badges */
.software-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.software-trust-badges .trust-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #6b7280;
}

.software-trust-badges .trust-badge i {
  color: #22c55e;
}

/* Requirements Mini */
.software-requirements-mini {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.software-requirements-mini .req-title {
  color: #4b5563;
  font-weight: 600;
  font-size: 0.85rem;
}

.software-requirements-mini .req-title i {
  margin-right: 0.4rem;
  color: #6366f1;
}

.software-requirements-mini .req-info {
  color: #6b7280;
  font-size: 0.85rem;
}

/* Right Visual */
.software-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.software-mockup-wrapper {
  position: relative;
}

.mockup-glow {
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
  border-radius: 30px;
  filter: blur(40px);
}

.software-mockup {
  position: relative;
  background: #1a1a2e;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 450px;
}

.mockup-header {
  background: linear-gradient(135deg, #2d2d44, #1a1a2e);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mockup-dots {
  display: flex;
  gap: 6px;
}

.mockup-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.mockup-dots span:nth-child(1) {
  background: #ef4444;
}

.mockup-dots span:nth-child(2) {
  background: #f59e0b;
}

.mockup-dots span:nth-child(3) {
  background: #22c55e;
}

.mockup-title {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  font-weight: 500;
}

.mockup-screen {
  padding: 0;
}

.mockup-screen img {
  width: 100%;
  height: auto;
  display: block;
}

/* Floating Elements */
.float-element {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #ffffff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  color: #6366f1;
  font-size: 1.2rem;
  animation: floatBounce 4s ease-in-out infinite;
}

.fe-1 {
  top: 10%;
  left: -30px;
  animation-delay: 0s;
}

.fe-2 {
  bottom: 20%;
  right: -30px;
  animation-delay: -1.5s;
}

.fe-3 {
  top: 60%;
  left: -40px;
  animation-delay: -3s;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #d97706;
}

@keyframes floatBounce {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-12px) rotate(5deg);
  }
}

/* Responsive for Software Hero */
@media (max-width: 1024px) {
  .software-hero-container {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }

  .software-hero-content {
    order: 1;
  }

  .software-hero-visual {
    order: 0;
  }

  .software-pills {
    justify-content: center;
  }

  .software-stats-row {
    justify-content: center;
  }

  .software-download-cta {
    justify-content: center;
  }

  .software-trust-badges {
    justify-content: center;
  }

  .software-requirements-mini {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .software-hero-section {
    padding: 3rem 1rem;
  }

  .software-hero-title {
    font-size: 2rem;
  }

  .software-stats-row {
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .stat-divider {
    display: none;
  }

  .software-mockup {
    max-width: 100%;
  }

  .float-element {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .fe-1,
  .fe-3 {
    left: 0;
  }

  .fe-2 {
    right: 0;
  }
}

@media (max-width: 480px) {
  .apps-grid {
    grid-template-columns: 1fr;
  }

  .software-pills .pill {
    font-size: 0.75rem;
    padding: 0.5rem 0.8rem;
  }

  .software-download-cta {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .software-download-cta .cta-arrow {
    display: none;
  }

  .software-trust-badges {
    flex-direction: column;
    align-items: center;
  }

  .float-element {
    display: none;
  }
}

/* ===================================================
   GEOMETRIC SHAPES & PARTICLES
   Creative Engaging Elements
   =================================================== */

/* Geometric Shapes */
.geo-shape {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  animation: geoAppear 20s ease-in-out infinite;
}

.geo-square {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(99, 102, 241, 0.2);
  top: 15%;
  left: 8%;
  transform: rotate(45deg);
  animation-delay: 0s;
}

.geo-triangle {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 26px solid rgba(236, 72, 153, 0.15);
  top: 25%;
  right: 12%;
  animation-delay: -5s;
}

.geo-circle {
  width: 25px;
  height: 25px;
  border: 2px solid rgba(34, 211, 238, 0.2);
  border-radius: 50%;
  bottom: 30%;
  left: 5%;
  animation-delay: -10s;
}

.geo-diamond {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(251, 146, 60, 0.2);
  transform: rotate(45deg);
  bottom: 20%;
  right: 8%;
  animation-delay: -15s;
}

@keyframes geoAppear {

  0%,
  100% {
    opacity: 0;
    transform: translateY(0) rotate(45deg) scale(0.8);
  }

  10%,
  40% {
    opacity: 0.4;
    transform: translateY(-20px) rotate(90deg) scale(1);
  }

  50% {
    opacity: 0.6;
    transform: translateY(-30px) rotate(135deg) scale(1.1);
  }

  60%,
  90% {
    opacity: 0.3;
    transform: translateY(-15px) rotate(180deg) scale(0.9);
  }
}

/* Floating Particles */
.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  animation: particleFloat 15s ease-in-out infinite;
}

.p1 {
  background: rgba(41, 55, 99, 0.4);
  top: 20%;
  left: 15%;
  animation-delay: 0s;
}

.p2 {
  background: rgba(58, 77, 140, 0.35);
  top: 35%;
  right: 20%;
  width: 8px;
  height: 8px;
  animation-delay: -3s;
}

.p3 {
  background: rgba(99, 117, 168, 0.4);
  bottom: 40%;
  left: 25%;
  width: 5px;
  height: 5px;
  animation-delay: -6s;
}

.p4 {
  background: rgba(41, 55, 99, 0.3);
  bottom: 25%;
  right: 15%;
  width: 7px;
  height: 7px;
  animation-delay: -9s;
}

.p5 {
  background: rgba(58, 77, 140, 0.4);
  top: 50%;
  left: 8%;
  width: 4px;
  height: 4px;
  animation-delay: -12s;
}

@keyframes particleFloat {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }

  25% {
    transform: translate(30px, -40px) scale(1.2);
    opacity: 0.7;
  }

  50% {
    transform: translate(-20px, -60px) scale(0.8);
    opacity: 0.5;
  }

  75% {
    transform: translate(25px, -30px) scale(1.1);
    opacity: 0.6;
  }
}

/* Hide decorative elements on mobile */
@media (max-width: 768px) {

  .geo-shape,
  .particle {
    display: none;
  }
}

/* ===================================================
   ARDUINO CODE LAB SECTION STYLES
   Impressive & Creative Design
   Scoped under #blockly to avoid dashboard.css conflicts
   =================================================== */

#blockly.code-lab-section {
  position: relative;
  padding: 6rem 1.5rem;
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f4f8 50%, #f5fff5 100%);
  overflow: hidden;
}

/* Background Elements */
#blockly .code-lab-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Animated Orbs */
#blockly .code-orb {
  position: absolute;
  border-radius: 50%;
  animation: codeOrbFloat 20s ease-in-out infinite;
}

#blockly .code-orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(41, 55, 99, 0.15) 0%, transparent 60%);
  top: -200px;
  left: -150px;
  animation-delay: 0s;
}

#blockly .code-orb-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(72, 187, 120, 0.12) 0%, transparent 60%);
  bottom: -150px;
  right: -100px;
  animation-delay: -7s;
}

#blockly .code-orb-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(246, 173, 85, 0.1) 0%, transparent 60%);
  top: 30%;
  left: 50%;
  animation-delay: -14s;
}

@keyframes codeOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -20px) scale(1.05); }
  50% { transform: translate(-20px, 30px) scale(0.95); }
  75% { transform: translate(20px, 20px) scale(1.02); }
}

/* Particles */
#blockly .code-particles {
  position: absolute;
  inset: 0;
}

#blockly .code-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(41, 55, 99, 0.6);
  animation: codeParticle 10s linear infinite;
}

#blockly .cp-1 { top: 20%; left: 10%; animation-delay: 0s; }
#blockly .cp-2 { top: 60%; left: 80%; animation-delay: -2.5s; width: 6px; height: 6px; }
#blockly .cp-3 { top: 80%; left: 30%; animation-delay: -5s; }
#blockly .cp-4 { top: 30%; left: 70%; animation-delay: -7.5s; width: 5px; height: 5px; }

@keyframes codeParticle {
  0% { opacity: 0; transform: translateY(0) scale(0); }
  20% { opacity: 1; transform: translateY(-20px) scale(1); }
  80% { opacity: 1; transform: translateY(-80px) scale(1); }
  100% { opacity: 0; transform: translateY(-100px) scale(0); }
}

/* Floating Code Blocks */
#blockly .floating-block {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(41, 55, 99, 0.08);
  backdrop-filter: blur(10px);
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(41, 55, 99, 0.15);
  animation: floatBlock 8s ease-in-out infinite;
  z-index: 5;
}

#blockly .floating-block .block-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

#blockly .floating-block .block-text {
  color: #293763;
  font-size: 0.85rem;
  font-weight: 500;
}

#blockly .fb-1 { top: 15%; left: 5%; animation-delay: 0s; }
#blockly .fb-2 { top: 25%; right: 8%; animation-delay: -2.5s; }
#blockly .fb-3 { bottom: 20%; left: 3%; animation-delay: -5s; }

@keyframes floatBlock {
  0%, 100% { transform: translateY(0) rotate(-2deg); opacity: 0.7; }
  50% { transform: translateY(-15px) rotate(2deg); opacity: 1; }
}

/* Container */
#blockly .code-lab-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  display: block;
  gap: unset;
  align-items: unset;
}

/* Header */
#blockly .code-lab-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

#blockly .code-lab-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(41, 55, 99, 0.1), rgba(72, 187, 120, 0.1));
  border: 1px solid rgba(41, 55, 99, 0.2);
  color: #293763;
  padding: 0.5rem 1.2rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}

#blockly .code-lab-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #1a2744;
  margin: 0 0 1rem 0;
}

#blockly .gradient-accent {
  background: linear-gradient(135deg, #293763, #48bb78);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#blockly .code-lab-subtitle {
  font-size: 1.15rem;
  color: #5a6a8a;
  max-width: 600px;
  margin: 0 auto;
}

/* Main Grid */
#blockly .code-lab-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem;
  align-items: start;
}

/* Features */
#blockly .code-lab-features {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: unset;
}

#blockly .feature-block {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(41, 55, 99, 0.1);
  box-shadow: 0 8px 30px rgba(41, 55, 99, 0.1);
  transition: all 0.3s ease;
}

#blockly .feature-block:hover {
  background: rgba(41, 55, 99, 0.05);
  border-color: #293763;
  box-shadow: 0 12px 40px rgba(41, 55, 99, 0.15);
  transform: translateX(8px);
}

#blockly .feature-block .feature-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #293763, #3a4d8c);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  flex-shrink: 0;
}

#blockly .feature-block .feature-info h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #1a2744;
  margin: 0 0 0.3rem 0;
}

#blockly .feature-block .feature-info p {
  font-size: 0.85rem;
  color: #5a6a8a;
  margin: 0;
  line-height: 1.4;
}

/* CTA Buttons */
#blockly .code-lab-cta {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

#blockly .btn-code-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, #293763, #3a4d8c);
  color: white;
  padding: 1rem 1.8rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 30px rgba(41, 55, 99, 0.3);
}

#blockly .btn-code-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(41, 55, 99, 0.4);
}

#blockly .btn-code-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  color: #293763;
  padding: 1rem 1.8rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid rgba(41, 55, 99, 0.3);
  transition: all 0.3s ease;
}

#blockly .btn-code-secondary:hover {
  background: rgba(41, 55, 99, 0.08);
  border-color: #293763;
}

/* Preview Window */
#blockly .code-lab-preview {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: unset;
}

#blockly .preview-window {
  background: #1e1e2e;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#blockly .preview-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  background: #252536;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#blockly .preview-dots {
  display: flex;
  gap: 6px;
}

#blockly .preview-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

#blockly .preview-dots .dot.red { background: #ef4444; }
#blockly .preview-dots .dot.yellow { background: #f59e0b; }
#blockly .preview-dots .dot.green { background: #22c55e; }

#blockly .preview-title {
  flex: 1;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  font-weight: 500;
}

#blockly .preview-content {
  display: flex;
  min-height: 280px;
}

#blockly .preview-sidebar {
  width: 100px;
  background: #1a1a28;
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

#blockly .block-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s;
}

#blockly .block-category i { font-size: 1rem; }

#blockly .block-category.active {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

#blockly .preview-workspace {
  flex: 1;
  padding: 1.5rem;
  background: linear-gradient(135deg, #1e1e2e 0%, #252536 100%);
}

#blockly .code-block-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#blockly .code-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  color: white;
  font-weight: 500;
  width: auto;
  margin-bottom: 0;
  box-shadow: none;
}

#blockly .code-block .cb-icon {
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

#blockly .code-block .cb-value {
  background: rgba(255, 255, 255, 0.15);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

#blockly .code-block.cb-start { background: linear-gradient(135deg, #22c55e, #16a34a); }
#blockly .code-block.cb-motion { background: linear-gradient(135deg, #4C97FF, #3b82f6); }
#blockly .code-block.cb-control { background: linear-gradient(135deg, #FFAB19, #f59e0b); }
#blockly .code-block.nested { margin-left: 20px; }

#blockly .preview-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.2rem;
  background: #252536;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

#blockly .footer-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
}

#blockly .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: blocklyPulse 2s infinite;
  box-shadow: none;
}

#blockly .status-dot.online { background: #22c55e; }

@keyframes blocklyPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

#blockly .footer-actions {
  display: flex;
  gap: 0.5rem;
}

#blockly .action-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s;
}

#blockly .action-btn.run { background: #22c55e; color: white; }
#blockly .action-btn.upload { background: #293763; color: white; }
#blockly .action-btn:hover { transform: scale(1.05); }

/* Stats */
#blockly .code-lab-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

#blockly .stat-card {
  background: #ffffff;
  border: 1px solid rgba(41, 55, 99, 0.1);
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(41, 55, 99, 0.08);
  flex: unset;
}

#blockly .stat-card:hover {
  background: rgba(41, 55, 99, 0.05);
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(41, 55, 99, 0.15);
}

#blockly .stat-card .stat-icon {
  display: block;
  font-size: 1.5rem;
  color: #293763;
  margin-bottom: 0.5rem;
}

#blockly .stat-card .stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #1a2744;
}

#blockly .stat-card .stat-label {
  font-size: 0.75rem;
  color: #5a6a8a;
  text-transform: uppercase;
}

/* Trust Strip */
#blockly .code-lab-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(41, 55, 99, 0.1);
}

#blockly .code-lab-trust .trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #5a6a8a;
  font-size: 0.9rem;
}

#blockly .code-lab-trust .trust-item i { color: #22c55e; }

/* Responsive */
@media (max-width: 1024px) {
  #blockly .code-lab-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  #blockly .code-lab-features { order: 1; }
  #blockly .code-lab-preview { order: 0; }
}

@media (max-width: 768px) {
  #blockly.code-lab-section { padding: 4rem 1rem; }
  #blockly .floating-block { display: none; }
  #blockly .preview-sidebar { display: none; }
  #blockly .code-lab-cta { justify-content: center; }
  #blockly .code-lab-stats { grid-template-columns: 1fr; }
  #blockly .code-lab-trust { flex-direction: column; align-items: center; gap: 1rem; }
}

@media (max-width: 480px) {
  #blockly .preview-content { min-height: 200px; }
  #blockly .code-block { font-size: 0.75rem; padding: 8px 10px; }
  #blockly .btn-code-primary,
  #blockly .btn-code-secondary { width: 100%; justify-content: center; }
}





/* ===================================================
   TEAM LEADERSHIP SECTION - PHOTO CARDS
   Beautiful Card Design with Photos
   =================================================== */

.team-leadership {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(41, 55, 99, 0.1);
}

.team-leadership-header {
  text-align: center;
  margin-bottom: 3rem;
}

.team-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(41, 55, 99, 0.1), rgba(58, 77, 140, 0.1));
  border: 1px solid rgba(41, 55, 99, 0.2);
  color: #293763;
  padding: 0.5rem 1.2rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.team-leadership-header h3 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #1a2744;
  margin: 0 0 0.5rem 0;
}

.team-leadership-header p {
  font-size: 1.1rem;
  color: #5a6a8a;
  margin: 0;
}

/* Team Grid - 3 cards first row, 2 centered second row */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* All cards equal width - WIDER CARDS */
.team-member {
  flex: 0 0 calc(33.333% - 1.5rem);
  max-width: 360px;
  min-width: 300px;
  background: linear-gradient(145deg, #ffffff 0%, #f8faff 50%, #f0f4ff 100%);
  border-radius: 24px;
  border: 1px solid rgba(41, 55, 99, 0.12);
  box-shadow:
    0 10px 40px rgba(41, 55, 99, 0.1),
    0 2px 10px rgba(41, 55, 99, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Card decorative background elements */
.team-member::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(41, 55, 99, 0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.team-member::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #293763, #3a4d8c, #4a5d9c, #3a4d8c, #293763);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.team-member:hover::after {
  opacity: 1;
}

.team-member:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow:
    0 25px 70px rgba(41, 55, 99, 0.18),
    0 10px 30px rgba(41, 55, 99, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(41, 55, 99, 0.25);
  background: linear-gradient(145deg, #ffffff 0%, #f5f8ff 50%, #eef3ff 100%);
}

/* Photo Wrapper */
.team-photo-wrapper {
  position: relative;
  width: 100%;
  height: 240px;
  border-radius: 17px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8f0ff 0%, #f0f4ff 50%, #e8f4f8 100%);
}

/* Decorative corner accent */
.team-photo-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(41, 55, 99, 0.1) 0%, transparent 70%);
  z-index: 2;
  pointer-events: none;
}

.team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.4s ease;
  position: relative;
  z-index: 1;
}

.team-member:hover .team-photo {
  transform: scale(1.1);
  filter: brightness(1.05);
}

/* Photo Overlay on Hover - Enhanced gradient */
.team-photo-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      transparent 0%,
      transparent 30%,
      rgba(41, 55, 99, 0.4) 70%,
      rgba(41, 55, 99, 0.85) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 3;
}

.team-member:hover .team-photo-wrapper::after {
  opacity: 1;
}

/* Founder Badge */
.founder-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
  z-index: 10;
  animation: crownPulse 2s ease-in-out infinite;
}

@keyframes crownPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

/* Founder Card Special Styling */
.team-member.founder {
  border: 2px solid rgba(245, 158, 11, 0.3);
  background: linear-gradient(145deg, #fffdfb 0%, #fffbf5 50%, #fff8ed 100%);
  box-shadow:
    0 10px 40px rgba(245, 158, 11, 0.12),
    0 2px 10px rgba(41, 55, 99, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.team-member.founder:hover {
  box-shadow:
    0 25px 70px rgba(245, 158, 11, 0.2),
    0 10px 30px rgba(41, 55, 99, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  border-color: rgba(245, 158, 11, 0.5);
}

.team-member.founder::after {
  background: linear-gradient(90deg, #f59e0b, #d97706, #eab308, #d97706, #f59e0b);
}

.team-member.founder .team-role {
  color: #d97706;
  background: linear-gradient(90deg, #d97706, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Team Info - Enhanced */
.team-info {
  padding: 1.5rem 1.25rem;
  text-align: center;
  position: relative;
  background: linear-gradient(180deg, transparent 0%, rgba(248, 250, 255, 0.5) 100%);
}

/* Decorative top line */
.team-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(41, 55, 99, 0.15), transparent);
  border-radius: 2px;
}

.team-info h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a2744;
  margin: 0.5rem 0 0.35rem 0;
  letter-spacing: -0.02em;
}

.team-role {
  font-size: 0.8rem;
  font-weight: 600;
  color: #293763;
  margin: 0 0 0.75rem 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: rgba(41, 55, 99, 0.06);
  border-radius: 12px;
}

.team-description {
  font-size: 0.85rem;
  color: #5a6a8a;
  line-height: 1.5;
  margin: 0 0 1rem 0;
}

/* Social Links - Enhanced */
.team-social {
  display: flex;
  justify-content: center;
  gap: 0.875rem;
}

.team-social a {
  width: 40px;
  height: 40px;
  background: linear-gradient(145deg, #ffffff, #f5f8ff);
  border: 1px solid rgba(41, 55, 99, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #293763;
  font-size: 0.95rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(41, 55, 99, 0.06);
}

.team-social a:hover {
  background: linear-gradient(135deg, #293763, #3a4d8c);
  border-color: transparent;
  color: white;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 20px rgba(41, 55, 99, 0.3);
}

/* Responsive */
@media (max-width: 1200px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 900px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .team-photo-wrapper {
    height: 180px;
  }

  .team-info {
    padding: 1rem;
  }

  .team-info h4 {
    font-size: 1rem;
  }

  .team-role {
    font-size: 0.75rem;
  }

  .team-description {
    font-size: 0.8rem;
  }
}

@media (max-width: 600px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .team-photo-wrapper {
    height: 150px;
  }

  .team-info {
    padding: 0.75rem;
  }

  .team-info h4 {
    font-size: 0.9rem;
  }

  .team-description {
    display: none;
  }

  .team-social a {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }
}

@media (max-width: 400px) {
  .team-grid {
    grid-template-columns: 1fr;
    max-width: 280px;
    margin: 0 auto;
  }

  .team-photo-wrapper {
    height: 200px;
  }

  .team-description {
    display: block;
  }
}

/* ===================================================
   MODERN ENGAGING FOOTER STYLES
   =================================================== */

.modern-footer {
  position: relative;
  background: #283661;
  color: #fff;
  padding: 6rem 1.5rem 0;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  margin-top: 5rem;
}

/* Glowing Orbs */
.footer-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 0;
  opacity: 0.15;
  pointer-events: none;
}

.footer-glow-1 {
  width: 400px;
  height: 400px;
  background: #4C97FF;
  top: -100px;
  left: -100px;
}

.footer-glow-2 {
  width: 500px;
  height: 500px;
  background: #22c55e;
  bottom: -200px;
  right: -100px;
}

.footer-content-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand-col .footer-logo {
  max-width: 180px;
  margin-bottom: 1.5rem;
  filter: brightness(0) invert(1); /* makes dark logo white */
}

.footer-desc {
  color: #a0aabf;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 350px;
}

.footer-socials {
  display: flex;
  gap: 1rem;
}

.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 1.1rem;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.footer-socials a:hover {
  background: #4C97FF;
  border-color: #4C97FF;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(76, 151, 255, 0.4);
}

.footer-links-col h4,
.footer-contact-col h4 {
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
}

.footer-links-col h4::after,
.footer-contact-col h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 30px;
  height: 2px;
  background: #22c55e;
  border-radius: 2px;
}

.footer-links-col ul,
.footer-contact-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer-links-col a,
.footer-contact-col li {
  color: #a0aabf;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.footer-links-col a:hover {
  color: #4C97FF;
  transform: translateX(5px);
}

.footer-contact-col li i {
  color: #22c55e;
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

.footer-bottom {
  position: relative;
  z-index: 1;
  padding: 1.5rem 0;
  background: rgba(0, 0, 0, 0.2);
}

.footer-bottom-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom-flex p {
  color: #7a8ba3;
  margin: 0;
  font-size: 0.9rem;
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
}

.footer-legal a {
  color: #7a8ba3;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.footer-legal a:hover {
  color: #fff;
}

@media (max-width: 1024px) {
  .footer-content-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .footer-content-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .footer-bottom-flex {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
}

/* Creative Ticket Style Banner */
.promo-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 27, 43, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  align-items: center;
}