/*
=============================================================
TRILOGIX INSTITUTE WEBSITE
File: home.css
Purpose: Homepage layout and component styling.
Maintenance note: Related rules and logic are grouped and documented by feature.
=============================================================
*/

/*
STYLE ORGANIZATION
- Base/component rules define the default desktop presentation.
- State classes such as .active, .show, and :hover control interactions.
- Media queries near the relevant rules adapt the layout for tablet and mobile screens.
*/

:root {
  --primary: #003a92;
  --navy: #002b6b;
  --action: #0057b8;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e2e8f0;
  --surface: #fafafa;
  --hero: linear-gradient(135deg, #002b6b 0%, #003a92 60%, #0057b8 100%);
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.14);
}
* {
  box-sizing: border-box;
}
html,
body {
  overflow-x: hidden;
}
body {
  margin: 0;
  font-family: Inter, sans-serif;
  color: var(--text);
}
h1,
h2,
h3,
.brand-name {
  font-family: "Plus Jakarta Sans", sans-serif;
}
a {
  text-decoration: none;
}
.container-page {
  width: 100%;
  max-width: 80rem;
  margin: auto;
  padding-inline: 1.25rem;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
}
.header-inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: inherit;
}
.brand-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--hero);
  color: #fff;
}
.brand-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}
.brand-name {
  font-size: 1rem;
  font-weight: 700;
}
.brand-sub {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.desktop-nav {
  display: flex;
  gap: 0.25rem;
}
.desktop-nav a {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
}
.desktop-nav a:hover,
.desktop-nav .active {
  background: #f5f7fa;
  color: var(--text);
}
.header-actions {
  display: flex;
  gap: 0.5rem;
}
.advisor-link {
  padding: 0.5rem 0.75rem;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
}
.enroll-btn {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: var(--action);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}
.menu-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 7px;
  font-size: 1.25rem;
}
.mobile-menu {
  border-top: 1px solid var(--border);
  padding: 1rem 0 1.25rem;
}
.mobile-menu a {
  display: block;
  padding: 0.7rem 0.8rem;
  border-radius: 7px;
  color: var(--text);
  font-size: 0.9rem;
}
.mobile-menu .active {
  background: #f5f7fa;
}
.mobile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.mobile-actions a {
  white-space: nowrap;
}
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
}
.hero-bg {
  position: absolute;
  inset: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.hero-bg:after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero);
  opacity: 0.9;
}
.hero-inner {
  position: relative;
  padding: 5rem 0;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero h1 {
  margin: 1.25rem 0 0;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.05;
  font-weight: 800;
}
.hero h1 span {
  color: rgba(255, 255, 255, 0.7);
}
.hero p {
  max-width: 40rem;
  margin: 1.25rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.7;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.hero-actions a,
.cta-actions a {
  min-height: 46px;
  padding: 0.7rem 1.8rem;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
}
.btn-white {
  background: #fff;
  color: var(--primary);
}
.btn-outline-white {
  border: 2px solid rgba(255, 255, 255, 0.8);
  color: #fff;
}
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  margin-top: 2rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
}
.stat-card {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 1.25rem;
  backdrop-filter: blur(8px);
}
.stat-card strong {
  display: block;
  font-size: 1.5rem;
  margin-top: 0.7rem;
}
.stat-card span {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}
.metrics {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 2rem 0;
}
.metric {
  text-align: center;
}
.metric strong {
  display: block;
  color: var(--primary);
  font-size: 1.5rem;
}
.metric span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.section {
  padding: 5rem 0;
}
.section-soft {
  background: var(--surface);
  border-block: 1px solid var(--border);
}
.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--action);
}
.section-title {
  margin: 0.5rem 0 0;
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 800;
}
.section-subtitle {
  margin: 0.75rem 0 0;
  color: var(--muted);
}
.section-link {
  color: var(--action);
  font-size: 0.875rem;
  font-weight: 700;
}
.card-clean {
  height: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: 0.25s;
}
.card-clean:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.card-clean:hover .course-body h3{
  color:var(--action);
}
.course-img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.course-img img,
.campus-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.45s;
}
.card-clean:hover img {
  transform: scale(1.04);
}
.course-badge,
.level-badge {
  position: absolute;
  top: 0.75rem;
  padding: 0.3rem 0.55rem;
  font-size: 0.65rem;
  font-weight: 800;
}
.course-badge {
  left: 0.75rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--primary);
  border-radius: 6px;
}
.level-badge {
  right: 0.75rem;
  background: rgba(0, 43, 107, 0.82);
  color: #fff;
  border-radius: 999px;
}
.course-body {
  padding: 1.25rem;
}
.course-body h3 {
  font-size: 1.05rem;
  font-weight: 800;
}
.course-body p {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.tag {
  background: #f5f7fa;
  color: var(--muted);
  padding: 0.15rem 0.5rem;
  border-radius: 5px;
  font-size: 0.68rem;
}
.course-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.course-actions a {
  flex: 1;
  min-height: 32px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}
.mini-primary {
  background: var(--action);
  color: #fff;
}
.mini-outline {
  border: 1px solid var(--border);
  color: var(--text);
}
.campus-img {
  height: 225px;
}
.campus-body {
  padding: 1.5rem;
}
.campus-body h3 {
  font-size: 1.25rem;
  font-weight: 800;
}
.card-clean:hover .campus-body h3{
  color:var(--action);
}
.card-clean:hover .section-link{
  color:#003a92;
}
.campus-body p {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
}
.category-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.category-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  padding: 0.55rem 1rem;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--shadow);
}
.category-chip small {
  margin-left: 0.35rem;
  color: var(--muted);
  font-size: 0.62rem;
}
.category-chip{
  transition:.25s;
}
.category-chip:hover{
  background:var(--action);
  color:#fff;
}
.category-chip:hover small{
  color:#fff;
}
.why-card,
.testimonial-card {
  height: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.why-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(0, 58, 146, 0.1);
  color: var(--primary);
}
.why-card h3 {
  margin: 1rem 0 0.4rem;
  font-size: 1rem;
  font-weight: 800;
}
.why-card p,
.testimonial-card blockquote {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.65;
}
.stars {
  color: var(--action);
}
.testimonial-card figcaption {
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
}
.testimonial-card figcaption strong {
  display: block;
  font-size: 0.875rem;
}
.testimonial-card figcaption span {
  color: var(--muted);
  font-size: 0.75rem;
}
.cta {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--hero);
  color: #fff;
  padding: 2.5rem;
  box-shadow: var(--shadow-lg);
}
.cta:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image: radial-gradient(circle at 20% 20%, white 1px, transparent 1px);
  background-size: 32px 32px;
}
.cta-content {
  position: relative;
}
.cta h2 {
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  font-weight: 800;
}
.cta p {
  color: rgba(255, 255, 255, 0.8);
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.site-footer {
  background: #111840;
  color: #fff;
}
.footer-main {
  padding: 3.5rem 0;
}
.footer-brand p {
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  line-height: 1.7;
}
.site-footer h3 {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.9);
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer li {
  margin: 0.55rem 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  line-height: 1.5;
}
.site-footer a {
  color: inherit;
}
.contact-line {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
}
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (min-width: 768px) {
  .container-page {
    padding-inline: 2rem;
  }
.hero-inner {
  padding: 7rem 0;
}
.cta {
  padding: 4rem;
}
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (max-width: 991.98px) {
  .desktop-nav,
  .header-actions {
    display: none !important;
  }
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (min-width: 992px) {
  .menu-btn,
  .mobile-menu {
    display: none !important;
  }
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (max-width: 767.98px) {
  .container-page {
    padding-inline: 1.25rem !important;
  }
.hero-actions a,
.cta-actions a {
  width: 100%;
}
.footer-bottom {
  text-align: left !important;
}
}
/* Typography refinement — preserve layout, improve hierarchy and readability */
body {
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
.brand-name {
  letter-spacing: -0.02em;
}
.brand-name {
  font-weight: 700;
  line-height: 1.05;
}
.brand-sub {
  line-height: 1.2;
}
.desktop-nav a {
  font-size: 0.84rem;
  font-weight: 500;
}
.advisor-link,
.enroll-btn {
  font-size: 0.76rem;
  line-height: 1;
}
.hero-badge {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}
.hero h1 {
  font-size: clamp(2.65rem, 5.6vw, 4rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
}
.hero p {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.75;
  font-weight: 400;
}
.hero-actions a,
.cta-actions a {
  font-size: 0.95rem;
}
.hero-points {
  font-size: 0.76rem;
  line-height: 1.4;
}
.stat-card strong {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.55rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.stat-card span {
  font-size: 0.76rem;
}
.metric strong {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.55rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.metric span {
  font-size: 0.69rem;
  font-weight: 600;
}
.section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.section-title {
  font-size: clamp(1.95rem, 3.4vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.035em;
}
.section-subtitle {
  font-size: 0.98rem;
  line-height: 1.7;
}
.section-link {
  font-size: 0.85rem;
}
.course-body h3 {
  font-size: 1.03rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.course-body p {
  font-size: 0.86rem;
  line-height: 1.65;
}
.course-badge,
.level-badge {
  font-size: 0.62rem;
  letter-spacing: 0.03em;
}
.tag {
  font-size: 0.66rem;
}
.course-actions a {
  font-size: 0.74rem;
}
.campus-body h3 {
  font-size: 1.18rem;
  line-height: 1.35;
}
.campus-body p {
  font-size: 0.86rem;
  line-height: 1.7;
}
.category-chip {
  font-size: 0.84rem;
  line-height: 1.2;
}
.why-card h3 {
  font-size: 0.98rem;
  line-height: 1.35;
}
.why-card p,
.testimonial-card blockquote {
  font-size: 0.85rem;
  line-height: 1.7;
}
.testimonial-card figcaption strong {
  font-size: 0.86rem;
}
.testimonial-card figcaption span {
  font-size: 0.73rem;
}
.cta h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.35rem);
  line-height: 1.16;
  letter-spacing: -0.035em;
}
.cta p {
  font-size: 0.98rem;
  line-height: 1.65;
}
.site-footer h3 {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
}
.site-footer li,
.footer-brand p {
  font-size: 0.84rem;
}
.footer-bottom {
  font-size: 0.72rem;
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (max-width: 767.98px) {
  .hero h1 {
    font-size: clamp(2.35rem, 11vw, 3.2rem);
    line-height: 1.06;
  }
.hero p {
  font-size: 0.98rem;
}
.section-title {
  font-size: clamp(1.75rem, 8vw, 2.15rem);
}
.section-subtitle {
  font-size: 0.94rem;
}
}
/* Hero alignment fix — match the shared About/Courses page content line */

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (min-width: 768px) {
  .hero .hero-inner {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}
/* Final hero typography match — thinner weight + reference-style gradient */
.hero h1 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(2.55rem, 5.15vw, 3.75rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
}
.hero h1 span {
  color: transparent;
  background: linear-gradient(90deg, #d8e0ee 0%, #b9c7dd 52%, #9fb3d1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (max-width: 767.98px) {
  .hero h1 {
    font-size: clamp(2.3rem, 10.5vw, 3.05rem);
    line-height: 1.05;
  }
}
/* Final section-heading refinement — lighter like the reference */
.section-title {
  font-weight: 700;
}
/* Exact About navigation override */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  width: 100%;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(14px);
}
.site-header .container-page {
  min-height: 64px;
}
.brand-link {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.625rem;
  color: inherit;
}
.brand-mark {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 0.375rem;
  background: var(--hero-gradient);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.brand-mark.footer-mark {
  background: rgba(255,255,255,.10);
  box-shadow: none;
}
.brand-title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--foreground);
}
.brand-subtitle {
  display: block;
  margin-top: 2px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.main-nav .nav-link {
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  transition: color .2s ease, background-color .2s ease;
}
.main-nav .nav-link:hover,
.main-nav .nav-link.active {
  color: var(--foreground);
  background: var(--muted);
}
.btn-header-link,
.btn-header-primary {
  display: inline-flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  transition: .2s ease;
}
.btn-header-link {
  color: var(--foreground);
}
.btn-header-link:hover {
  background: var(--accent);
  color: var(--foreground);
}
.btn-header-primary {
  background: var(--action);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn-header-primary:hover {
  color: #fff;
  filter: brightness(1.1);
}
.navbar-toggler-custom {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--foreground);
  box-shadow: none !important;
}
.mobile-menu {
  border-top: 1px solid var(--border);
  background: var(--background);
}
.mobile-menu .nav-link {
  border-radius: 0.5rem;
  padding: 0.65rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--foreground);
}
.mobile-menu .nav-link:hover,
.mobile-menu .nav-link.active {
  background: var(--muted);
}
.mobile-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.mobile-action-grid a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.mobile-advisor {
  border: 1px solid var(--border);
  color: var(--foreground);
}
.mobile-enroll {
  background: var(--action);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
/* Final navigation state fix — exact About behavior */
.nav-link:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.nav-link.active,
.nav-link[aria-current="page"] {
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 500;
}
/* Final logo fix — same About icon treatment */
.brand-mark {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: .4375rem;
  background: linear-gradient(135deg, #142c8e, #2759d8);
  color: #fff;
  box-shadow: 0 6px 18px rgba(23,70,200,.22);
}
.brand-mark i {
  display: block;
  font-size: 1rem;
  line-height: 1;
}
/* Prevent any old Home logo image rule from affecting the header */
.site-header .brand-logo-img {
  display: none !important;
}
/* Exact navigation styling based on Products.html */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(226,232,240,.8)}
.header-inner{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.625rem;color:inherit;text-decoration:none;min-width:0}
.brand-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:7px;background:linear-gradient(135deg,#142c8e,#2759d8);color:#fff;box-shadow:0 6px 18px rgba(23,70,200,.22)}
.brand-icon i{display:block;font-size:1rem;line-height:1}
.brand-name{font-size:1rem;font-weight:700;line-height:1.1}
.brand-sub{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#667085;margin-top:3px}
.desktop-nav{display:flex;align-items:center;gap:.25rem}
.desktop-nav a{padding:.5rem .75rem;border-radius:6px;text-decoration:none;color:#667085;font-size:.875rem;font-weight:500}
.desktop-nav a:hover,.desktop-nav a.active{background:#f1f5f9;color:#101828}
.header-actions{display:flex;align-items:center;gap:.5rem}
.advisor-link{padding:.5rem .75rem;color:#101828;text-decoration:none;font-size:.75rem;font-weight:600}
.enroll-btn{padding:.5rem .75rem;border-radius:6px;background:#1746c8;color:#fff;text-decoration:none;font-size:.75rem;font-weight:600;box-shadow:0 6px 18px rgba(23,70,200,.2)}
.menu-btn{width:40px;height:40px;border:1px solid #e2e8f0;background:#fff;border-radius:7px;font-size:1.25rem}
.mobile-menu{border-top:1px solid #e2e8f0;padding:1rem 0 1.25rem}
.mobile-menu a{display:block;padding:.7rem .8rem;border-radius:7px;text-decoration:none;color:#667085;font-size:.9rem;font-weight:500}
.mobile-menu a.active{background:#f1f5f9;color:#101828}
.mobile-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1rem}
.mobile-actions a{width:100%;white-space:nowrap}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:991.98px){
  .desktop-nav,.header-actions{display:none!important}
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(min-width:992px){
  .menu-btn,.mobile-menu{display:none!important}
}
/* Hero background matched to Products.html */
.hero{
  background:linear-gradient(135deg,#142a86 0%,#2455d5 100%) !important;
}
.hero .hero-bg{
  display:none !important;
}
/* Final micro-match to Products navigation */
.site-header .brand-name{
  font-size:1rem !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  letter-spacing:0 !important;
  transform:none !important;
  margin:0 !important;
}
.site-header .brand-sub{
  margin-top:3px !important;
}
.site-header .enroll-btn{
  padding:.5rem .75rem !important;
  min-height:auto !important;
  border-radius:6px !important;
  font-size:.75rem !important;
  font-weight:600 !important;
  line-height:normal !important;
  display:inline-block !important;
}
/* Blue gradient overlays for course and campus thumbnails */
.course-img,
.campus-img {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.course-img::after,
.campus-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:linear-gradient(
  180deg,
  rgba(20,42,134,.04) 0%,
  rgba(20,42,134,.10) 35%,
  rgba(36,85,213,.18) 70%,
  rgba(36,85,213,.30) 100%
  );
  transition: background .35s ease, opacity .35s ease;
}
.card-clean:hover .course-img::after,
.card-clean:hover .campus-img::after {
  background:linear-gradient(
  180deg,
  rgba(20,42,134,.08) 0%,
  rgba(20,42,134,.16) 35%,
  rgba(36,85,213,.24) 70%,
  rgba(36,85,213,.38) 100%
  );
}
.course-img img,
.campus-img img {
  position: relative;
  z-index: 0;
  filter: saturate(1.03);
}
.card-clean:hover .course-img img,
.card-clean:hover .campus-img img {
  filter: saturate(1.1);
}
/* Keep thumbnail badges above the gradient */
.course-badge,
.level-badge {
  z-index: 2;
}
/* Card-style course categories based on the reference */
.category-card-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:.75rem;
}
.category-card{
  min-height:118px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  color:#101828;
  box-shadow:0 6px 18px rgba(15,23,42,.03);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, color .22s ease;
}
.category-card:hover,
.category-card.active{
  transform:translateY(-2px);
  border-color:#6f9cff;
  color:var(--action);
  box-shadow:0 12px 28px rgba(23,70,200,.10);
}
.category-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#e9f1ff;
  color:#0057b8;
  font-size:1.15rem;
  transition:background .22s ease, color .22s ease, transform .22s ease;
}
.category-card.active .category-icon,
.category-card:hover .category-icon{
  background:#0d4bc4;
  color:#fff;
  transform:scale(1.04);
}
.category-name{
  font-size:.88rem;
  font-weight:700;
  text-align:center;
  line-height:1.25;
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:1199.98px){
  .category-card-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:575.98px){
  .category-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.65rem;
  }
.category-card{
  min-height:108px;
  padding:.75rem .5rem;
}
.category-name{
  font-size:.82rem;
}
}
/* Rich autoplay testimonial carousel */
.testimonial-carousel{
  position:relative;
  padding-bottom:2.25rem;
}
.testimonial-rich{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:290px;
  margin:0;
  padding:1.5rem;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.testimonial-rich:hover{
  transform:translateY(-3px);
  border-color:rgba(0,87,184,.28);
  box-shadow:var(--shadow-lg);
}
.testimonial-quote-icon{
  position:absolute;
  top:1.15rem;
  right:1.25rem;
  color:#e3ebf8;
  font-size:2rem;
  line-height:1;
}
.testimonial-rich .stars{
  color:#0057b8;
  font-size:1rem;
  letter-spacing:.08em;
}
.testimonial-rich blockquote{
  flex:1;
  margin:1rem 0 1.25rem;
  color:#344054;
  font-size:.9rem;
  line-height:1.7;
}
.testimonial-rich figcaption{
  display:flex;
  align-items:center;
  gap:.8rem;
  border-top:1px solid var(--border);
  padding-top:1rem;
}
.testimonial-rich figcaption img{
  width:46px;
  height:46px;
  flex:0 0 auto;
  border-radius:50%;
  border:2px solid #eef3fa;
  object-fit:cover;
}
.testimonial-person{
  min-width:0;
}
.testimonial-person strong{
  display:block;
  color:#101828;
  font-size:.88rem;
  line-height:1.3;
}
.testimonial-person span{
  display:block;
  margin-top:.15rem;
  color:var(--muted);
  font-size:.75rem;
  line-height:1.35;
}
.review-badge{
  align-self:flex-start;
  margin-top:1rem;
  border-radius:999px;
  background:#eaf1ff;
  color:#0b4db8;
  padding:.25rem .7rem;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.testimonial-indicators{
  bottom:0;
  margin-bottom:0;
}
.testimonial-indicators [data-bs-target]{
  width:8px;
  height:8px;
  border:0;
  border-radius:50%;
  background-color:#9fb4d8;
}
.testimonial-indicators .active{
  background-color:#0057b8;
}
.testimonial-control{
  top:50%;
  width:38px;
  height:38px;
  transform:translateY(-50%);
  border:1px solid var(--border);
  border-radius:50%;
  background:#fff;
  color:#0057b8;
  opacity:1;
  box-shadow:0 8px 20px rgba(15,23,42,.10);
}
.testimonial-control:hover{
  background:#0057b8;
  color:#fff;
}
.carousel-control-prev.testimonial-control{
  left:-18px;
}
.carousel-control-next.testimonial-control{
  right:-18px;
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:991.98px){
  .testimonial-control{
    display:none;
  }
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:767.98px){
  .testimonial-rich{
    min-height:auto;
  }
.carousel-item .col-12:not(:first-child){
  display:none;
}
}
/* Final single-row colorful partners marquee */
.partners-section{
  padding:4.25rem 0;
  background:#f5f7fa;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.partners-heading{
  max-width:760px;
  margin-inline:auto;
}
.logo-marquee{
  position:relative;
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.logo-track{
  display:flex;
  align-items:center;
  width:max-content;
  gap:1.75rem;
  animation:partners-single-row 28s linear infinite;
  will-change:transform;
}
.logo-marquee:hover .logo-track{
  animation-play-state:paused;
}
.logo-only{
  width:145px;
  height:68px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo-only img{
  display:block;
  max-width:122px;
  max-height:46px;
  object-fit:contain;
  opacity:.95;
  filter:none;
  transition:opacity .22s ease, transform .22s ease;
}
.logo-only:hover img{
  opacity:1;
  transform:scale(1.06);
}

/* Animation sequence used by the component states that reference this name. */
@keyframes partners-single-row{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - .875rem))}
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:767.98px){
  .partners-section{
    padding:3.5rem 0;
  }
.logo-track{
  gap:1.15rem;
  animation-duration:23s;
}
.logo-only{
  width:118px;
  height:58px;
}
.logo-only img{
  max-width:100px;
  max-height:38px;
}
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(prefers-reduced-motion:reduce){
  .logo-track{
    animation:none;
  }
}
/* Reference-matched Why Trilogix section */
.why-trilogix-section{
  padding-top:4.75rem;
  padding-bottom:4.75rem;
  background:#fff;
}
.why-section-heading{
  max-width:760px;
  margin-inline:auto;
}
.why-section-heading .section-title{
  margin-top:.55rem;
}
.why-card-modern{
  min-height:186px;
  padding:1.65rem 1.55rem;
  border:1px solid #d8e1ec;
  border-radius:16px;
  background:#fff;
  box-shadow:none;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.why-card-modern:hover{
  transform:translateY(-3px);
  border-color:#7aa2ff;
  box-shadow:0 14px 32px rgba(15,23,42,.08);
}
.why-icon-solid{
  width:46px;
  height:46px;
  border-radius:12px;
  background:#0648bd;
  color:#fff;
  font-size:1.15rem;
}
.why-card-modern:hover .why-icon-solid{
  background:#003a92;
}
.why-card-modern h3{
  margin:1.15rem 0 .45rem;
  color:#0f172a;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.3;
}
.why-card-modern p{
  margin:0;
  color:#667085;
  font-size:.88rem;
  line-height:1.65;
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:767.98px){
  .why-trilogix-section{
    padding-top:3.75rem;
    padding-bottom:3.75rem;
  }
.why-card-modern{
  min-height:auto;
}
}
/* Final Why section alignment */
.why-section-heading{
  margin-inline:0;
  text-align:left;
}
/* Campus image labels */
.campus-label{
  position:absolute;
  top:.85rem;
  left:.85rem;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:28px;
  padding:0 .75rem;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#0b4db8;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 4px 12px rgba(15,23,42,.12);
  backdrop-filter:blur(6px);
}
.card-clean:hover .campus-label{
  background:#fff;
  color:#003a92;
}
/* Conversion, content depth, accessibility, and motion enhancements */
:root{
  --success:#0f9f6e;
  --ink:#0f172a;
}
.skip-link{
  position:fixed;left:1rem;top:-4rem;z-index:2000;
  padding:.75rem 1rem;border-radius:.5rem;background:#fff;color:var(--primary);
  box-shadow:var(--shadow-lg);transition:top .2s ease;
}
.skip-link:focus{top:1rem}
.section-intro{max-width:760px}
.journey-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;position:relative;
}
.journey-step{
  position:relative;height:100%;padding:1.5rem;border:1px solid var(--border);
  border-radius:16px;background:#fff;box-shadow:var(--shadow);
}
.journey-step:not(:last-child)::after{
  content:"";position:absolute;top:2.2rem;right:-1rem;width:1rem;border-top:2px dashed #a9bde8;
}
.journey-number{
  width:42px;height:42px;display:grid;place-items:center;border-radius:12px;
  background:#e9f1ff;color:var(--action);font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;
}
.journey-step h3{margin:1rem 0 .45rem;font-size:1rem;font-weight:800}
.journey-step p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.65}
.proof-panel{
  border-radius:20px;background:linear-gradient(135deg,#0e276e,#1746c8);
  color:#fff;padding:2rem;height:100%;overflow:hidden;position:relative;
}
.proof-panel::after{
  content:"";position:absolute;width:240px;height:240px;border-radius:50%;
  background:rgba(255,255,255,.08);right:-80px;bottom:-100px;
}
.proof-panel > *{position:relative;z-index:1}
.proof-list{display:grid;gap:.8rem;margin-top:1.4rem}
.proof-item{display:flex;gap:.75rem;align-items:flex-start;color:rgba(255,255,255,.84)}
.proof-item i{color:#9ed0ff}
.project-card{
  height:100%;padding:1.5rem;border:1px solid var(--border);border-radius:16px;background:#fff;
  transition:.25s ease;
}
.project-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#8cb0ff}
.project-icon{
  width:48px;height:48px;display:grid;place-items:center;border-radius:14px;
  background:#e9f1ff;color:var(--action);font-size:1.25rem;
}
.project-card h3{margin:1rem 0 .45rem;font-size:1rem;font-weight:800}
.project-card p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.65}
.outcome-card{
  height:100%;padding:1.6rem;border:1px solid var(--border);border-radius:16px;background:#fff;
}
.outcome-card strong{
  display:block;font-family:"Plus Jakarta Sans",sans-serif;font-size:2rem;color:var(--action);line-height:1;
}
.outcome-card span{display:block;margin-top:.55rem;font-weight:700}
.outcome-card p{margin:.55rem 0 0;color:var(--muted);font-size:.84rem}
.instructor-card{
  height:100%;padding:1.5rem;border:1px solid var(--border);border-radius:16px;background:#fff;
}
.instructor-avatar{
  width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,#dce8ff,#eef4ff);color:var(--action);font-size:1.35rem;
}
.instructor-card h3{margin:1rem 0 .2rem;font-size:1rem;font-weight:800}
.instructor-role{color:var(--action);font-size:.78rem;font-weight:700}
.instructor-card p{color:var(--muted);font-size:.84rem;line-height:1.65}
.faq-wrap{max-width:900px;margin-inline:auto}
.accordion-item{
  border:1px solid var(--border)!important;border-radius:12px!important;overflow:hidden;margin-bottom:.75rem;
}
.accordion-button{font-weight:700;padding:1.15rem 1.25rem}
.accordion-button:not(.collapsed){color:var(--primary);background:#f4f7ff;box-shadow:none}
.accordion-button:focus{box-shadow:0 0 0 .2rem rgba(0,87,184,.12)}
.accordion-body{color:var(--muted);line-height:1.75}
.floating-advisor{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:1020;
  display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-radius:999px;
  background:#0c9b62;color:#fff;font-weight:700;box-shadow:0 14px 30px rgba(15,159,110,.3);
  transition:.2s ease;
}
.floating-advisor:hover{color:#fff;transform:translateY(-2px);filter:brightness(1.05)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
.card-clean:focus-visible,.category-card:focus-visible,.floating-advisor:focus-visible,
.hero-actions a:focus-visible,.course-actions a:focus-visible{
  outline:3px solid #8cb0ff;outline-offset:3px;
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:991.98px){
  .journey-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .journey-step:not(:last-child)::after{display:none}
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:575.98px){
  .journey-grid{grid-template-columns:1fr}
  .floating-advisor span{display:none}
  .floating-advisor{width:52px;height:52px;justify-content:center;padding:0;font-size:1.2rem}
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}
/* =========================================================
Trilogix High-Tech Visual System — colorful, modern, alive
========================================================= */
:root{
  --tech-blue:#1746c8;
  --tech-cyan:#00c2ff;
  --tech-violet:#7c3aed;
  --tech-indigo:#4338ca;
  --tech-mint:#2dd4bf;
  --tech-pink:#ec4899;
  --tech-surface:#f6f8ff;
  --tech-gradient:linear-gradient(135deg,#1746c8 0%,#4338ca 45%,#7c3aed 100%);
  --tech-gradient-bright:linear-gradient(135deg,#00c2ff 0%,#3b82f6 42%,#7c3aed 100%);
  --tech-glow:0 18px 55px rgba(23,70,200,.20);
}
html{scroll-behavior:smooth}
body{
  background:
  radial-gradient(circle at 10% 12%,rgba(0,194,255,.06),transparent 24rem),
  radial-gradient(circle at 88% 38%,rgba(124,58,237,.055),transparent 28rem),
  #fff;
}
::selection{background:rgba(0,194,255,.25);color:#0f172a}
/* Scroll progress */
#scrollProgress{
  position:fixed;inset:0 auto auto 0;z-index:2100;width:0;height:3px;
  background:linear-gradient(90deg,var(--tech-cyan),#3b82f6,var(--tech-violet),var(--tech-pink));
  box-shadow:0 0 16px rgba(0,194,255,.7);transition:width .08s linear;
}
/* Header upgrades */
.site-header{transition:background .25s ease,box-shadow .25s ease,border-color .25s ease}
.site-header.is-scrolled{
  background:rgba(255,255,255,.82)!important;
  border-color:rgba(99,102,241,.14)!important;
  box-shadow:0 12px 35px rgba(15,23,42,.09);
}
.brand-icon{
  background:var(--tech-gradient-bright)!important;
  box-shadow:0 8px 24px rgba(23,70,200,.28)!important;
  position:relative;overflow:hidden;
}
.brand-icon::after{
  content:"";position:absolute;inset:-100% auto auto -60%;width:45%;height:280%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(28deg);animation:brandShine 5s ease-in-out infinite;
}

/* Animation sequence used by the component states that reference this name. */
@keyframes brandShine{0%,65%{left:-60%}90%,100%{left:140%}}
.desktop-nav a{position:relative;overflow:hidden}
.desktop-nav a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:4px;height:2px;border-radius:99px;
  background:linear-gradient(90deg,var(--tech-cyan),var(--tech-violet));transition:.25s ease;
}
.desktop-nav a:hover::after,.desktop-nav a.active::after{left:.75rem;right:.75rem}
.enroll-btn,.btn-header-primary{
  background:var(--tech-gradient-bright)!important;
  box-shadow:0 10px 24px rgba(23,70,200,.22)!important;
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease!important;
}
.enroll-btn:hover,.btn-header-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(23,70,200,.30)!important;filter:saturate(1.1)}
/* Hero: animated mesh, grid, aurora and glass */
.hero{
  min-height:650px;display:flex;align-items:center;
  background:
  radial-gradient(circle at 15% 22%,rgba(0,194,255,.35),transparent 28%),
  radial-gradient(circle at 88% 18%,rgba(124,58,237,.48),transparent 30%),
  radial-gradient(circle at 70% 90%,rgba(236,72,153,.18),transparent 27%),
  linear-gradient(135deg,#061b54 0%,#0d3cb8 45%,#4321a8 100%)!important;
  isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,black,transparent 92%);
  animation:gridDrift 18s linear infinite;
}
.hero::after{
  content:"";position:absolute;z-index:-1;width:440px;height:440px;border-radius:50%;right:-130px;top:-170px;
  background:conic-gradient(from 180deg,rgba(0,194,255,.28),rgba(124,58,237,.36),rgba(236,72,153,.22),rgba(0,194,255,.28));
  filter:blur(28px);animation:auroraSpin 16s linear infinite;
}

/* Animation sequence used by the component states that reference this name. */
@keyframes gridDrift{to{background-position:52px 52px}}

/* Animation sequence used by the component states that reference this name. */
@keyframes auroraSpin{to{transform:rotate(360deg)}}
.hero-inner{z-index:2}
.hero-badge{
  background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.25)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 12px 30px rgba(3,15,55,.18);
  backdrop-filter:blur(16px);
}
.hero h1 span{
  background:linear-gradient(90deg,#ffffff 0%,#7dd3fc 42%,#c4b5fd 72%,#f9a8d4 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  background-size:220% auto!important;animation:headlineFlow 6s ease-in-out infinite;
}

/* Animation sequence used by the component states that reference this name. */
@keyframes headlineFlow{0%,100%{background-position:0% center}50%{background-position:100% center}}
.hero p{max-width:44rem;color:rgba(255,255,255,.86)!important}
.btn-white{
  position:relative;overflow:hidden;background:#fff;color:#123aa4!important;
  box-shadow:0 12px 28px rgba(2,16,55,.22);transition:.25s ease;
}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(2,16,55,.32)}
.btn-outline-white{background:rgba(255,255,255,.06);backdrop-filter:blur(12px);transition:.25s ease}
.btn-outline-white:hover{background:rgba(255,255,255,.15);transform:translateY(-3px);color:#fff}
.stat-card{
  position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.045))!important;
  border-color:rgba(255,255,255,.24)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 38px rgba(2,16,55,.18);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.stat-card::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(125,211,252,.8),transparent 45%,rgba(196,181,253,.65));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;
}
.stat-card:hover{transform:translateY(-7px) scale(1.015);border-color:rgba(125,211,252,.55)!important;box-shadow:0 24px 50px rgba(2,16,55,.28)}
.stat-card i{color:#7dd3fc;font-size:1.1rem}
/* Metrics */
.metrics{
  position:relative;background:linear-gradient(90deg,#f4f8ff 0%,#fbf7ff 52%,#f5fbff 100%)!important;
  border-color:rgba(99,102,241,.12)!important;
}
.metric{position:relative}
.metric:not(:last-child)::after{content:"";position:absolute;right:0;top:15%;height:70%;width:1px;background:linear-gradient(transparent,#c7d2fe,transparent)}
.metric strong{background:var(--tech-gradient-bright);-webkit-background-clip:text;background-clip:text;color:transparent!important}
/* Colorful section canvases */
main > .section:nth-of-type(3),main > .section:nth-of-type(7),main > .section:nth-of-type(10){
  position:relative;background:
  radial-gradient(circle at 5% 15%,rgba(0,194,255,.08),transparent 22rem),
  radial-gradient(circle at 96% 78%,rgba(124,58,237,.07),transparent 24rem),#fff;
}
.section-soft{
  background:
  linear-gradient(180deg,rgba(245,247,255,.96),rgba(250,252,255,.98)),
  radial-gradient(circle at 20% 10%,rgba(0,194,255,.10),transparent 20rem)!important;
  border-color:rgba(99,102,241,.12)!important;
}
.section-label{background:var(--tech-gradient-bright);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.section-title{color:#0b163d}
/* Cards: richer depth and high-tech lighting */
.card-clean,.why-card-modern,.project-card,.journey-step,.outcome-card,.instructor-card,.testimonial-rich,.category-card{
  position:relative;isolation:isolate;
}
.card-clean::before,.why-card-modern::before,.project-card::before,.journey-step::before,.outcome-card::before,.instructor-card::before,.testimonial-rich::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,194,255,.12),transparent 38%);
  transition:opacity .3s ease;
}
.card-clean:hover::before,.why-card-modern:hover::before,.project-card:hover::before,.journey-step:hover::before,.outcome-card:hover::before,.instructor-card:hover::before,.testimonial-rich:hover::before{opacity:1}
.card-clean,.why-card-modern,.project-card,.journey-step,.outcome-card,.instructor-card,.testimonial-rich{
  border-color:rgba(148,163,184,.30)!important;box-shadow:0 10px 32px rgba(15,23,42,.06)!important;
}
.card-clean:hover,.why-card-modern:hover,.project-card:hover,.journey-step:hover,.outcome-card:hover,.instructor-card:hover,.testimonial-rich:hover{
  border-color:rgba(59,130,246,.42)!important;box-shadow:0 24px 50px rgba(23,70,200,.14)!important;
}
.course-img::after,.campus-img::after{
  background:linear-gradient(180deg,rgba(11,22,61,.02),rgba(23,70,200,.20) 60%,rgba(67,56,202,.45))!important;
}
.course-badge,.campus-label{box-shadow:0 8px 20px rgba(15,23,42,.14)}
.level-badge{background:linear-gradient(90deg,rgba(23,70,200,.90),rgba(124,58,237,.90))!important}
.mini-primary{background:var(--tech-gradient-bright)!important;box-shadow:0 8px 18px rgba(23,70,200,.16);transition:.2s ease}
.mini-primary:hover{transform:translateY(-2px);color:#fff;box-shadow:0 12px 25px rgba(23,70,200,.26)}
/* Categories */
.category-card-grid{gap:1rem}
.category-card{
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(246,248,255,.94));
  overflow:hidden;
}
.category-card::before{
  content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-35px;top:-38px;
  background:linear-gradient(135deg,rgba(0,194,255,.18),rgba(124,58,237,.18));transition:.3s ease;
}
.category-card:hover::before{transform:scale(1.55)}
.category-card:nth-child(2n) .category-icon{background:rgba(124,58,237,.10);color:var(--tech-violet)}
.category-card:nth-child(3n) .category-icon{background:rgba(45,212,191,.12);color:#0f9f8c}
.category-card:nth-child(4n) .category-icon{background:rgba(236,72,153,.10);color:var(--tech-pink)}
.category-card:hover .category-icon{background:var(--tech-gradient-bright)!important;color:#fff!important;box-shadow:0 12px 24px rgba(23,70,200,.24)}
/* Journey, projects, outcomes, instructors */
.journey-step{overflow:hidden;transition:.3s ease}
.journey-step:hover{transform:translateY(-6px)}
.journey-number{background:var(--tech-gradient-bright)!important;color:#fff!important;box-shadow:0 10px 24px rgba(23,70,200,.22)}
.proof-panel{
  background:
  radial-gradient(circle at 90% 15%,rgba(0,194,255,.25),transparent 28%),
  radial-gradient(circle at 15% 90%,rgba(236,72,153,.16),transparent 30%),
  linear-gradient(135deg,#071d5b,#1746c8 48%,#5b21b6)!important;
  box-shadow:0 24px 55px rgba(23,70,200,.23);
}
.project-icon,.why-icon-solid,.instructor-avatar{
  background:var(--tech-gradient-bright)!important;color:#fff!important;box-shadow:0 10px 24px rgba(23,70,200,.20);
}
.outcome-card strong{background:var(--tech-gradient-bright);-webkit-background-clip:text;background-clip:text;color:transparent!important}
/* Testimonials */
.testimonial-carousel::before{
  content:"";position:absolute;inset:-2rem 10% auto;height:180px;z-index:-1;
  background:radial-gradient(ellipse,rgba(0,194,255,.09),rgba(124,58,237,.05),transparent 70%);filter:blur(12px);
}
.stars{background:linear-gradient(90deg,#f59e0b,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.review-badge{background:linear-gradient(90deg,rgba(0,194,255,.13),rgba(124,58,237,.12))!important;color:#3347b9!important}
/* Partners */
.partners-section{
  background:
  radial-gradient(circle at 15% 30%,rgba(0,194,255,.10),transparent 20rem),
  radial-gradient(circle at 85% 70%,rgba(124,58,237,.10),transparent 24rem),
  linear-gradient(180deg,#f7f9ff,#f2f6ff)!important;
}
.logo-only{filter:drop-shadow(0 8px 14px rgba(15,23,42,.07))}
/* FAQ and CTA */
.accordion-item{background:rgba(255,255,255,.86)!important;backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(15,23,42,.045)}
.accordion-button:not(.collapsed){background:linear-gradient(90deg,rgba(0,194,255,.08),rgba(124,58,237,.08))!important}
.cta{
  background:
  radial-gradient(circle at 12% 20%,rgba(0,194,255,.35),transparent 28%),
  radial-gradient(circle at 88% 70%,rgba(236,72,153,.22),transparent 28%),
  linear-gradient(135deg,#08216b,#1746c8 45%,#6d28d9)!important;
}
.cta::after{
  content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-100px;top:-120px;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 35px rgba(255,255,255,.035),0 0 0 70px rgba(255,255,255,.025);
}
.floating-advisor{background:linear-gradient(135deg,#0f9f6e,#22c55e)!important;animation:whatsappPulse 2.8s ease-in-out infinite}

/* Animation sequence used by the component states that reference this name. */
@keyframes whatsappPulse{0%,100%{box-shadow:0 14px 30px rgba(15,159,110,.30)}50%{box-shadow:0 16px 42px rgba(34,197,94,.46)}}
/* Footer */
.site-footer{
  position:relative;overflow:hidden;
  background:
  radial-gradient(circle at 12% 15%,rgba(0,194,255,.12),transparent 24rem),
  radial-gradient(circle at 90% 80%,rgba(124,58,237,.18),transparent 26rem),
  #081136!important;
}
.site-footer::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.site-footer .container-page{position:relative}
/* Reveal variants and stagger */
.reveal{transform:translateY(28px) scale(.985);filter:blur(4px);transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1),filter .72s ease}
.reveal.is-visible{transform:none;filter:none}
.reveal:nth-child(2){transition-delay:.07s}.reveal:nth-child(3){transition-delay:.14s}.reveal:nth-child(4){transition-delay:.21s}.reveal:nth-child(5){transition-delay:.28s}
/* Decorative floating tech nodes created by JS */
.tech-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(.2px);opacity:.75}
.tech-orb.one{width:14px;height:14px;background:#67e8f9;left:7%;top:22%;box-shadow:0 0 24px #22d3ee;animation:floatOne 6s ease-in-out infinite}
.tech-orb.two{width:9px;height:9px;background:#c4b5fd;right:12%;top:30%;box-shadow:0 0 22px #8b5cf6;animation:floatOne 7.5s ease-in-out infinite reverse}
.tech-orb.three{width:7px;height:7px;background:#f9a8d4;right:32%;bottom:18%;box-shadow:0 0 18px #ec4899;animation:floatTwo 5.5s ease-in-out infinite}

/* Animation sequence used by the component states that reference this name. */
@keyframes floatOne{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-18px,0)}}

/* Animation sequence used by the component states that reference this name. */
@keyframes floatTwo{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(14px,-12px,0)}}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:767.98px){
  .hero{min-height:auto}.metric:nth-child(2)::after{display:none}.hero::after{width:300px;height:300px}
  .reveal{transform:translateY(18px);filter:none}
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.hero h1 span,.brand-icon::after,.floating-advisor,.tech-orb{animation:none!important}
}
/* === Final refinement: premium campus headers, pure hover categories, cleaner proof panel === */
.campus-program-header{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.15rem 1.25rem;border:1px solid #dce7f4;border-radius:18px;
  background:linear-gradient(135deg,#ffffff 0%,#f7faff 100%);
  box-shadow:0 12px 34px rgba(7,49,126,.07)
}
.campus-program-identity{display:flex;align-items:center;gap:1rem;min-width:0}
.campus-program-flag{
  width:56px;height:56px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid #dce7f4;border-radius:15px;background:#fff;font-size:1.85rem;
  box-shadow:0 8px 20px rgba(7,49,126,.08)
}
.campus-program-header h3{margin:.2rem 0 .2rem;color:#0b1f45;font-size:1.18rem;font-weight:800}
.campus-program-header p{margin:0;color:#667085;font-size:.84rem}
.campus-program-link{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;color:#0752bc;font-size:.84rem;font-weight:800}
.campus-program-link:hover{color:#003a92;transform:translateX(2px)}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:767.98px){
  .campus-program-header{align-items:flex-start;flex-direction:column}
  .campus-program-link{margin-left:72px}
}
/* Course categories: no permanent active state; interaction appears only on hover/focus */
.category-premium-card,
.category-premium-card.category-featured{
  background:linear-gradient(145deg,#fff,#f8fbff)!important;
  border-color:#dce6f2!important;color:#101828!important;
  box-shadow:0 10px 28px rgba(7,49,126,.055)!important;
}
.category-premium-card .category-premium-icon,
.category-premium-card.category-featured .category-premium-icon{
  background:#eaf2ff!important;color:#0752bc!important;box-shadow:none!important;
}
.category-premium-card .category-number{color:#9aacbf!important}
.category-premium-card:hover,
.category-premium-card:focus-visible{
  background:linear-gradient(135deg,#063b99,#0b65d8)!important;
  border-color:#0b65d8!important;color:#fff!important;
  box-shadow:0 22px 48px rgba(5,66,159,.24)!important;transform:translateY(-5px)
}
.category-premium-card:hover strong,.category-premium-card:hover small,
.category-premium-card:hover .category-number,.category-premium-card:hover .category-arrow,
.category-premium-card:focus-visible strong,.category-premium-card:focus-visible small,
.category-premium-card:focus-visible .category-number,.category-premium-card:focus-visible .category-arrow{color:#fff!important}
.category-premium-card:hover .category-premium-icon,
.category-premium-card:focus-visible .category-premium-icon{
  background:rgba(255,255,255,.16)!important;color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)!important
}
/* Learning-by-doing: remove circular glows/blobs and retain clean industrial blue */
.proof-panel,.proof-panel:before,.proof-panel:after{box-shadow:none!important}
.proof-panel:before,.proof-panel:after{display:none!important;content:none!important}
.proof-panel{
  background:linear-gradient(145deg,#062b70 0%,#0749a8 100%)!important;
  border:1px solid rgba(133,203,255,.25)!important;
}
.proof-panel .section-title{color:#fff!important}
/* Product carousel: cleaner ecommerce cards and dependable animation */
.product-carousel .carousel-item{transition:transform .75s cubic-bezier(.22,.61,.36,1)}
.commerce-card{
  border:1px solid #dce6f2!important;border-radius:18px!important;background:#fff!important;
  box-shadow:0 10px 30px rgba(7,49,126,.075)!important;
  transform:translateY(0);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease!important;
}
.commerce-card:hover{
  transform:translateY(-7px)!important;border-color:#a9c8f3!important;
  box-shadow:0 24px 54px rgba(7,49,126,.16)!important;
}
.commerce-image{background:linear-gradient(145deg,#f7faff,#eaf2ff)!important}
.product-carousel-nav>button{transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
.product-carousel-nav>button:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(7,49,126,.15)}
/* Minor premium refinements: flags, course levels, products and news */
.country-chip{display:inline-flex!important;align-items:center;gap:.5rem}
.country-chip img{width:24px;height:16px;object-fit:cover;border-radius:2px;box-shadow:0 2px 6px rgba(0,0,0,.16)}
.campus-program-flag{width:58px!important;height:42px!important;padding:0!important;overflow:hidden;border-radius:8px!important;background:#fff!important;box-shadow:0 8px 18px rgba(7,49,126,.16)!important}
.campus-program-flag img{width:100%;height:100%;object-fit:cover;display:block}
.level-badge{background:linear-gradient(90deg,#073b91,#0b63ce)!important;color:#fff!important;border:1px solid rgba(255,255,255,.32);box-shadow:0 7px 18px rgba(3,45,112,.22)}
/* Product cards and full-width quote action */
.product-commerce-section .section-link{white-space:nowrap}
.commerce-card{display:flex;flex-direction:column;box-shadow:0 10px 28px rgba(7,49,126,.075)!important}
.commerce-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(7,49,126,.135)!important}
.commerce-body{display:flex;flex:1;flex-direction:column}
.commerce-body p{flex:1}
.commerce-body .quote-button{width:100%;min-height:43px;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;margin-top:1.15rem;padding:.72rem 1rem;border-radius:9px;background:linear-gradient(135deg,#073f9c,#0b63ce);color:#fff!important;font-size:.8rem;font-weight:800;box-shadow:0 9px 20px rgba(7,82,188,.18);transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
.commerce-card:hover .commerce-body .quote-button{gap:.55rem;transform:translateY(-1px);box-shadow:0 13px 26px rgba(7,82,188,.25);background:linear-gradient(135deg,#063783,#0959ba)}
/* Hybrid premium news experience */
.news-home-section{position:relative;overflow:hidden;background:linear-gradient(180deg,#f7faff 0%,#eef5ff 100%);border-block:1px solid #deebfb}
.news-home-section::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(7,82,188,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(7,82,188,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 92%)}
.news-home-section .container-page{position:relative}
.news-experience{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,.72fr);gap:1.35rem;align-items:stretch}
.news-stage{position:relative;min-height:520px;overflow:hidden;border:1px solid rgba(123,166,225,.45);border-radius:22px;background:#071f54;box-shadow:0 20px 55px rgba(6,45,118,.14)}
.news-stage-progress{position:absolute;top:0;left:0;right:0;z-index:6;height:3px;background:rgba(255,255,255,.18)}
.news-stage-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#79c7ff,#fff);animation:newsProgress 7s linear infinite}
.news-stage.is-paused .news-stage-progress span{animation-play-state:paused}

/* Animation sequence used by the component states that reference this name. */
@keyframes newsProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.news-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .65s ease,visibility .65s ease}
.news-slide.active{opacity:1;visibility:visible}
.news-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 7s linear}
.news-slide.active img{transform:scale(1.10)}
.news-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,20,59,.10) 15%,rgba(3,24,70,.48) 58%,rgba(3,22,64,.97) 100%)}
.news-stage-copy{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:2rem 2rem 1.9rem;color:#fff}
.news-stage-kicker{display:inline-flex;align-items:center;gap:.45rem;padding:.36rem .68rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);font-size:.64rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.news-stage-copy h3{max-width:760px;margin:.9rem 0 .7rem;font-size:clamp(1.55rem,2.5vw,2.25rem);line-height:1.18;letter-spacing:-.035em}
.news-stage-copy p{max-width:720px;margin:0;color:rgba(255,255,255,.78);font-size:.9rem;line-height:1.7}
.news-stage-meta{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;margin-top:1rem;color:rgba(255,255,255,.68);font-size:.72rem;font-weight:600}
.news-stage-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.15rem;color:#fff;font-size:.82rem;font-weight:800}
.news-stage-link i{transition:transform .2s ease}.news-stage-link:hover i{transform:translateX(3px)}
.news-nav{display:grid;gap:.75rem}
.news-nav-item{width:100%;display:grid;grid-template-columns:76px 1fr;gap:.9rem;align-items:center;padding:.72rem;border:1px solid #d5e4f7;border-radius:16px;background:rgba(255,255,255,.92);text-align:left;box-shadow:0 8px 22px rgba(7,49,126,.05);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease}
.news-nav-item:hover,.news-nav-item.active{transform:translateX(4px);border-color:#7caee9;background:#fff;box-shadow:0 15px 34px rgba(7,49,126,.11)}
.news-nav-thumb{width:76px;height:68px;overflow:hidden;border-radius:11px;background:#dcecff}
.news-nav-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.news-nav-item:hover .news-nav-thumb img,.news-nav-item.active .news-nav-thumb img{transform:scale(1.06)}
.news-nav-kicker{display:block;color:#0752bc;font-size:.61rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.news-nav-title{display:block;margin-top:.25rem;color:#0c1c43;font-size:.82rem;font-weight:800;line-height:1.35}
.news-nav-date{display:block;margin-top:.28rem;color:#7b8799;font-size:.66rem;font-weight:600}
.news-controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem}
.news-dots{display:flex;gap:.45rem}.news-dot{width:8px;height:8px;border:0;border-radius:50%;background:#b7cae4;padding:0;transition:.2s}.news-dot.active{width:24px;border-radius:999px;background:#0752bc}
.news-arrow-group{display:flex;gap:.5rem}.news-arrow{width:38px;height:38px;display:grid;place-items:center;border:1px solid #d5e4f7;border-radius:50%;background:#fff;color:#0752bc;box-shadow:0 7px 18px rgba(7,49,126,.07);transition:.2s}.news-arrow:hover{transform:translateY(-2px);background:#0752bc;color:#fff}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:991.98px){.news-experience{grid-template-columns:1fr}.news-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.news-stage{min-height:470px}}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:767.98px){.news-stage{min-height:500px}.news-stage-copy{padding:1.4rem}.news-nav{grid-template-columns:1fr}.news-nav-item{grid-template-columns:70px 1fr}.news-nav-thumb{width:70px;height:64px}}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(prefers-reduced-motion:reduce){.news-stage-progress span{animation:none;transform:scaleX(1)}.news-slide img,.news-nav-thumb img{transition:none!important;transform:none!important}}
/* =========================================================
PREMIUM BLUE INDUSTRIAL-TECH SYSTEM
Final visual layer: blue-only palette, circuits, glass and depth
========================================================= */
:root{
  --blue-950:#06153f;
  --blue-900:#0a225f;
  --blue-800:#0e3694;
  --blue-700:#1455d9;
  --blue-600:#2176ff;
  --blue-500:#3b8cff;
  --blue-300:#8fc3ff;
  --cyan-blue:#45d4ff;
  --ice:#edf7ff;
  --blue-surface:#f5f9ff;
  --blue-line:rgba(63,136,255,.16);
  --premium-shadow:0 24px 70px rgba(5,34,105,.16);
  --premium-border:rgba(83,145,255,.22);
  --tech-gradient:linear-gradient(135deg,#0a2a78 0%,#1250ce 52%,#2187ff 100%)!important;
  --tech-gradient-bright:linear-gradient(135deg,#0f55d9 0%,#2688ff 60%,#45d4ff 100%)!important;
}
html{scroll-behavior:smooth}
body{
  background:
  radial-gradient(circle at 8% 18%,rgba(33,118,255,.07),transparent 28rem),
  radial-gradient(circle at 96% 42%,rgba(69,212,255,.065),transparent 26rem),
  #fff;
}
#scrollProgress{background:linear-gradient(90deg,#1455d9,#45d4ff)!important}
.site-header{background:rgba(255,255,255,.86)!important;border-bottom:1px solid rgba(20,85,217,.10)!important}
.site-header.is-scrolled{box-shadow:0 12px 36px rgba(6,30,90,.10)}
.brand-icon,.brand-mark{background:linear-gradient(145deg,#0a2a78,#2176ff)!important;box-shadow:0 10px 28px rgba(20,85,217,.28)!important}
.enroll-btn,.btn-header-primary{background:linear-gradient(135deg,#0e48c2,#2176ff)!important;box-shadow:0 9px 24px rgba(20,85,217,.24)!important}
/* Hero: cinematic media + blue circuitry */
.hero{
  min-height:690px;
  isolation:isolate;
  background:#071a4c!important;
}
.hero .hero-bg{display:block!important;position:absolute!important;inset:0;z-index:-4;overflow:hidden}
.hero-fallback,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.03)}
.hero-video{z-index:1;opacity:.68}
.hero-fallback{z-index:0}
.hero-media-overlay{
  position:absolute;inset:0;z-index:2;
  background:
  linear-gradient(90deg,rgba(5,20,62,.98) 0%,rgba(7,31,91,.94) 38%,rgba(11,52,143,.80) 70%,rgba(11,65,174,.72) 100%),
  linear-gradient(180deg,rgba(4,19,60,.16),rgba(4,18,55,.66));
}
.hero-circuit-layer{
  position:absolute;inset:0;z-index:3;opacity:.44;
  background-image:
  linear-gradient(rgba(121,187,255,.11) 1px,transparent 1px),
  linear-gradient(90deg,rgba(121,187,255,.11) 1px,transparent 1px),
  radial-gradient(circle at center,rgba(69,212,255,.48) 0 1.5px,transparent 2px);
  background-size:72px 72px,72px 72px,144px 144px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.25),#000 58%,#000);
  animation:circuitDrift 24s linear infinite;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
  radial-gradient(circle at var(--spot-x,72%) var(--spot-y,35%),rgba(69,212,255,.17),transparent 24rem),
  linear-gradient(115deg,transparent 35%,rgba(99,177,255,.06) 50%,transparent 65%);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:130px;z-index:0;
  background:linear-gradient(180deg,transparent,rgba(4,17,52,.48));pointer-events:none;
}

/* Animation sequence used by the component states that reference this name. */
@keyframes circuitDrift{to{background-position:72px 36px,36px 72px,144px 72px}}
.hero-inner{padding-top:7.8rem!important;padding-bottom:7.4rem!important}
.hero-badge{border-color:rgba(126,190,255,.34)!important;background:rgba(17,77,178,.24)!important;box-shadow:inset 0 1px rgba(255,255,255,.10);backdrop-filter:blur(12px)}
.hero h1{font-size:clamp(3rem,5.4vw,4.55rem)!important;max-width:800px;text-shadow:0 10px 38px rgba(0,0,0,.28)}
.hero h1 span{background:linear-gradient(90deg,#fff,#9dd8ff,#45d4ff)!important;-webkit-background-clip:text!important;background-clip:text!important}
.hero p{max-width:670px!important;color:rgba(235,246,255,.82)!important}
.btn-white{box-shadow:0 12px 32px rgba(2,15,51,.24);transition:.25s ease}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(2,15,51,.32)}
.btn-outline-white{background:rgba(255,255,255,.055);backdrop-filter:blur(10px);transition:.25s ease}
.btn-outline-white:hover{background:#fff;color:#0e48c2;transform:translateY(-2px)}
.hero-points span{padding:.42rem .7rem;border:1px solid rgba(151,203,255,.14);border-radius:999px;background:rgba(7,38,106,.22);backdrop-filter:blur(9px)}
/* Premium hero lab panel */
.hero-lab-panel{position:relative;min-height:490px;perspective:1100px}
.lab-image-wrap{
  position:absolute;inset:18px 18px 18px 32px;overflow:hidden;border-radius:26px;
  border:1px solid rgba(171,218,255,.34);background:#0a2a78;
  box-shadow:0 40px 90px rgba(1,11,42,.42),inset 0 1px rgba(255,255,255,.22);
  transform:rotateY(-4deg) rotateX(1.5deg);
}
.lab-image-wrap::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(8,39,109,.06),rgba(4,18,56,.82)),linear-gradient(90deg,rgba(16,77,190,.2),transparent 60%)}
.lab-image-wrap::after{content:"";position:absolute;inset:0;z-index:3;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 0 90px rgba(14,82,210,.22);pointer-events:none}
.lab-image-wrap img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.06);transform:scale(1.04)}
.lab-status{position:absolute;top:22px;left:22px;z-index:4;display:flex;align-items:center;gap:.55rem;padding:.48rem .78rem;border:1px solid rgba(175,220,255,.26);border-radius:999px;background:rgba(5,27,79,.64);backdrop-filter:blur(12px);font-size:.72rem;font-weight:700;color:#eaf7ff;text-transform:uppercase;letter-spacing:.08em}
.lab-status span{width:8px;height:8px;border-radius:50%;background:#45d4ff;box-shadow:0 0 0 5px rgba(69,212,255,.13),0 0 18px #45d4ff;animation:statusPulse 1.8s ease-in-out infinite}

/* Animation sequence used by the component states that reference this name. */
@keyframes statusPulse{50%{transform:scale(.72);opacity:.65}}
.lab-caption{position:absolute;left:26px;right:26px;bottom:28px;z-index:4;color:#fff}
.lab-caption small{display:block;margin-bottom:.55rem;color:#8fdcff;font-size:.65rem;letter-spacing:.18em;font-weight:800}
.lab-caption strong{font-family:"Plus Jakarta Sans",sans-serif;font-size:1.45rem;line-height:1.25;letter-spacing:-.03em}
.lab-scanline{position:absolute;left:0;right:0;height:2px;z-index:4;background:linear-gradient(90deg,transparent,#45d4ff,transparent);box-shadow:0 0 16px #45d4ff;opacity:.55;animation:scanLab 5s ease-in-out infinite}

/* Animation sequence used by the component states that reference this name. */
@keyframes scanLab{0%,100%{top:8%;opacity:0}12%,88%{opacity:.55}50%{top:86%}}
.hero-kpi{position:absolute;z-index:6;min-width:155px;padding:1rem 1.05rem;border:1px solid rgba(168,216,255,.29);border-radius:16px;background:linear-gradient(145deg,rgba(13,63,157,.78),rgba(5,29,82,.72));box-shadow:0 18px 38px rgba(1,12,46,.30);backdrop-filter:blur(16px);animation:kpiFloat 6s ease-in-out infinite}
.hero-kpi i{display:inline-grid;width:32px;height:32px;place-items:center;margin-bottom:.55rem;border-radius:9px;background:rgba(69,212,255,.12);color:#6ee2ff}
.hero-kpi strong{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-size:1.25rem;color:#fff}
.hero-kpi span{display:block;margin-top:.1rem;font-size:.68rem;color:rgba(222,241,255,.72)}
.hero-kpi-one{right:-8px;top:48px}.hero-kpi-two{left:0;bottom:75px;animation-delay:-2s}.hero-kpi-three{right:8px;bottom:18px;animation-delay:-4s}

/* Animation sequence used by the component states that reference this name. */
@keyframes kpiFloat{50%{transform:translateY(-8px)}}
/* Section canvases: premium but restrained blue depth */
.metrics{position:relative;background:linear-gradient(90deg,#f8fbff,#eef6ff 48%,#f8fbff)!important;box-shadow:0 18px 55px rgba(10,54,148,.06)}
.metrics::before,.section-soft::before,.why-trilogix-section::before,.partners-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(33,118,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(33,118,255,.045) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);
}
.section,.section-soft,.why-trilogix-section,.partners-section{position:relative;isolation:isolate}
.section-soft{background:radial-gradient(circle at 12% 12%,rgba(33,118,255,.11),transparent 24rem),linear-gradient(180deg,#f8fbff,#eef5ff)!important}
.why-trilogix-section{background:radial-gradient(circle at 88% 16%,rgba(69,212,255,.08),transparent 22rem),#fff!important}
.partners-section{background:linear-gradient(180deg,#f2f7ff,#eaf3ff)!important}
.section-label{background:linear-gradient(90deg,#1455d9,#2187ff,#45bfff)!important;-webkit-background-clip:text!important;background-clip:text!important}
/* Cards: corporate glass-tech treatment */
.card-clean,.why-card-modern,.testimonial-rich,.journey-step,.outcome-card,.instructor-card,.project-card,.category-card{
  border-color:var(--premium-border)!important;
  box-shadow:0 14px 38px rgba(11,53,143,.08)!important;
}
.card-clean,.why-card-modern,.testimonial-rich,.journey-step,.outcome-card,.instructor-card,.project-card{position:relative;background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(244,249,255,.94))!important}
.card-clean::before,.why-card-modern::before,.testimonial-rich::before,.journey-step::before,.outcome-card::before,.instructor-card::before,.project-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:1;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(69,212,255,.16),transparent 34%);
  transition:opacity .25s ease;
}
.card-clean:hover::before,.why-card-modern:hover::before,.testimonial-rich:hover::before,.journey-step:hover::before,.outcome-card:hover::before,.instructor-card:hover::before,.project-card:hover::before{opacity:1}
.card-clean:hover,.why-card-modern:hover,.testimonial-rich:hover,.journey-step:hover,.outcome-card:hover,.instructor-card:hover,.project-card:hover{transform:translateY(-7px)!important;border-color:rgba(33,118,255,.42)!important;box-shadow:0 25px 60px rgba(7,45,131,.16)!important}
.card-clean::after,.why-card-modern::after,.journey-step::after,.outcome-card::after,.instructor-card::after,.project-card::after{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:99px;background:linear-gradient(90deg,transparent,#2176ff,#45d4ff,transparent);opacity:.78;z-index:2}
.course-img::after,.campus-img::after{background:linear-gradient(180deg,rgba(8,48,133,.02),rgba(11,67,180,.18) 58%,rgba(4,31,91,.48))!important}
.category-card{background:linear-gradient(145deg,#fff,#f4f8ff)!important;overflow:hidden}
.category-card::after{content:"";position:absolute;width:80px;height:80px;right:-36px;bottom:-42px;border:1px solid rgba(33,118,255,.18);border-radius:50%;box-shadow:0 0 0 14px rgba(33,118,255,.035),0 0 0 28px rgba(33,118,255,.025)}
.category-icon,.why-icon-solid,.journey-number,.project-icon,.instructor-icon{background:linear-gradient(145deg,#0e48c2,#2187ff)!important;color:#fff!important;box-shadow:0 10px 24px rgba(20,85,217,.22)!important}
.mini-primary,.review-badge{background:linear-gradient(135deg,#0e48c2,#2187ff)!important;color:#fff!important}
/* CTA and footer */
.cta{background:linear-gradient(125deg,#071a4c,#0d3da8 52%,#1479ec)!important;border:1px solid rgba(121,190,255,.28);box-shadow:0 30px 75px rgba(5,31,96,.28)!important}
.cta::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(133,198,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(133,198,255,.09) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,transparent,#000);pointer-events:none}
.site-footer{position:relative;overflow:hidden;background:linear-gradient(150deg,#050f31,#091f58 55%,#0b347f)!important}
.site-footer::before{content:"";position:absolute;inset:0;opacity:.28;background-image:radial-gradient(circle at center,rgba(69,212,255,.5) 0 1px,transparent 1.5px);background-size:72px 72px;pointer-events:none}
.floating-advisor{background:linear-gradient(135deg,#0e48c2,#2187ff)!important;box-shadow:0 16px 36px rgba(10,64,184,.34)!important}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:991.98px){
  .hero{min-height:auto}.hero-inner{padding-top:5.8rem!important;padding-bottom:5.8rem!important}
  .hero-lab-panel{min-height:430px;margin-top:1rem}.lab-image-wrap{inset:15px}.hero-kpi-one{right:0}.hero-kpi-two{left:0}
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:575.98px){
  .hero h1{font-size:clamp(2.45rem,12vw,3.25rem)!important}.hero-lab-panel{min-height:390px}.lab-image-wrap{inset:12px 0 40px;transform:none}
  .hero-kpi{min-width:132px;padding:.75rem}.hero-kpi-one{top:20px;right:-4px}.hero-kpi-two{left:-4px;bottom:56px}.hero-kpi-three{right:-4px;bottom:4px}
  .lab-caption strong{font-size:1.18rem}.hero-circuit-layer{background-size:48px 48px,48px 48px,96px 96px}
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(prefers-reduced-motion:reduce){.hero-circuit-layer,.lab-scanline,.hero-kpi,.lab-status span{animation:none!important}}
/* === Refined premium blue homepage === */
:root{--electric:#1f7aff;--cyan:#53d7ff;--ice:#eaf5ff;--deep:#031b4e;--deep-2:#072d75}
body{background:#fff}
.section{position:relative}
.hero-premium{min-height:760px!important;display:flex;align-items:center;background:#031b4e!important;isolation:isolate}
.hero-carousel,.hero-carousel .carousel-inner,.hero-carousel .carousel-item,.hero-slide{position:absolute;inset:0;width:100%;height:100%}
.hero-carousel{z-index:-5}.hero-slide{background-position:center;background-size:cover;transform:scale(1.05);animation:heroZoom 9s ease-out both}
.hero-carousel .carousel-item.active .hero-slide{animation:heroZoom 9s ease-out both}

/* Animation sequence used by the component states that reference this name. */
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1.01)}}
.hero-blue-overlay{position:absolute;inset:0;z-index:-4;background:linear-gradient(90deg,rgba(2,19,57,.98) 0%,rgba(4,37,103,.91) 47%,rgba(10,61,157,.74) 100%),linear-gradient(180deg,rgba(2,18,54,.15),rgba(2,18,54,.72))}
.hero-circuit-overlay{position:absolute;inset:0;z-index:-3;opacity:.24;background-image:linear-gradient(rgba(95,191,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(95,191,255,.18) 1px,transparent 1px),radial-gradient(circle at center,rgba(98,220,255,.55) 1px,transparent 2px);background-size:72px 72px,72px 72px,144px 144px;mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.65) 55%,transparent 100%);animation:circuitDrift 22s linear infinite}

/* Animation sequence used by the component states that reference this name. */
@keyframes circuitDrift{to{background-position:72px 72px,72px 72px,144px 144px}}
.hero-glow{position:absolute;border-radius:50%;filter:blur(80px);z-index:-2;pointer-events:none}.hero-glow-one{width:420px;height:420px;right:7%;top:8%;background:rgba(31,122,255,.25)}.hero-glow-two{width:320px;height:320px;left:18%;bottom:-18%;background:rgba(83,215,255,.15)}
.hero-premium .hero-inner{width:100%;padding-top:8rem!important;padding-bottom:7rem!important;z-index:2}
.hero-premium h1{font-size:clamp(3rem,6.2vw,5.25rem)!important;line-height:.98!important;max-width:760px}.hero-premium h1 span{background:linear-gradient(90deg,#fff,#9bdfff);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}
.hero-lead{max-width:680px!important;font-size:1.08rem!important;color:rgba(234,245,255,.84)!important}
.hero-command-card{position:relative;padding:1.35rem;border:1px solid rgba(150,213,255,.26);border-radius:24px;background:linear-gradient(145deg,rgba(7,45,117,.74),rgba(3,21,64,.70));box-shadow:0 32px 90px rgba(0,10,40,.36),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(18px);overflow:hidden}
.hero-command-card:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(116,220,255,.10) 50%,transparent 75%);transform:translateX(-100%);animation:cardScan 6s ease-in-out infinite}@keyframes cardScan{50%,100%{transform:translateX(100%)}}
.command-topline{position:relative;display:flex;justify-content:space-between;align-items:center;color:#ccecff;font-size:.76rem;text-transform:uppercase;letter-spacing:.12em}.command-live{display:flex;align-items:center;gap:.4rem}.command-live i{width:7px;height:7px;border-radius:50%;background:#65e8ff;box-shadow:0 0 16px #65e8ff;animation:pulseLive 1.8s infinite}@keyframes pulseLive{50%{opacity:.35}}
.command-main{position:relative;padding:2rem .25rem 1.5rem}.command-main small{display:block;color:#81cfff;text-transform:uppercase;letter-spacing:.12em;font-weight:700}.command-main strong{display:block;margin-top:.5rem;font-family:"Plus Jakarta Sans";font-size:2rem;line-height:1.2;color:#fff}
.command-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.command-grid>div{padding:1rem;border:1px solid rgba(133,205,255,.15);border-radius:14px;background:rgba(7,45,119,.34)}.command-grid i{color:#61d7ff}.command-grid strong{display:block;margin-top:.4rem;font-size:1.25rem;color:#fff}.command-grid span{font-size:.7rem;color:#a9c9ee}.command-progress{position:relative;height:3px;margin-top:1.2rem;background:rgba(255,255,255,.08);overflow:hidden}.command-progress span{display:block;width:42%;height:100%;background:linear-gradient(90deg,#1f7aff,#65e8ff);animation:progressMove 3.8s ease-in-out infinite}@keyframes progressMove{50%{transform:translateX(135%)}}
.hero-carousel-controls{display:flex;gap:.55rem;margin-top:2.4rem}.hero-carousel-controls button{width:34px;height:4px;border:0;border-radius:99px;background:rgba(255,255,255,.28);padding:0}.hero-carousel-controls button.active{background:#67ddff;width:58px}
.global-overview{background:radial-gradient(circle at 88% 10%,rgba(31,122,255,.09),transparent 28%),#fff}.premium-link{display:inline-flex;align-items:center;gap:.35rem;color:var(--primary);font-weight:700}.campus-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.campus-overview-card{display:grid;grid-template-columns:44% 56%;min-height:330px;border:1px solid #dce8f6;border-radius:24px;overflow:hidden;background:linear-gradient(145deg,#fff,#f5faff);box-shadow:0 20px 50px rgba(8,46,123,.09);transition:.35s ease}.campus-overview-card:hover{transform:translateY(-7px);box-shadow:0 30px 70px rgba(8,46,123,.16)}.campus-overview-media{position:relative;overflow:hidden}.campus-overview-media img{width:100%;height:100%;object-fit:cover;transition:.5s ease}.campus-overview-card:hover img{transform:scale(1.06)}.country-chip{position:absolute;top:1rem;left:1rem;padding:.4rem .7rem;border-radius:999px;background:rgba(255,255,255,.92);font-size:.72rem;font-weight:800;color:#073b91}.campus-overview-copy{padding:2rem;display:flex;flex-direction:column;justify-content:center}.campus-overview-copy .eyebrow{color:#1672e6;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.campus-overview-copy h3{margin:.55rem 0;font-size:1.35rem}.campus-overview-copy p{color:var(--muted);font-size:.88rem}.campus-overview-copy a{margin-top:.5rem;color:#0758c6;font-weight:800;font-size:.84rem}
.products-teaser{padding-top:1rem!important;background:#fff}.product-showcase{position:relative;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;min-height:520px;padding:4rem;border-radius:30px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#031b4e,#063b99 55%,#0c68d8);box-shadow:0 34px 90px rgba(3,35,105,.25)}.product-showcase:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(109,206,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(109,206,255,.12) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,transparent,#000)}.product-copy,.product-visual{position:relative;z-index:1}.light-label{color:#74dfff!important}.product-copy h2{font-size:clamp(2.1rem,4vw,3.25rem);margin:.7rem 0}.product-copy p{max-width:620px;color:rgba(232,245,255,.78);line-height:1.75}.product-features{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.4rem 0 2rem}.product-features span{padding:.45rem .75rem;border:1px solid rgba(138,213,255,.18);border-radius:999px;background:rgba(5,38,105,.28);font-size:.78rem}.product-visual{min-height:360px;display:grid;place-items:center}.product-device{width:230px;height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid rgba(154,222,255,.35);border-radius:30px;background:linear-gradient(145deg,rgba(21,92,209,.72),rgba(4,30,88,.78));box-shadow:0 30px 70px rgba(0,15,57,.38),inset 0 1px rgba(255,255,255,.12);transform:rotate(-4deg)}.product-device i{font-size:3rem;color:#71e3ff}.product-device strong{margin-top:1rem}.product-device span{margin-top:.4rem;padding:0 1rem;color:#b8daf7;font-size:.73rem}.product-orbit{position:absolute;border:1px solid rgba(111,216,255,.2);border-radius:50%;animation:orbitSpin 18s linear infinite}.orbit-one{width:330px;height:330px}.orbit-two{width:410px;height:410px;animation-direction:reverse}@keyframes orbitSpin{to{transform:rotate(360deg)}}.product-float{position:absolute;padding:.65rem .9rem;border:1px solid rgba(155,222,255,.25);border-radius:12px;background:rgba(4,36,102,.76);box-shadow:0 15px 35px rgba(0,16,58,.25);font-size:.78rem}.pf-one{top:20%;left:5%}.pf-two{right:3%;top:34%}.pf-three{bottom:14%;left:12%}
.gallery-mosaic{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:240px 240px;gap:1rem}.gallery-tile{position:relative;overflow:hidden;border-radius:20px;box-shadow:0 16px 40px rgba(12,49,112,.12)}.gallery-large{grid-row:1/3}.gallery-tile img{width:100%;height:100%;object-fit:cover;transition:.5s ease}.gallery-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(2,23,66,.92))}.gallery-tile span{position:absolute;z-index:2;left:1.3rem;right:1.3rem;bottom:1.2rem;color:#fff}.gallery-tile b,.gallery-tile small{display:block}.gallery-tile small{margin-top:.2rem;color:#c6def8}.gallery-tile:hover img{transform:scale(1.06)}
.section-soft{background:radial-gradient(circle at 12% 10%,rgba(31,122,255,.07),transparent 23%),linear-gradient(180deg,#f8fbff,#f2f7fd)!important}.card-clean,.why-card-modern,.testimonial-rich,.journey-step,.project-card,.category-card{box-shadow:0 14px 38px rgba(7,49,126,.08)!important}.card-clean:hover,.why-card-modern:hover,.testimonial-rich:hover,.journey-step:hover,.project-card:hover,.category-card:hover{box-shadow:0 24px 58px rgba(7,49,126,.15)!important}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:991.98px){.hero-premium{min-height:auto!important}.hero-premium .hero-inner{padding-top:6rem!important}.campus-overview-grid,.product-showcase{grid-template-columns:1fr}.campus-overview-card{grid-template-columns:1fr}.campus-overview-media{height:230px}.product-showcase{padding:2.5rem}.product-visual{min-height:320px}.gallery-mosaic{grid-template-columns:1fr;grid-template-rows:360px 240px 240px}.gallery-large{grid-row:auto}}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:575.98px){.hero-premium h1{font-size:2.75rem!important}.hero-command-card{margin-top:.5rem}.product-showcase{padding:1.5rem;border-radius:22px}.product-device{width:190px;height:190px}.orbit-one{width:260px;height:260px}.orbit-two{width:310px;height:310px}.gallery-mosaic{grid-template-rows:290px 220px 220px}.campus-overview-copy{padding:1.4rem}.hero-carousel-controls{margin-top:1.5rem}}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(prefers-reduced-motion:reduce){.hero-slide,.hero-circuit-overlay,.hero-command-card:before,.command-live i,.command-progress span,.product-orbit{animation:none!important}}
/* Hero refinement */
.hero-premium .hero-inner{padding-top:6.5rem!important;padding-bottom:6.5rem!important}
.hero-premium .hero-blue-overlay{background:linear-gradient(90deg,rgba(3,22,67,.94) 0%,rgba(5,36,100,.82) 46%,rgba(4,30,82,.42) 72%,rgba(3,22,67,.54) 100%)!important}
.hero-premium .hero-circuit-overlay{opacity:.2!important}
.hero-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:470px;margin-left:auto}
.hero-stat-card{min-height:126px;display:flex;align-items:center;gap:1rem;padding:1.25rem;border:1px solid rgba(255,255,255,.20);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.055));box-shadow:0 18px 45px rgba(0,10,45,.20);backdrop-filter:blur(14px);transition:transform .3s ease,border-color .3s ease,background .3s ease}
.hero-stat-card:hover{transform:translateY(-5px);border-color:rgba(140,204,255,.52);background:linear-gradient(145deg,rgba(255,255,255,.19),rgba(81,157,255,.09))}
.hero-stat-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;background:linear-gradient(135deg,#e9f5ff,#a9d6ff);color:#063f9d;font-size:1.05rem;box-shadow:0 8px 20px rgba(0,87,184,.22)}
.hero-stat-card strong{display:block;color:#fff;font-family:"Plus Jakarta Sans",sans-serif;font-size:1.45rem;line-height:1.1}.hero-stat-card small{display:block;margin-top:.3rem;color:rgba(255,255,255,.72);font-size:.73rem}
.hero-points{gap:.75rem 1rem!important}.hero-points span{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .72rem;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(5,37,97,.32);color:rgba(255,255,255,.86)!important;backdrop-filter:blur(8px)}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:991.98px){.hero-stat-grid{max-width:none;margin:0}.hero-premium .hero-blue-overlay{background:linear-gradient(180deg,rgba(3,22,67,.92),rgba(5,36,100,.74))!important}}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:575.98px){.hero-stat-grid{grid-template-columns:1fr 1fr;gap:.7rem}.hero-stat-card{min-height:105px;padding:.85rem;gap:.65rem}.hero-stat-icon{width:36px;height:36px}.hero-stat-card strong{font-size:1.2rem}.hero-stat-card small{font-size:.65rem}}
/* Premium category system */
.category-premium-section{position:relative;overflow:hidden;background:linear-gradient(180deg,#f7faff 0%,#eef5ff 100%)}
.category-premium-section::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.24;background-image:linear-gradient(rgba(17,83,181,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(17,83,181,.08) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)}
.category-premium-section .container-page{position:relative}.category-premium-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.category-premium-card{position:relative;min-height:154px;display:flex;align-items:center;gap:1rem;padding:1.35rem;border:1px solid #d5e2f4;border-radius:18px;background:rgba(255,255,255,.9);color:#14213d;box-shadow:0 12px 32px rgba(17,60,130,.07);overflow:hidden;transition:.28s ease}
.category-premium-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#0a4ec7,#3ba7ff);transform:scaleY(.35);transition:.28s ease}.category-premium-card:hover{transform:translateY(-5px);border-color:#8db8f5;box-shadow:0 22px 48px rgba(17,60,130,.14);color:#083f9d}.category-premium-card:hover::before{transform:scaleY(1)}
.category-premium-card.category-featured{background:linear-gradient(135deg,#062b72,#0b59d2);border-color:transparent;color:#fff;box-shadow:0 20px 48px rgba(7,61,157,.24)}.category-premium-card.category-featured small{color:rgba(255,255,255,.72)!important}.category-premium-card.category-featured .category-premium-icon{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.18)}
.category-number{position:absolute;top:.75rem;right:1rem;color:#adc4e3;font-size:.65rem;font-weight:800;letter-spacing:.12em}.category-featured .category-number{color:rgba(255,255,255,.45)}
.category-premium-icon{width:52px;height:52px;display:grid;place-items:center;flex:0 0 auto;border:1px solid #d8e7fb;border-radius:15px;background:#edf5ff;color:#0754c5;font-size:1.25rem}.category-premium-card strong{display:block;font-size:1rem}.category-premium-card small{display:block;margin-top:.3rem;color:#66758c;font-size:.76rem;line-height:1.45}.category-arrow{position:absolute;right:1rem;bottom:1rem;opacity:.35;transition:.25s}.category-premium-card:hover .category-arrow{opacity:1;transform:translate(2px,-2px)}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:991.98px){.category-premium-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:575.98px){.category-premium-grid{grid-template-columns:1fr}.category-premium-card{min-height:126px}}
/* Learning panel: blue-only and white heading */
.proof-panel{background:radial-gradient(circle at 90% 5%,rgba(74,172,255,.26),transparent 30%),linear-gradient(145deg,#041d52,#0752bc)!important}.proof-panel .section-title,.proof-panel h2{color:#fff!important}.proof-panel::after{filter:hue-rotate(0deg)!important}.proof-panel{border-color:rgba(112,189,255,.26)!important}
/* Ecommerce product showcase */
.product-commerce-section{background:#fff}.btn-products-all{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:46px;padding:.75rem 1.2rem;border-radius:10px;background:#0752bc;color:#fff;font-weight:700;box-shadow:0 10px 24px rgba(7,82,188,.2)}.btn-products-all:hover{color:#fff;transform:translateY(-2px);background:#053f99}
.commerce-card{height:100%;overflow:hidden;border:1px solid #dbe6f4;border-radius:18px;background:#fff;box-shadow:0 13px 34px rgba(7,49,126,.08);transition:.3s ease}.commerce-card:hover{transform:translateY(-6px);border-color:#8db8f5;box-shadow:0 24px 54px rgba(7,49,126,.16)}
.commerce-image{position:relative;height:230px;overflow:hidden;background:#eaf2fd}.commerce-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(4,32,86,.28))}.commerce-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.commerce-card:hover .commerce-image img{transform:scale(1.055)}.commerce-badge{position:absolute;z-index:2;top:1rem;left:1rem;padding:.35rem .65rem;border-radius:999px;background:rgba(255,255,255,.94);color:#0648b2;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;box-shadow:0 6px 16px rgba(0,28,82,.12)}
.commerce-body{padding:1.35rem}.commerce-body>small{color:#1161c9;font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.commerce-body h3{margin:.45rem 0 .55rem;font-size:1.05rem;font-weight:800}.commerce-body p{min-height:66px;margin:0;color:#667085;font-size:.84rem;line-height:1.6}.commerce-body a{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;color:#0752bc;font-size:.8rem;font-weight:800}.commerce-card:hover .commerce-body a{gap:.7rem}
.product-carousel-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2rem}.product-carousel-nav>button{width:42px;height:42px;border:1px solid #cedcf0;border-radius:50%;background:#fff;color:#0752bc;box-shadow:0 7px 18px rgba(7,49,126,.08)}.product-carousel-nav>button:hover{background:#0752bc;color:#fff}.product-carousel-dots{display:flex;gap:.45rem}.product-carousel-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:#acc2df}.product-carousel-dots button.active{width:24px;background:#0752bc}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:767.98px){.product-carousel .carousel-item .col-12:not(:first-child){display:none}.commerce-image{height:250px}.commerce-body p{min-height:auto}}
/* Testimonials polish */
.testimonial-rich{box-shadow:0 10px 30px rgba(7,49,126,.07)!important;border-color:#dce6f3!important;transform:none!important}.testimonial-rich::before{display:none!important}.testimonial-rich:hover{transform:translateY(-4px)!important;box-shadow:0 18px 42px rgba(7,49,126,.12)!important;border-color:#a4c2eb!important}.testimonial-rich figcaption img{width:54px!important;height:54px!important;border:3px solid #edf4fd!important;box-shadow:0 5px 14px rgba(7,49,126,.12)}.testimonial-rich blockquote{color:#344054!important}
/* CTA breathing room */
.final-cta-section{padding-top:5rem!important;padding-bottom:5rem!important;background:#fff}.final-cta-section .cta{margin-top:0!important}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:767.98px){.final-cta-section{padding-top:3.75rem!important;padding-bottom:3.75rem!important}}
.brand-icon{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#fff;
  padding:6px;
  box-shadow:0 10px 24px rgba(0,58,146,.18);
}
.brand-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}
/* Premium mobile navigation actions */

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (max-width: 991.98px){
  .mobile-menu{
    padding:1rem 0 1.25rem;
    background:rgba(255,255,255,.97);
    box-shadow:0 18px 42px rgba(6,30,90,.10);
    backdrop-filter:blur(16px);
  }
.mobile-menu .container-page{padding-top:.15rem}
.mobile-menu>a,.mobile-menu .container-page>a{
  margin:.15rem 0;
  padding:.78rem .9rem;
  border-radius:10px;
  color:#334155;
  font-weight:600;
}
.mobile-menu .container-page>a:hover,
.mobile-menu .container-page>a:focus-visible{
  background:#eef5ff;
  color:#0752bc;
}
.mobile-cta-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid #e4edf8;
}
.mobile-cta{
  position:relative;
  min-height:78px;
  display:grid!important;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:.75rem;
  width:100%;
  padding:.9rem;
  border-radius:14px!important;
  overflow:hidden;
  text-align:left;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.mobile-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(33,118,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(33,118,255,.06) 1px,transparent 1px);
  background-size:20px 20px;
}
.mobile-cta>*{position:relative;z-index:1}
.mobile-cta-icon{
  width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;
  border-radius:11px;font-size:1rem;
}
.mobile-cta-copy{display:block;min-width:0}
.mobile-cta-copy strong{display:block;font-size:.88rem;line-height:1.2}
.mobile-cta-copy small{display:block;margin-top:.18rem;font-size:.68rem;line-height:1.25;font-weight:500;opacity:.72}
.mobile-cta-arrow{font-size:.9rem;opacity:.78}
.mobile-cta-advisor{
  border:1px solid #cfe0f5;
  background:linear-gradient(145deg,#fff,#f4f8ff);
  color:#0b2c64!important;
  box-shadow:0 10px 24px rgba(7,49,126,.07);
}
.mobile-cta-advisor .mobile-cta-icon{background:#e8f2ff;color:#0752bc}
.mobile-cta-enroll{
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg,#073b91,#0b63ce);
  color:#fff!important;
  box-shadow:0 14px 30px rgba(7,82,188,.24);
}
.mobile-cta-enroll .mobile-cta-icon{background:rgba(255,255,255,.14);color:#fff}
.mobile-cta:hover,.mobile-cta:focus-visible{transform:translateY(-2px)}
.mobile-cta-advisor:hover,.mobile-cta-advisor:focus-visible{border-color:#93baf0;box-shadow:0 14px 30px rgba(7,49,126,.12)}
.mobile-cta-enroll:hover,.mobile-cta-enroll:focus-visible{box-shadow:0 18px 36px rgba(7,82,188,.30)}
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (max-width: 575.98px){
  .mobile-cta-panel{grid-template-columns:1fr}
  .mobile-cta{min-height:72px;padding:.82rem .9rem}
}