/* Typography helpers */
.section-title {
  font-size: 2.25rem; /* text-4xl */
  font-weight: 800;   /* font-extrabold */
  color: #1c1127;     /* text-gray-900 */
}
.section-subtitle {
  font-size: 1.125rem; /* text-lg */
  /* Responsive: md:text-xl */
  color: #4B5563;      /* text-gray-600 */
  max-width: 48rem;    /* max-w-3xl */
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .section-subtitle {
	font-size: 1.25rem; /* md:text-xl */
  }
}
.h3 {
  font-size: 1.5rem;   /* text-2xl */
  font-weight: 700;    /* font-bold */
  color: #1F2937;      /* text-gray-800 */
}
.h4 {
  font-size: 1.25rem;  /* text-xl */
  font-weight: 700;    /* font-bold */
  color: #1F2937;      /* text-gray-800 */
}
.h5 {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600;    /* font-semibold */
}
.copy {
  color: #4B5563;      /* text-gray-600 */
}

/* Buttons */
.btn-primary {
  background-color: #fff;         /* bg-white */
  color: #7C3AED;                 /* text-purple-700 */
  padding-left: 2rem;             /* px-8 */
  padding-right: 2rem;
  padding-top: 1rem;              /* py-4 */
  padding-bottom: 1rem;
  border-radius: 9999px;          /* rounded-full */
  font-weight: 600;               /* font-semibold */
  transition-property: background-color;
  transition-duration: 150ms;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06); /* shadow */
}
.btn-primary:hover {
  background-color: #F3F4F6;      /* hover:bg-gray-100 */
}
.btn-light {
  background-color: #fff;         /* bg-white */
  color: #7C3AED;                 /* text-purple-700 */
  padding-top: 0.75rem;           /* py-3 */
  padding-bottom: 0.75rem;
  padding-left: 1.5rem;           /* px-6 */
  padding-right: 1.5rem;
  border-radius: 0.5rem;          /* rounded-lg */
  font-weight: 600;               /* font-semibold */
  transition-property: background-color;
  transition-duration: 150ms;
}
.btn-light:hover {
  background-color: #F3F4F6;      /* hover:bg-gray-100 */
}

/* Layout helpers */
.section-padding { padding: 80px 0; }

/* Nav links */
.nav-link {
  color: #374151;                 /* text-gray-700 */
  transition-property: color;
  transition-duration: 150ms;
}
.nav-link:hover {
  color: #9333EA;                 /* hover:text-purple-600 */
}

/* Mobile menu transitions */
.mobile-menu { transform: translateX(-100%); transition: transform .3s ease; }
.mobile-menu.active { transform: translateX(0); }
.menu-icon { transition: transform .3s ease; }
.menu-icon.active .line1 { transform-box: fill-box; transform-origin: center; transform: rotate(-45deg) translate(-3px, 7px); }
.menu-icon.active .line2 { opacity: 0; }
.menu-icon.active .line3 { transform-box: fill-box; transform-origin: center; transform: rotate(45deg) translate(-3px, -7px); }

/* Cards */
.card {
  background-color: #fff;         /* bg-white */
  padding: 2rem;                  /* p-8 */
  border-radius: 1rem;            /* rounded-2xl */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); /* shadow-lg */
  transition-property: box-shadow;
  transition-duration: 150ms;
}
.card:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); /* hover:shadow-xl */
}
.card-icon {
  width: 4rem;                    /* w-16 */
  height: 4rem;                   /* h-16 */
  border-radius: 0.5rem;          /* rounded-lg */
  display: grid;                  /* grid */
  place-items: center;
  margin-bottom: 1.5rem;          /* mb-6 */
}
.card-title {
  font-size: 1.25rem;             /* text-xl */
  font-weight: 700;               /* font-bold */
  color: #1F2937;                 /* text-gray-800 */
  margin-bottom: 0.75rem;         /* mb-3 */
}
.video-card {
  transition: transform .3s ease, box-shadow .3s ease;
  background-color: #F3F4F6;      /* bg-gray-100 */
  border-radius: 1rem;            /* rounded-2xl */
  overflow: hidden;
}
.video-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,.1); }
.tag {
  color: #9333EA;                 /* text-purple-600 */
  font-weight: 600;               /* font-semibold */
}

/* Contact */
.label {
  display: block;                 /* block */
  font-size: 0.875rem;            /* text-sm */
  font-weight: 500;               /* font-medium */
  margin-bottom: 0.5rem;          /* mb-2 */
}
.input {
  width: 100%;                    /* w-full */
  padding-left: 1rem;             /* px-4 */
  padding-right: 1rem;
  padding-top: 0.75rem;           /* py-3 */
  padding-bottom: 0.75rem;
  border-radius: 0.5rem;          /* rounded-lg */
  border: 1px solid rgba(255,255,255,0.3); /* border-white/30 */
  color: #fff;                    /* text-white */
  background-color: rgba(255,255,255,0.2); /* bg-white/20 */
  font-size: 1rem;
}
.input::placeholder {
  color: rgba(255,255,255,0.7);   /* placeholder-white/70 */
}
.input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.5); /* focus:ring-2 focus:ring-white/50 */
}
.contact-row {
  display: flex;                  /* flex */
  align-items: center;            /* items-center */
  gap: 1rem;                      /* gap-4 */
}
.contact-icon {
  width: 3rem;                    /* w-12 */
  height: 3rem;                   /* h-12 */
  background-color: rgba(255,255,255,0.2); /* bg-white/20 */
  border-radius: 0.5rem;          /* rounded-lg */
  display: grid;                  /* grid */
  place-items: center;
}

/* Footer */
.footer-link {
  transition-property: color;
  transition-duration: 150ms;
}
.footer-link:hover {
  color: #fff;                    /* hover:text-white */
}
.social-btn {
  width: 2.5rem;                  /* w-10 */
  height: 2.5rem;                 /* h-10 */
  background-color: #1F2937;      /* bg-gray-800 */
  border-radius: 0.5rem;          /* rounded-lg */
  display: grid;                  /* grid */
  place-items: center;
  transition-property: background-color;
  transition-duration: 150ms;
}
.social-btn:hover {
  background-color: #9333EA;      /* hover:bg-purple-600 */
}

/* Accessibility & UX */
:focus-visible { outline: 2px solid #9333EA; outline-offset: 2px; }
html { scroll-behavior: smooth; }

/* Small utility polish */
.supports-\[backdrop-filter\]\:bg-white\/60 {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}