/* =========================================================
   KAMAL GROUP OF CORPORATE
   COMPLETE HOMEPAGE STYLESHEET
   ========================================================= */

/* =========================================================
   01. RESET
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  color: #14213d;
  background: #ffffff;
  line-height: 1.6;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  max-width: 100%;
}

img {
  display: block;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================================================
   02. VARIABLES
   ========================================================= */

:root {
  --navy: #081a33;
  --navy-2: #0b2447;
  --blue: #1769e0;
  --blue-dark: #0e4eb5;
  --blue-light: #3b82f6;
  --cyan: #06b6d4;
  --purple: #7c3aed;
  --green: #10b981;
  --orange: #f97316;

  --text: #14213d;
  --text-soft: #52617a;
  --text-muted: #718096;

  --white: #ffffff;
  --off-white: #f7f9fc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;

  --border: #e3e9f2;
  --border-dark: rgba(255, 255, 255, 0.12);

  --shadow-sm: 0 8px 25px rgba(8, 26, 51, 0.07);
  --shadow: 0 20px 60px rgba(8, 26, 51, 0.1);
  --shadow-lg: 0 30px 90px rgba(8, 26, 51, 0.16);

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;

  --container: 1240px;
  --header-height: 82px;

  --transition: 0.3s ease;
}

/* =========================================================
   03. GLOBAL UTILITIES
   ========================================================= */

.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

.section {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--blue);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.4;
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 58px;
}

.section-heading h2 {
  margin-bottom: 20px;
  color: var(--navy);
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.25rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.section-heading h2 span,
.hero-slide-content h1 span,
.why-modern-content h2 span,
.final-cta h2 span {
  color: var(--blue);
}

.section-heading p {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--text-soft);
  font-size: 1.04rem;
  line-height: 1.8;
}

.heading-with-link {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.section-link {
  flex-shrink: 0;
  margin-bottom: 10px;
  color: var(--blue);
  font-weight: 700;
  transition: var(--transition);
}

.section-link:hover {
  color: var(--navy);
  transform: translateX(4px);
}

/* =========================================================
   04. BUTTONS
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 700;
  white-space: nowrap;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    background var(--transition),
    color var(--transition),
    border-color var(--transition);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue), #245ee8);
  box-shadow: 0 12px 30px rgba(23, 105, 224, 0.25);
}

.btn-primary:hover {
  box-shadow: 0 18px 38px rgba(23, 105, 224, 0.32);
}

.btn-secondary {
  color: var(--navy);
  background: #ffffff;
  border-color: #d8e1ee;
}

.btn-secondary:hover {
  color: var(--blue);
  border-color: var(--blue);
}

.btn-light {
  color: var(--navy);
  background: #ffffff;
}

.btn-large {
  min-height: 56px;
  padding: 0 26px;
}

/* =========================================================
   05. HEADER
   ========================================================= */

.site-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(8, 26, 51, 0.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    background var(--transition),
    box-shadow var(--transition),
    height var(--transition);
}

.site-header.scrolled {
  height: 74px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 30px rgba(8, 26, 51, 0.08);
}

.header-inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 30px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.brand img {
  width: 180px;
  height: auto;
  object-fit: contain;
}

.main-navigation {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
}

.nav-item {
  position: static;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 100%;
  padding: 0 13px;
  color: #334155;
  background: transparent;
  border: 0;
  font-size: 0.88rem;
  font-weight: 700;
  transition: color var(--transition);
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-item:hover > .nav-link,
.nav-item:focus-within > .nav-link {
  color: var(--blue);
}

.nav-link svg {
  transition: transform var(--transition);
}

.nav-item:hover .nav-link svg,
.nav-item:focus-within .nav-link svg {
  transform: rotate(180deg);
}

/* =========================================================
   06. MEGA MENUS
   ========================================================= */

.mega-menu {
  position: absolute;
  z-index: 900;
  top: calc(100% - 1px);
  left: 50%;
  width: min(1180px, calc(100vw - 40px));
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s ease;
}

.mega-parent:hover .mega-menu,
.mega-parent:focus-within .mega-menu,
.mega-menu:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.mega-menu::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: translate(-50%, -50%) rotate(45deg);
}

.mega-inner {
  position: relative;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 42px;
  padding: 34px;
  background: rgba(255, 255, 255, 0.99);
  border: 1px solid var(--border);
  border-radius: 0 0 22px 22px;
  box-shadow: var(--shadow-lg);
}

.mega-intro {
  padding-right: 26px;
  border-right: 1px solid var(--border);
}

.mega-label {
  display: block;
  margin-bottom: 13px;
  color: var(--blue);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.mega-intro h3 {
  margin-bottom: 12px;
  color: var(--navy);
  font-family: "Manrope", sans-serif;
  font-size: 1.35rem;
  line-height: 1.25;
}

.mega-intro p {
  margin-bottom: 20px;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.7;
}

.mega-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-size: 0.82rem;
  font-weight: 800;
}

.mega-view-all span {
  transition: transform var(--transition);
}

.mega-view-all:hover span {
  transform: translateX(4px);
}

.mega-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

.mega-column {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mega-product {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px;
  border-radius: 12px;
  transition:
    background var(--transition),
    transform var(--transition);
}

.mega-product:hover {
  background: #f5f8fd;
  transform: translateX(4px);
}

.mega-icon,
.solution-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  border-radius: 12px;
  font-size: 1.05rem;
}

.mega-icon.blue,
.solution-icon.blue {
  background: #eaf2ff;
}

.mega-icon.purple,
.solution-icon.purple {
  background: #f1eaff;
}

.mega-icon.green,
.solution-icon.green {
  background: #e8faf4;
}

.mega-icon.orange,
.solution-icon.orange {
  background: #fff1e7;
}

.mega-icon.cyan {
  background: #e6fafd;
}

.mega-icon.dark {
  color: #ffffff;
  background: var(--navy);
}

.mega-product strong,
.mega-solution strong,
.resource-menu-card strong,
.company-menu-links strong {
  display: block;
  color: var(--navy);
  font-size: 0.84rem;
  line-height: 1.3;
}

.mega-product small,
.mega-solution small,
.resource-menu-card small,
.company-menu-links small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

/* SOLUTIONS */

.mega-solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mega-solution {
  display: flex;
  gap: 13px;
  padding: 15px;
  border: 1px solid transparent;
  border-radius: 14px;
  transition: var(--transition);
}

.mega-solution:hover {
  background: #f7faff;
  border-color: #dfe9f8;
  transform: translateY(-2px);
}

/* INDUSTRIES */

.mega-industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.industry-menu-card {
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fbfcfe;
  transition: var(--transition);
}

.industry-menu-card:hover {
  background: var(--navy);
  border-color: var(--navy);
  transform: translateY(-3px);
}

.industry-menu-card > span {
  margin-bottom: auto;
  color: #9aa8bc;
  font-size: 0.68rem;
  font-weight: 800;
}

.industry-menu-card strong {
  color: var(--navy);
  font-size: 0.85rem;
}

.industry-menu-card small {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.7rem;
}

.industry-menu-card:hover strong,
.industry-menu-card:hover small {
  color: #ffffff;
}

/* RESOURCES */

.resource-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.resource-menu-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: var(--transition);
}

.resource-menu-card:hover {
  background: #f6f9ff;
  border-color: #d6e3f8;
  transform: translateY(-3px);
}

.resource-menu-card > span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--blue);
  background: #edf4ff;
  border-radius: 9px;
  font-weight: 800;
}

/* COMPANY */

.company-menu-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.company-menu-links a {
  padding: 17px;
  border-radius: 13px;
  transition: var(--transition);
}

.company-menu-links a:hover {
  background: #f5f8fd;
  transform: translateX(4px);
}

/* =========================================================
   07. HEADER ACTIONS & MOBILE BUTTON
   ========================================================= */

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.header-contact {
  color: var(--navy);
  font-size: 0.86rem;
  font-weight: 700;
}

.header-contact:hover {
  color: var(--blue);
}

.header-demo {
  min-height: 44px;
  padding-inline: 18px;
  font-size: 0.8rem;
}

.mobile-menu-button {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  margin-left: auto;
}

.mobile-menu-button span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px auto;
  border-radius: 999px;
  background: var(--navy);
  transition: var(--transition);
}

.mobile-menu-button[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.mobile-menu-button[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-button[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* =========================================================
   08. MOBILE NAVIGATION DRAWER & SUBMENUS
   ========================================================= */

.mobile-navigation {
  position: fixed;
  top: 70px;
  top: var(--header-height, 70px);
  left: 0;
  width: 100%;
  height: calc(100vh - 70px);
  height: calc(100vh - var(--header-height, 70px));
  background-color: #ffffff;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateX(-100%);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.3s ease,
    visibility 0.3s ease;
  z-index: 9999;
}

.mobile-navigation.active {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

body.menu-open {
  overflow: hidden;
}

.mobile-navigation a {
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 0;
}

.mobile-nav-group {
  display: flex;
  flex-direction: column;
}

.mobile-nav-trigger {
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  padding: 10px 0;
  cursor: pointer;
  text-align: left;
}

/* Ensures internal icons or labels don't intercept click detection */
.mobile-nav-trigger * {
  pointer-events: none;
}

.mobile-submenu {
  display: none;
  flex-direction: column;
  padding-left: 15px;
  gap: 8px;
  margin-top: 5px;
}

.mobile-nav-group.open .mobile-submenu {
  display: flex;
}

.mobile-submenu a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted, #64748b);
}

.mobile-demo-button {
  margin-top: 15px;
  background: var(--blue);
  color: #fff !important;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
}

/* =========================================================
   RESPONSIVE MEDIA QUERY (Activation switch for Mobile view)
   ========================================================= */
@media (max-width: 991px) {
  .main-navigation,
  .header-actions .header-contact,
  .header-actions .header-demo {
    display: none !important;
  }

  .mobile-menu-button {
    display: block;
  }
}
/* =========================================================
   09. HERO
   ========================================================= */

.hero-slider {
  position: relative;
  min-height: 820px;
  padding-top: var(--header-height);
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 80% 30%,
      rgba(23, 105, 224, 0.24),
      transparent 32%
    ),
    radial-gradient(circle at 15% 70%, rgba(6, 182, 212, 0.1), transparent 28%),
    #06162d;
}

.hero-slider-background {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(to bottom, black, transparent);
}

.hero-slide {
  position: absolute;
  inset: var(--header-height) 0 0;
  min-height: 738px;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(60px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease,
    visibility 0.8s ease;
}

.hero-slide.active {
  position: relative;
  inset: auto;
  min-height: 738px;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  z-index: 2;
}

.hero-slide.previous-slide {
  transform: translateX(-60px);
}

.hero-slide-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 65px;
  padding-top: 75px;
  padding-bottom: 115px;
}

.hero-slide-content {
  position: relative;
  z-index: 5;
}

.hero-eyebrow {
  color: #78b4ff;
}

.hero-slide-content h1 {
  max-width: 680px;
  margin-bottom: 24px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(3rem, 5vw, 5.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.hero-slide-content h1 span {
  display: block;
}

.hero-slide-content p {
  max-width: 620px;
  margin-bottom: 32px;
  color: #b6c6dc;
  font-size: 1.05rem;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-bottom: 38px;
}

.hero-slide .btn-secondary {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}

.hero-slide .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}

.hero-mini-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

.hero-mini-trust > div {
  min-width: 110px;
  padding-right: 25px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-mini-trust > div:last-child {
  border-right: 0;
}

.hero-mini-trust strong {
  display: block;
  margin-bottom: 2px;
  color: #ffffff;
  font-size: 0.92rem;
}

.hero-mini-trust span {
  display: block;
  color: #91a5c0;
  font-size: 0.68rem;
  line-height: 1.4;
}

/* =========================================================
   10. HERO BUSINESS DASHBOARD
   ========================================================= */

.hero-product-visual,
.education-visual,
.hr-visual,
.supply-visual {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visual-glow,
.education-glow,
.hr-glow,
.supply-glow {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: rgba(23, 105, 224, 0.22);
  filter: blur(70px);
}

.dashboard-window {
  position: relative;
  z-index: 4;
  width: min(620px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  background: rgba(16, 34, 61, 0.92);
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px);
}

.window-top {
  height: 45px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 16px;
  color: #8ea2bd;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.window-top b {
  margin-left: auto;
  color: #45d59f;
  font-size: 0.55rem;
}

.window-dots {
  display: flex;
  gap: 5px;
}

.window-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
}

.window-dots i:nth-child(2) {
  background: #f59e0b;
}

.window-dots i:nth-child(3) {
  background: #10b981;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 130px 1fr;
  min-height: 390px;
}

.dashboard-sidebar {
  padding: 20px 12px;
  background: rgba(3, 14, 31, 0.55);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.side-logo {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  margin: 0 auto 25px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border-radius: 9px;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
}

.dashboard-sidebar span {
  display: block;
  margin-bottom: 12px;
  padding: 7px 8px;
  color: #7287a3;
  border-radius: 7px;
  font-size: 0.61rem;
}

.dashboard-sidebar .side-active {
  color: #ffffff;
  background: rgba(59, 130, 246, 0.18);
}

.dashboard-main {
  padding: 25px;
}

.dashboard-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.dashboard-title small {
  display: block;
  margin-bottom: 4px;
  color: #7287a3;
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.dashboard-title h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1rem;
}

.dashboard-user {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #1f416d;
  border-radius: 50%;
  font-size: 0.58rem;
  font-weight: 800;
}

.metric-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.metric-box {
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
}

.metric-box small {
  display: block;
  margin-bottom: 4px;
  color: #7187a4;
  font-size: 0.57rem;
}

.metric-box strong {
  display: block;
  margin-bottom: 2px;
  color: #ffffff;
  font-size: 1rem;
}

.metric-up {
  color: #42d69e;
  font-size: 0.58rem;
  font-weight: 700;
}

.chart-box {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.chart-header strong {
  color: #ffffff;
  font-size: 0.66rem;
}

.chart-header span {
  color: #7187a4;
  font-size: 0.55rem;
}

.chart {
  height: 100px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 5px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.chart span {
  flex: 1;
  min-height: 12px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(to top, #1769e0, #55a4ff);
}

.dashboard-bottom {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 13px;
  color: #7187a4;
  font-size: 0.58rem;
}

.dashboard-bottom strong {
  display: block;
  color: #4ade80;
  font-size: 0.68rem;
}

.health-bar {
  flex: 1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.health-bar span {
  display: block;
  width: 92%;
  height: 100%;
  background: linear-gradient(90deg, #10b981, #4ade80);
}

/* FLOATING HERO CARDS */

.floating-product-card {
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 145px;
  padding: 12px 14px;
  color: #ffffff;
  background: rgba(17, 35, 61, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

.floating-product-card strong {
  display: block;
  font-size: 0.69rem;
}

.floating-product-card small {
  display: block;
  margin-top: 2px;
  color: #8ea2bd;
  font-size: 0.57rem;
}

.floating-check,
.floating-arrow,
.floating-chart-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  color: #ffffff;
  background: linear-gradient(135deg, #1769e0, #7c3aed);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 800;
}

.floating-one {
  top: 8%;
  left: -4%;
}

.floating-two {
  right: -4%;
  bottom: 20%;
}

.floating-three {
  right: 3%;
  top: 8%;
}

.hero-orbit {
  position: absolute;
  border: 1px solid rgba(75, 148, 255, 0.18);
  border-radius: 50%;
  pointer-events: none;
}

.orbit-one {
  width: 480px;
  height: 480px;
}

.orbit-two {
  width: 640px;
  height: 640px;
  border-color: rgba(124, 58, 237, 0.12);
}

/* =========================================================
   11. EDUCATION VISUAL
   ========================================================= */

.education-panel {
  position: relative;
  z-index: 4;
  width: min(620px, 100%);
  padding: 22px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 22px;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.25);
}

.edu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.edu-brand {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, #1769e0, #7c3aed);
  border-radius: 10px;
  font-weight: 800;
}

.edu-header small {
  display: block;
  color: var(--text-muted);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.edu-header strong {
  display: block;
  color: var(--navy);
  font-size: 0.8rem;
}

.online-label {
  margin-left: auto;
  color: var(--green);
  font-size: 0.6rem;
  font-weight: 800;
}

.edu-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 15px;
}

.edu-stat-grid > div {
  padding: 14px;
  background: #f7f9fc;
  border-radius: 12px;
}

.edu-stat-grid small,
.edu-stat-grid strong,
.edu-stat-grid span {
  display: block;
}

.edu-stat-grid small {
  color: var(--text-muted);
  font-size: 0.58rem;
}

.edu-stat-grid strong {
  margin: 4px 0;
  color: var(--navy);
  font-size: 1.1rem;
}

.edu-stat-grid span {
  color: var(--green);
  font-size: 0.57rem;
  font-weight: 700;
}

.edu-attendance-chart {
  margin-top: 12px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.edu-chart-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.edu-chart-header strong {
  font-size: 0.68rem;
}

.edu-chart-header span {
  color: var(--text-muted);
  font-size: 0.56rem;
}

.edu-bars {
  height: 100px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.edu-bars i {
  flex: 1;
  min-height: 12px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(to top, #1769e0, #72b0ff);
}

.student-list {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.student-list-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
}

.student-list-header strong {
  font-size: 0.68rem;
}

.student-list-header span {
  color: var(--blue);
  font-size: 0.56rem;
  font-weight: 700;
}

.student-row {
  display: grid;
  grid-template-columns: 27px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-top: 1px solid #eef2f7;
}

.student-row span {
  color: var(--text-soft);
  font-size: 0.6rem;
}

.student-row b {
  color: var(--text-muted);
  font-size: 0.55rem;
}

.student-avatar {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
  font-size: 0.58rem;
  font-weight: 800;
}

.blue-avatar {
  color: #1769e0;
  background: #e7f0ff;
}

.purple-avatar {
  color: #7c3aed;
  background: #f0eaff;
}

.green-avatar {
  color: #059669;
  background: #e5faf3;
}

.education-floating {
  position: absolute;
  z-index: 8;
  left: -4%;
  bottom: 12%;
  min-width: 130px;
  padding: 15px;
  color: var(--navy);
  background: #ffffff;
  border-radius: 13px;
  box-shadow: var(--shadow-lg);
}

.education-floating strong,
.education-floating span {
  display: block;
}

.education-floating strong {
  font-size: 1.2rem;
}

.education-floating span {
  color: var(--text-muted);
  font-size: 0.6rem;
}

.mini-progress {
  width: 100%;
  height: 5px;
  margin-top: 9px;
  overflow: hidden;
  background: #e8edf4;
  border-radius: 999px;
}

.mini-progress span {
  width: 95%;
  height: 100%;
  background: var(--green);
}

.education-floating-two {
  left: auto;
  right: -3%;
  bottom: 26%;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 170px;
}

.edu-floating-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: var(--green);
  border-radius: 8px;
}

.education-floating-two strong {
  font-size: 0.65rem;
}

.education-floating-two span {
  font-size: 0.55rem;
}

/* =========================================================
   12. HR VISUAL
   ========================================================= */

.hr-dashboard {
  position: relative;
  z-index: 4;
  width: min(620px, 100%);
  padding: 22px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}

.hr-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.hr-top small {
  color: var(--blue);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.hr-top h3 {
  margin: 3px 0 0;
  font-family: "Manrope", sans-serif;
  font-size: 1.1rem;
}

.hr-top > span {
  padding: 6px 9px;
  color: var(--text-muted);
  background: #f4f7fb;
  border-radius: 7px;
  font-size: 0.56rem;
}

.hr-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 15px;
}

.hr-metrics > div {
  padding: 13px;
  background: #f7f9fc;
  border-radius: 12px;
}

.hr-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  margin-bottom: 9px;
  border-radius: 8px;
  font-size: 0.65rem;
}

.hr-icon.blue {
  color: #1769e0;
  background: #e8f1ff;
}

.hr-icon.green {
  color: #059669;
  background: #e7faf2;
}

.hr-icon.purple {
  color: #7c3aed;
  background: #f0eaff;
}

.hr-metrics small,
.hr-metrics strong {
  display: block;
}

.hr-metrics small {
  color: var(--text-muted);
  font-size: 0.56rem;
}

.hr-metrics strong {
  margin-top: 3px;
  font-size: 0.92rem;
}

.employee-chart {
  position: relative;
  height: 180px;
  margin-top: 12px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.employee-chart-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
}

.employee-chart-top strong {
  font-size: 0.67rem;
}

.employee-chart-top span {
  color: var(--green);
  font-size: 0.58rem;
  font-weight: 800;
}

.employee-lines {
  position: absolute;
  inset: 42px 14px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.employee-lines i {
  width: 100%;
  height: 1px;
  background: #edf1f6;
}

.hr-line-chart {
  position: absolute;
  inset: 42px 14px 14px;
  width: calc(100% - 28px);
  height: 125px;
}

.hr-bottom-insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.hr-bottom-insights > div {
  padding: 12px;
  background: #f7f9fc;
  border-radius: 10px;
}

.hr-bottom-insights small,
.hr-bottom-insights strong {
  display: block;
}

.hr-bottom-insights small {
  color: var(--text-muted);
  font-size: 0.53rem;
}

.hr-bottom-insights strong {
  margin-top: 2px;
  font-size: 0.9rem;
}

.hr-floating {
  position: absolute;
  z-index: 8;
  left: -4%;
  bottom: 13%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 175px;
  padding: 13px;
  color: var(--navy);
  background: #ffffff;
  border-radius: 13px;
  box-shadow: var(--shadow-lg);
}

.hr-floating > span {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: var(--green);
  border-radius: 8px;
}

.hr-floating strong,
.hr-floating small {
  display: block;
}

.hr-floating strong {
  font-size: 0.65rem;
}

.hr-floating small {
  color: var(--text-muted);
  font-size: 0.55rem;
}

.hr-floating-two {
  left: auto;
  right: -4%;
  bottom: 29%;
}

.hr-mini-avatar {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border-radius: 50%;
  font-size: 0.55rem;
  font-weight: 800;
}

/* =========================================================
   13. SUPPLY CHAIN VISUAL
   ========================================================= */

.supply-map-card {
  position: relative;
  z-index: 4;
  width: min(620px, 100%);
  overflow: hidden;
  color: var(--navy);
  background: #ffffff;
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}

.supply-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.supply-header small,
.supply-header strong {
  display: block;
}

.supply-header small {
  color: var(--blue);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.supply-header strong {
  margin-top: 3px;
  font-size: 0.9rem;
}

.supply-header > span {
  padding: 6px 9px;
  color: var(--green);
  background: #e9faf3;
  border-radius: 7px;
  font-size: 0.55rem;
  font-weight: 800;
}

.route-map {
  position: relative;
  height: 320px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at center,
      rgba(23, 105, 224, 0.08),
      transparent 40%
    ),
    #f7faff;
}

.map-grid {
  position: absolute;
  inset: 0;
  opacity: 0.7;
  background-image:
    linear-gradient(#dfe8f3 1px, transparent 1px),
    linear-gradient(90deg, #dfe8f3 1px, transparent 1px);
  background-size: 35px 35px;
}

.route-line {
  position: absolute;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  opacity: 0.7;
}

.line-a {
  width: 250px;
  top: 46%;
  left: 19%;
  transform: rotate(-15deg);
}

.line-b {
  width: 230px;
  top: 48%;
  left: 45%;
  transform: rotate(17deg);
}

.line-c {
  width: 270px;
  top: 56%;
  left: 22%;
  transform: rotate(25deg);
}

.map-node {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.map-node i {
  width: 12px;
  height: 12px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(23, 105, 224, 0.13);
}

.map-node span {
  color: var(--text-soft);
  font-size: 0.57rem;
  font-weight: 700;
}

.node-a {
  left: 17%;
  top: 38%;
}

.node-b {
  left: 45%;
  top: 26%;
}

.node-c {
  right: 17%;
  top: 45%;
}

.node-d {
  left: 53%;
  bottom: 15%;
}

.shipment-center {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 110px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border: 8px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 15px 40px rgba(23, 105, 224, 0.3);
}

.shipment-center span {
  font-family: "Manrope", sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
}

.shipment-center small {
  font-size: 0.47rem;
  letter-spacing: 0.07em;
}

.supply-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}

.supply-footer > div {
  padding: 17px;
  background: #ffffff;
}

.supply-footer small,
.supply-footer strong {
  display: block;
}

.supply-footer small {
  color: var(--text-muted);
  font-size: 0.51rem;
}

.supply-footer strong {
  margin-top: 4px;
  font-size: 0.95rem;
}

.shipment-floating {
  position: absolute;
  z-index: 8;
  left: -4%;
  bottom: 13%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
  padding: 13px;
  background: #ffffff;
  border-radius: 13px;
  box-shadow: var(--shadow-lg);
}

.shipment-floating > span {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: var(--green);
  border-radius: 8px;
}

.shipment-floating strong,
.shipment-floating small {
  display: block;
}

.shipment-floating strong {
  font-size: 0.65rem;
}

.shipment-floating small {
  color: var(--text-muted);
  font-size: 0.55rem;
}

.shipment-floating-two {
  left: auto;
  right: -4%;
  bottom: 29%;
}

.shipment-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: var(--blue);
  border-radius: 8px;
}

/* =========================================================
   14. HERO CONTROLS
   ========================================================= */

.hero-controls {
  position: absolute;
  z-index: 20;
  bottom: 55px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transform: translateX(-50%);
}

.hero-arrow {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  transition: var(--transition);
}

.hero-arrow:hover {
  background: var(--blue);
  border-color: var(--blue);
}

.hero-dashes {
  display: flex;
  gap: 7px;
}

.hero-dash {
  width: 28px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  transition: var(--transition);
}

.hero-dash.active {
  width: 48px;
  background: #ffffff;
}

.hero-scroll-indicator {
  position: absolute;
  z-index: 10;
  right: 28px;
  bottom: 55px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #7389a7;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
}

.hero-scroll-indicator i {
  width: 1px;
  height: 42px;
  background: #7389a7;
}

/* =========================================================
   15. INDUSTRY STRIP
   ========================================================= */

.industry-strip {
  padding: 27px 0;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}

.industry-strip p {
  margin-bottom: 17px;
  color: var(--text-muted);
  text-align: center;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.industry-strip-items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.industry-strip-items span {
  padding: 0 28px;
  color: #65748a;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-right: 1px solid var(--border);
}

.industry-strip-items span:last-child {
  border-right: 0;
}

/* =========================================================
   16. PRODUCT ECOSYSTEM
   ========================================================= */

.ecosystem-section {
  background: #f7f9fc;
}

.product-showcase {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 22px;
}

.product-showcase-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-tab {
  width: 100%;
  display: grid;
  grid-template-columns: 35px 1fr 20px;
  align-items: center;
  gap: 12px;
  padding: 17px;
  text-align: left;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 13px;
  transition: var(--transition);
}

.product-tab > span {
  color: #a0adbd;
  font-size: 0.65rem;
  font-weight: 800;
}

.product-tab strong,
.product-tab small {
  display: block;
}

.product-tab strong {
  color: var(--navy);
  font-size: 0.82rem;
}

.product-tab small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.62rem;
}

.product-tab b {
  color: #9aa8bb;
  transition: var(--transition);
}

.product-tab:hover,
.product-tab.active {
  color: #ffffff;
  background: var(--navy);
  border-color: var(--navy);
  transform: translateX(4px);
  box-shadow: var(--shadow);
}

.product-tab:hover strong,
.product-tab.active strong {
  color: #ffffff;
}

.product-tab:hover small,
.product-tab.active small {
  color: #94a9c4;
}

.product-tab:hover > span,
.product-tab.active > span,
.product-tab:hover b,
.product-tab.active b {
  color: #62a8ff;
}

.product-showcase-display {
  position: relative;
  min-height: 490px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-radius: 24px;
  color: #ffffff;
  background: var(--navy);
}

.product-display-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 80% 45%,
      rgba(23, 105, 224, 0.35),
      transparent 34%
    ),
    radial-gradient(
      circle at 25% 70%,
      rgba(124, 58, 237, 0.22),
      transparent 30%
    );
}

.product-display-content {
  position: relative;
  z-index: 4;
  width: 52%;
  padding: 55px;
}

.display-label {
  color: #62a8ff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.product-display-content h3 {
  margin: 14px 0 16px;
  font-family: "Manrope", sans-serif;
  font-size: 2.1rem;
  line-height: 1.1;
}

.product-display-content p {
  color: #a8bad1;
  font-size: 0.9rem;
  line-height: 1.7;
}

.display-metrics {
  display: flex;
  gap: 28px;
  margin: 28px 0;
}

.display-metrics strong,
.display-metrics span {
  display: block;
}

.display-metrics strong {
  color: #ffffff;
  font-size: 1.15rem;
}

.display-metrics span {
  color: #7890ad;
  font-size: 0.58rem;
}

.display-link {
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
}

.display-link:hover {
  color: #62a8ff;
}

.display-orbit {
  position: absolute;
  right: -50px;
  width: 410px;
  height: 410px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

.display-orbit::before,
.display-orbit::after {
  content: "";
  position: absolute;
  inset: 45px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.display-orbit::after {
  inset: 105px;
}

.orbit-core,
.orbit-product {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.orbit-core {
  top: 50%;
  left: 50%;
  width: 95px;
  height: 95px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  transform: translate(-50%, -50%);
  box-shadow: 0 20px 50px rgba(23, 105, 224, 0.3);
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-weight: 800;
}

.orbit-product {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.op-one {
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
}

.op-two {
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

.op-three {
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
}

.op-four {
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
}

/* =========================================================
   17. CAPABILITIES
   ========================================================= */

.capabilities-section {
  background: #ffffff;
}

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

.capability-card {
  position: relative;
  min-height: 300px;
  padding: 30px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 18px;
  transition: var(--transition);
}

.capability-card:hover {
  transform: translateY(-7px);
  border-color: #cbdcf4;
  box-shadow: var(--shadow);
}

.capability-number {
  position: absolute;
  top: 25px;
  right: 25px;
  color: #dce4ef;
  font-size: 0.7rem;
  font-weight: 800;
}

.capability-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 25px;
  background: #edf4ff;
  border-radius: 13px;
  font-size: 1.15rem;
}

.capability-card h3 {
  margin-bottom: 11px;
  color: var(--navy);
  font-family: "Manrope", sans-serif;
  font-size: 1.1rem;
}

.capability-card p {
  margin-bottom: 20px;
  color: var(--text-soft);
  font-size: 0.84rem;
  line-height: 1.7;
}

.capability-card a {
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 800;
}

/* =========================================================
   18. ARCHITECTURE
   ========================================================= */

.architecture-section {
  background: #f7f9fc;
}

.architecture-wrapper {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 70px;
  padding: 65px;
  overflow: hidden;
  color: #ffffff;
  background: var(--navy);
  border-radius: 28px;
}

.architecture-content h2 {
  max-width: 570px;
  margin-bottom: 18px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.1rem, 4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.architecture-content h2 span {
  color: #62a8ff;
}

.architecture-content > p {
  max-width: 530px;
  color: #9bb0c9;
  font-size: 0.9rem;
  line-height: 1.8;
}

.architecture-list {
  margin-top: 30px;
}

.architecture-list > div {
  display: flex;
  gap: 15px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.architecture-list > div > span {
  color: #62a8ff;
  font-size: 0.65rem;
  font-weight: 800;
}

.architecture-list strong,
.architecture-list small {
  display: block;
}

.architecture-list strong {
  margin-bottom: 3px;
  color: #ffffff;
  font-size: 0.78rem;
}

.architecture-list small {
  color: #7890ad;
  font-size: 0.65rem;
}

.architecture-visual {
  position: relative;
  min-height: 430px;
}

.architecture-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(98, 168, 255, 0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ring-one {
  width: 330px;
  height: 330px;
}

.ring-two {
  width: 230px;
  height: 230px;
  border-style: dashed;
}

.architecture-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: 145px;
  height: 145px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  text-align: center;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border-radius: 50%;
  box-shadow: 0 25px 60px rgba(23, 105, 224, 0.3);
}

.architecture-center span {
  font-family: "Manrope", sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
}

.architecture-center strong {
  font-size: 0.7rem;
}

.architecture-center small {
  margin-top: 2px;
  color: #c4d7ef;
  font-size: 0.5rem;
}

.architecture-node {
  position: absolute;
  z-index: 5;
  min-width: 100px;
  padding: 9px 12px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  text-align: center;
  font-size: 0.58rem;
  font-weight: 700;
}

.architecture-node span {
  display: block;
  margin-bottom: 2px;
  font-size: 0.9rem;
}

.arch-one {
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
}

.arch-two {
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
}

.arch-three {
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
}

.arch-four {
  top: 50%;
  left: 2%;
  transform: translateY(-50%);
}

/* =========================================================
   19. INDUSTRIES
   ========================================================= */

.industries-section {
  background: #ffffff;
}

.industries-modern-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  grid-auto-rows: minmax(250px, auto);
  gap: 18px;
}

.modern-industry-card {
  position: relative;
  display: block;
  padding: 30px;
  overflow: hidden;
  color: var(--navy);
  background: #f7f9fc;
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: var(--transition);
}

.modern-industry-card:hover {
  color: #ffffff;
  background: var(--navy);
  border-color: var(--navy);
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.large-card {
  grid-row: span 2;
}

.wide-card {
  grid-column: span 2;
}

.industry-card-number {
  color: #a2aec0;
  font-size: 0.7rem;
  font-weight: 800;
}

.industry-card-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 35px 0 20px;
  background: #ffffff;
  border-radius: 13px;
  font-size: 1.3rem;
}

.modern-industry-card:hover .industry-card-icon {
  background: rgba(255, 255, 255, 0.1);
}

.modern-industry-card h3 {
  margin-bottom: 10px;
  font-family: "Manrope", sans-serif;
  font-size: 1.25rem;
}

.modern-industry-card p {
  max-width: 500px;
  margin-bottom: 0;
  color: var(--text-soft);
  font-size: 0.8rem;
  line-height: 1.7;
}

.modern-industry-card:hover p {
  color: #9bb0c9;
}

.industry-arrow {
  position: absolute;
  right: 28px;
  bottom: 25px;
  color: var(--blue);
  font-size: 1.2rem;
  font-weight: 700;
  transition: var(--transition);
}

.modern-industry-card:hover .industry-arrow {
  color: #ffffff;
  transform: translateX(5px);
}

/* =========================================================
   20. PROCESS
   ========================================================= */

.process-section {
  background: #f7f9fc;
}

.process-modern-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.process-modern-card {
  position: relative;
  min-height: 245px;
  padding: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 18px;
}

.process-modern-card > span {
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 800;
}

.process-line {
  width: 40px;
  height: 2px;
  margin: 25px 0;
  background: var(--blue);
}

.process-modern-card h3 {
  margin-bottom: 10px;
  color: var(--navy);
  font-family: "Manrope", sans-serif;
  font-size: 1.1rem;
}

.process-modern-card p {
  color: var(--text-soft);
  font-size: 0.82rem;
  line-height: 1.7;
}

/* =========================================================
   21. WHY KAMAL
   ========================================================= */

.why-section {
  background: #ffffff;
}

.why-modern-grid {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  align-items: center;
  gap: 80px;
}

.why-modern-content h2 {
  max-width: 620px;
  margin-bottom: 20px;
  color: var(--navy);
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.why-modern-content > p {
  max-width: 620px;
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.8;
}

.why-points {
  margin-top: 32px;
}

.why-points > div {
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 15px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.why-points > div > span {
  color: var(--blue);
  font-size: 0.68rem;
  font-weight: 800;
}

.why-points h3 {
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.why-points p {
  margin-bottom: 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.6;
}

.why-stat-visual {
  position: relative;
  min-height: 500px;
  display: grid;
  place-items: center;
}

.why-stat-glow {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(23, 105, 224, 0.15);
  filter: blur(65px);
}

.why-stat-card {
  position: relative;
  z-index: 2;
  width: min(400px, 100%);
  padding: 45px;
  color: #ffffff;
  background: linear-gradient(145deg, #0b2447, #081a33);
  border-radius: 25px;
  box-shadow: var(--shadow-lg);
}

.why-stat-card > span {
  display: block;
  margin-bottom: 25px;
  color: #62a8ff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.why-stat-card > strong {
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  line-height: 1.15;
}

.stat-divider {
  height: 1px;
  margin: 30px 0 15px;
  background: rgba(255, 255, 255, 0.1);
}

.stat-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  color: #9bb0c9;
  font-size: 0.73rem;
}

.stat-list b {
  color: #4ade80;
}

/* =========================================================
   22. METRICS
   ========================================================= */

.metrics-section {
  padding: 75px 0;
  color: #ffffff;
  background: var(--navy);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.metric-large {
  padding: 15px 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.metric-large:first-child {
  padding-left: 0;
}

.metric-large:last-child {
  border-right: 0;
}

.metric-large strong,
.metric-large span {
  display: block;
}

.metric-large strong {
  margin-bottom: 5px;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 2.1rem;
  line-height: 1;
}

.metric-large span {
  color: #8ea2bd;
  font-size: 0.68rem;
}

/* =========================================================
   23. CASE STUDIES
   ========================================================= */

.case-studies-section {
  background: #f7f9fc;
}

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

.case-modern-card {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 18px;
  transition: var(--transition);
}

.case-modern-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.case-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}

.case-top span {
  color: var(--blue);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.case-top b {
  color: #b2bece;
  font-size: 0.65rem;
}

.case-modern-card h3 {
  margin-bottom: 12px;
  color: var(--navy);
  font-family: "Manrope", sans-serif;
  font-size: 1.15rem;
  line-height: 1.3;
}

.case-modern-card p {
  margin-bottom: 20px;
  color: var(--text-soft);
  font-size: 0.8rem;
  line-height: 1.7;
}

.case-modern-card a {
  margin-top: auto;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 800;
}

/* =========================================================
   24. FINAL CTA
   ========================================================= */

.final-cta {
  position: relative;
  padding: 125px 0;
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 75% 50%,
      rgba(59, 130, 246, 0.25),
      transparent 30%
    ),
    var(--navy);
}

.final-cta-grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 55px 55px;
}

.final-cta-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  text-align: center;
  margin: auto;
}

.final-cta .eyebrow {
  color: #62a8ff;
}

.final-cta h2 {
  margin-bottom: 20px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.final-cta p {
  max-width: 650px;
  margin: 0 auto 30px;
  color: #9fb1c9;
  font-size: 1rem;
  line-height: 1.8;
}

.final-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
}

.final-text-link {
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
}

.final-text-link:hover {
  color: #62a8ff;
}

/* =========================================================
   25. FOOTER
   ========================================================= */

.site-footer {
  padding: 20px 0px;
  color: #9aacc3;
  background: #061326;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr repeat(5, 1fr);
  gap: 35px;
  padding-bottom: 60px;
}

.footer-brand img {
  width: 180px;
  margin-bottom: 20px;
  filter: brightness(0) invert(1);
}

.footer-brand p {
  max-width: 290px;
  margin-bottom: 0;
  color: #758aa5;
  font-size: 0.75rem;
  line-height: 1.8;
}

.footer-column h3 {
  margin-bottom: 17px;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
}

.footer-column a {
  display: block;
  width: fit-content;
  margin-bottom: 10px;
  color: #7e93ad;
  font-size: 0.7rem;
  line-height: 1.5;
  transition: var(--transition);
}

.footer-column a:hover {
  color: #62a8ff;
  transform: translateX(3px);
}

.footer-bottom {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom p {
  margin: 0;
  color: #627892;
  font-size: 0.65rem;
}

.footer-bottom > div {
  display: flex;
  gap: 22px;
}

.footer-bottom a {
  color: #627892;
  font-size: 0.65rem;
}

.footer-bottom a:hover {
  color: #62a8ff;
}

/* =========================================================
   26. REVEAL ANIMATION
   IMPORTANT:
   Elements remain visible even if JS does not execute.
   ========================================================= */

.reveal {
  opacity: 1;
  transform: translateY(0);
}

.js-enabled .reveal {
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.js-enabled .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   27. FOCUS
   ========================================================= */

a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.35);
  outline-offset: 3px;
}

/* =========================================================
   28. TABLET
   ========================================================= */

@media (max-width: 1150px) {
  .main-navigation {
    gap: 0;
  }

  .nav-link {
    padding-inline: 9px;
    font-size: 0.79rem;
  }

  .header-actions {
    gap: 10px;
  }

  .header-contact {
    display: none;
  }

  .hero-slide-grid {
    gap: 35px;
  }

  .hero-slide-content h1 {
    font-size: clamp(2.7rem, 5vw, 4.5rem);
  }

  .mega-inner {
    grid-template-columns: 240px 1fr;
  }

  .footer-grid {
    grid-template-columns: 1.5fr repeat(3, 1fr);
  }
}

/* =========================================================
   29. TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 980px) {
  :root {
    --header-height: 74px;
  }

  .main-navigation,
  .header-actions {
    display: none;
  }

  .mobile-menu-button {
    display: block;
    margin-left: auto;
  }

  .mobile-navigation {
    position: fixed;
    z-index: 999;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    padding: 18px 24px 30px;
    overflow-y: auto;
    background: #ffffff;
    border-top: 1px solid var(--border);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: var(--transition);
  }

  .mobile-navigation.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-navigation > a,
  .mobile-nav-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 4px;
    color: var(--navy);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }

  /* Ensures internal child elements within the trigger don't block click events */
  .mobile-nav-trigger * {
    pointer-events: none;
  }

  .mobile-nav-trigger span {
    color: var(--blue);
    font-size: 1.3rem;
    transition: var(--transition);
  }

  .mobile-nav-group.open .mobile-nav-trigger span {
    transform: rotate(45deg);
  }

  .mobile-submenu {
    max-height: 0;
    overflow: hidden;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    transition: max-height 0.35s ease;
  }

  .mobile-nav-group.open .mobile-submenu {
    max-height: 500px; /* Safe expanded height limit for transitions */
  }

  .mobile-submenu a {
    display: block;
    padding: 11px 0;
    color: var(--text-soft);
    font-size: 0.8rem;
    border-bottom: 1px solid #f0f3f7;
    text-decoration: none;
  }

  .mobile-submenu a:hover {
    color: var(--blue);
  }

  .mobile-demo-button {
    justify-content: center !important;
    margin-top: 18px;
    padding: 14px !important;
    color: #ffffff !important;
    background: var(--blue) !important;
    border: 0 !important;
    border-radius: 9px;
  }

  .hero-slider {
    min-height: 850px;
  }

  .hero-slide {
    min-height: 780px;
  }

  .hero-slide.active {
    min-height: 780px;
  }

  .hero-slide-grid {
    grid-template-columns: 1fr;
    padding-top: 50px;
    padding-bottom: 100px;
  }

  .hero-slide-content {
    max-width: 760px;
    margin: auto;
    text-align: center;
  }

  .hero-slide-content p {
    margin-inline: auto;
  }

  .hero-actions,
  .hero-mini-trust {
    justify-content: center;
  }

  .hero-product-visual,
  .education-visual,
  .hr-visual,
  .supply-visual {
    min-height: 420px;
  }

  .product-showcase {
    grid-template-columns: 1fr;
  }

  .product-showcase-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

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

  .architecture-wrapper,
  .why-modern-grid {
    grid-template-columns: 1fr;
  }

  .architecture-wrapper {
    gap: 30px;
  }

  .industries-modern-grid {
    grid-template-columns: 1fr 1fr;
  }

  .large-card {
    grid-row: auto;
  }

  .wide-card {
    grid-column: span 2;
  }

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

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
  }

  .metric-large:nth-child(2) {
    border-right: 0;
  }

  .case-modern-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-brand {
    grid-column: span 3;
  }
}

/* =========================================================
   30. MOBILE
   ========================================================= */

@media (max-width: 700px) {
  .container {
    width: min(calc(100% - 32px), var(--container));
  }

  .section {
    padding: 80px 0;
  }

  .site-header {
    height: 70px;
  }

  .site-header.scrolled {
    height: 68px;
  }

  :root {
    --header-height: 70px;
  }

  .brand img {
    width: 145px;
  }

  .mobile-navigation {
    top: 70px;
    padding-inline: 18px;
  }

  .section-heading {
    margin-bottom: 40px;
  }

  .section-heading h2 {
    font-size: 2.2rem;
  }

  .heading-with-link {
    display: block;
  }

  .section-link {
    display: inline-block;
    margin-top: 5px;
  }

  .hero-slider {
    min-height: 930px;
  }

  .hero-slide {
    min-height: 850px;
  }

  .hero-slide.active {
    min-height: 850px;
  }

  .hero-slide-grid {
    padding-top: 55px;
    padding-bottom: 100px;
  }

  .hero-slide-content h1 {
    font-size: clamp(2.45rem, 12vw, 3.6rem);
  }

  .hero-slide-content p {
    font-size: 0.9rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-mini-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .hero-mini-trust > div {
    padding-right: 12px;
  }

  .hero-product-visual,
  .education-visual,
  .hr-visual,
  .supply-visual {
    min-height: 360px;
    transform: scale(0.9);
  }

  .dashboard-layout {
    grid-template-columns: 80px 1fr;
  }

  .dashboard-sidebar {
    padding-inline: 7px;
  }

  .dashboard-main {
    padding: 15px;
  }

  .dashboard-sidebar span {
    font-size: 0.5rem;
  }

  .floating-one,
  .education-floating,
  .hr-floating,
  .shipment-floating {
    left: -3%;
  }

  .floating-two,
  .floating-three,
  .education-floating-two,
  .hr-floating-two,
  .shipment-floating-two {
    right: -3%;
  }

  .hero-scroll-indicator {
    display: none;
  }

  .hero-controls {
    bottom: 30px;
  }

  .industry-strip-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .industry-strip-items span {
    padding: 0;
    border: 0;
    text-align: center;
    font-size: 0.62rem;
  }

  .product-showcase-nav {
    grid-template-columns: 1fr;
  }

  .product-showcase-display {
    min-height: 560px;
  }

  .product-display-content {
    width: 100%;
    padding: 35px;
    align-self: flex-start;
  }

  .display-orbit {
    right: 50%;
    bottom: -130px;
    transform: translateX(50%);
  }

  .capability-grid,
  .industries-modern-grid,
  .process-modern-grid,
  .case-modern-grid {
    grid-template-columns: 1fr;
  }

  .wide-card {
    grid-column: auto;
  }

  .architecture-wrapper {
    padding: 35px 25px;
  }

  .architecture-visual {
    min-height: 340px;
  }

  .ring-one {
    width: 260px;
    height: 260px;
  }

  .ring-two {
    width: 180px;
    height: 180px;
  }

  .architecture-center {
    width: 120px;
    height: 120px;
  }

  .architecture-node {
    min-width: 80px;
    padding: 7px;
    font-size: 0.5rem;
  }

  .why-stat-card {
    padding: 35px;
  }

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

  .metric-large {
    padding-inline: 15px;
  }

  .metric-large:first-child {
    padding-left: 15px;
  }

  .metric-large:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }

  .metric-large:nth-child(even) {
    border-right: 0;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 35px 25px;
  }

  .footer-brand {
    grid-column: span 2;
  }

  .footer-bottom {
    padding: 20px 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .final-cta {
    padding: 90px 0;
  }

  .final-cta-actions {
    flex-direction: column;
  }

  .final-cta-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   31. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
  .hero-slide-content h1 {
    font-size: 2.45rem;
  }

  .hero-mini-trust {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .hero-mini-trust > div {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
  }

  .hero-product-visual,
  .education-visual,
  .hr-visual,
  .supply-visual {
    transform: scale(0.76);
    transform-origin: top center;
    min-height: 300px;
  }

  .floating-product-card,
  .education-floating,
  .hr-floating,
  .shipment-floating {
    display: none;
  }

  .metric-row,
  .edu-stat-grid,
  .hr-metrics,
  .hr-bottom-insights {
    grid-template-columns: 1fr;
  }

  .dashboard-sidebar {
    display: none;
  }

  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .product-display-content {
    padding: 30px 25px;
  }

  .display-metrics {
    gap: 15px;
  }

  .architecture-node {
    display: none;
  }

  .architecture-center {
    width: 130px;
    height: 130px;
  }

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

  .metric-large {
    padding: 20px 0;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .metric-large:last-child {
    border-bottom: 0;
  }

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

  .footer-brand {
    grid-column: auto;
  }

  .footer-bottom > div {
    flex-wrap: wrap;
  }
}

/* =========================================================
   32. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ABOUT COMPANY */
/* =========================================================
   KAMAL GROUP OF CORPORATE
   ABOUT PAGE
   Complete Page Styles
========================================================= */

/* =========================================================
   01. ABOUT PAGE VARIABLES
========================================================= */

.about-page {
  --about-navy: #081a33;
  --about-navy-deep: #061426;
  --about-navy-light: #0b2342;

  --about-blue: #2563eb;
  --about-blue-light: #60a5fa;
  --about-indigo: #7c3aed;
  --about-purple: #a78bfa;

  --about-text: #0f172a;
  --about-muted: #64748b;
  --about-light: #f7f9fc;
  --about-border: #e5eaf1;

  --about-white: #ffffff;

  --about-container: 1280px;

  --about-radius-sm: 8px;
  --about-radius-md: 14px;
  --about-radius-lg: 18px;

  --about-shadow-sm: 0 10px 30px rgba(8, 26, 51, 0.06);

  --about-shadow-md: 0 20px 50px rgba(8, 26, 51, 0.08);

  --about-shadow-lg: 0 30px 80px rgba(8, 26, 51, 0.14);
}

/* =========================================================
   02. BASE
========================================================= */

.about-page {
  overflow-x: hidden;
  color: var(--about-text);
  background: #ffffff;
}

.about-page *,
.about-page *::before,
.about-page *::after {
  box-sizing: border-box;
}

.about-page img {
  max-width: 100%;
  height: auto;
}

.about-page a {
  -webkit-tap-highlight-color: transparent;
}

.about-page button,
.about-page a {
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* =========================================================
   03. CONTAINER
========================================================= */

.about-page .container {
  width: min(calc(100% - 48px), var(--about-container));

  margin-inline: auto;
}

/* =========================================================
   04. GLOBAL SECTION
========================================================= */

.about-page .section {
  position: relative;

  padding-top: 110px;
  padding-bottom: 110px;
}

.about-page .section-heading {
  max-width: 760px;

  margin-bottom: 60px;
}

.about-page .section-heading .eyebrow {
  margin-bottom: 18px;
}

.about-page .section-heading h2 {
  margin: 0;

  font-family: "Manrope", sans-serif;

  font-size: clamp(38px, 4.5vw, 58px);

  line-height: 1.08;

  letter-spacing: -0.045em;

  color: var(--about-navy);
}

.about-page .section-heading h2 span {
  display: block;

  color: var(--about-blue);
}

.about-page .section-heading p {
  max-width: 650px;

  margin: 22px 0 0;

  color: var(--about-muted);

  font-size: 16px;

  line-height: 1.8;
}

/* =========================================================
   05. EYEBROW
========================================================= */

.about-page .eyebrow {
  display: inline-block;

  color: var(--about-blue);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.18em;

  line-height: 1.4;

  text-transform: uppercase;
}

/* =========================================================
   06. BUTTONS
========================================================= */

.about-page .btn {
  min-height: 52px;

  padding: 0 23px;

  display: inline-flex;

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

  gap: 10px;

  border: 1px solid transparent;

  border-radius: 8px;

  font-family: inherit;

  font-size: 14px;

  font-weight: 700;

  text-decoration: none;

  cursor: pointer;
}

.about-page .btn span {
  font-size: 18px;

  line-height: 1;

  transition: transform 0.25s ease;
}

.about-page .btn:hover span {
  transform: translateX(4px);
}

.about-page .btn-primary {
  background: var(--about-blue);

  color: #ffffff;

  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
}

.about-page .btn-primary:hover {
  background: #1d4ed8;

  transform: translateY(-2px);

  box-shadow: 0 16px 35px rgba(37, 99, 235, 0.32);
}

.about-page .btn-secondary {
  border-color: rgba(255, 255, 255, 0.18);

  background: rgba(255, 255, 255, 0.04);

  color: #ffffff;
}

.about-page .btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.35);

  background: rgba(255, 255, 255, 0.09);

  transform: translateY(-2px);
}

.about-page .btn-light {
  background: #ffffff;

  color: var(--about-navy);
}

.about-page .btn-light:hover {
  background: #eff6ff;

  color: var(--about-blue);

  transform: translateY(-2px);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}

.about-page .btn-large {
  min-height: 56px;

  padding-inline: 27px;

  font-size: 15px;
}

/* =========================================================
   07. HERO
========================================================= */

.about-hero {
  position: relative;

  min-height: 720px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 80% 35%,
      rgba(59, 130, 246, 0.16),
      transparent 35%
    ),
    linear-gradient(135deg, #061426 0%, #081a33 55%, #0b2342 100%);

  color: #ffffff;
}

/* =========================================================
   HERO BACKGROUND GRID
========================================================= */

.about-hero-bg {
  position: absolute;

  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);

  background-size: 60px 60px;

  mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 100%);

  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 45%,
    transparent 100%
  );
}

/* =========================================================
   HERO CONTAINER
========================================================= */

.about-hero-container {
  position: relative;

  z-index: 2;

  width: min(calc(100% - 48px), var(--about-container));

  min-height: 720px;

  margin-inline: auto;

  padding-top: 90px;
  padding-bottom: 90px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, 0.9fr);

  align-items: center;

  gap: 70px;
}

/* =========================================================
   HERO CONTENT
========================================================= */

.about-hero-content {
  max-width: 680px;
}

.about-hero-content .eyebrow {
  margin-bottom: 22px;

  color: var(--about-blue-light);
}

.about-hero-content h1 {
  margin: 0;

  font-family: "Manrope", sans-serif;

  font-size: clamp(48px, 5vw, 76px);

  font-weight: 800;

  line-height: 1.02;

  letter-spacing: -0.055em;
}

.about-hero-content h1 span {
  display: block;

  background: linear-gradient(90deg, #60a5fa, #a78bfa);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;
}

.about-hero-content > p {
  max-width: 620px;

  margin: 28px 0 0;

  color: rgba(255, 255, 255, 0.72);

  font-size: 18px;

  line-height: 1.8;
}

/* =========================================================
   HERO ACTIONS
========================================================= */

.about-hero-actions {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-top: 34px;
}

/* =========================================================
   HERO TRUST / STATS
========================================================= */

.about-hero-trust {
  display: flex;

  gap: 45px;

  margin-top: 55px;

  padding-top: 25px;

  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.about-hero-trust > div {
  display: flex;

  flex-direction: column;

  gap: 5px;

  transition: transform 0.25s ease;
}

.about-hero-trust > div.stat-active {
  transform: translateY(-4px);
}

.about-hero-trust strong {
  font-family: "Manrope", sans-serif;

  font-size: 23px;

  line-height: 1;

  color: #ffffff;
}

.about-hero-trust span {
  color: rgba(255, 255, 255, 0.55);

  font-size: 12px;

  line-height: 1.4;
}

/* =========================================================
   HERO VISUAL
========================================================= */

.about-hero-visual {
  position: relative;

  min-height: 500px;

  display: flex;

  align-items: center;

  justify-content: center;
}

.about-visual-glow {
  position: absolute;

  width: 430px;

  height: 430px;

  border-radius: 50%;

  background: #2563eb;

  filter: blur(110px);

  opacity: 0.18;

  pointer-events: none;
}

/* =========================================================
   PLATFORM CARD
========================================================= */

.about-platform-card {
  position: relative;

  z-index: 2;

  width: min(100%, 520px);

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 18px;

  background: rgba(12, 30, 55, 0.85);

  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);
}

/* =========================================================
   PLATFORM CARD HEADER
========================================================= */

.about-card-header {
  min-height: 76px;

  padding: 18px 20px;

  display: flex;

  align-items: center;

  gap: 13px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.about-card-logo {
  width: 40px;

  height: 40px;

  flex: 0 0 40px;

  display: grid;

  place-items: center;

  border-radius: 10px;

  background: linear-gradient(135deg, #2563eb, #7c3aed);

  color: #ffffff;

  font-weight: 800;

  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

.about-card-header > div:nth-child(2) {
  display: flex;

  flex-direction: column;

  gap: 3px;

  min-width: 0;
}

.about-card-header small {
  color: rgba(255, 255, 255, 0.45);

  font-size: 9px;

  letter-spacing: 0.15em;
}

.about-card-header strong {
  color: #ffffff;

  font-size: 13px;
}

.about-live {
  margin-left: auto;

  color: #4ade80;

  white-space: nowrap;

  font-size: 10px;

  font-weight: 700;
}

/* =========================================================
   PLATFORM BODY
========================================================= */

.about-platform-body {
  position: relative;

  min-height: 340px;

  background: radial-gradient(
    circle at center,
    rgba(37, 99, 235, 0.08),
    transparent 55%
  );
}

/* =========================================================
   PLATFORM CENTER
========================================================= */

.about-platform-center {
  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  width: 150px;

  height: 150px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(96, 165, 250, 0.3);

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(30, 64, 175, 0.34),
    rgba(30, 64, 175, 0.16)
  );

  box-shadow: 0 0 60px rgba(59, 130, 246, 0.18);

  text-align: center;
}

.about-platform-center::before {
  content: "";

  position: absolute;

  inset: -15px;

  border: 1px dashed rgba(96, 165, 250, 0.16);

  border-radius: 50%;
}

.about-platform-center span {
  font-size: 35px;

  font-weight: 800;

  line-height: 1;

  color: #60a5fa;
}

.about-platform-center strong {
  margin-top: 6px;

  color: #ffffff;

  font-size: 13px;
}

.about-platform-center small {
  max-width: 90px;

  margin-top: 4px;

  color: rgba(255, 255, 255, 0.45);

  font-size: 9px;

  line-height: 1.4;
}

/* =========================================================
   PLATFORM NODES
========================================================= */

.about-platform-node {
  position: absolute;

  min-width: 115px;

  padding: 10px 13px;

  display: flex;

  align-items: center;

  gap: 8px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 9px;

  background: rgba(255, 255, 255, 0.055);

  color: rgba(255, 255, 255, 0.8);

  font-size: 11px;

  font-weight: 600;

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

.about-platform-node:hover {
  border-color: rgba(96, 165, 250, 0.3);

  background: rgba(255, 255, 255, 0.09);

  transform: translateY(-3px);
}

.about-platform-node span {
  font-size: 17px;

  line-height: 1;
}

.node-education {
  top: 55px;

  left: 35px;
}

.node-hr {
  top: 55px;

  right: 35px;
}

.node-business {
  bottom: 55px;

  left: 35px;
}

.node-supply {
  bottom: 55px;

  right: 35px;
}

/* =========================================================
   PLATFORM FOOTER
========================================================= */

.about-card-footer {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.about-card-footer div {
  min-width: 0;

  padding: 18px;

  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.about-card-footer div:last-child {
  border-right: 0;
}

.about-card-footer small {
  display: block;

  margin-bottom: 5px;

  color: rgba(255, 255, 255, 0.4);

  font-size: 8px;

  letter-spacing: 0.1em;
}

.about-card-footer strong {
  color: #ffffff;

  font-size: 14px;
}

/* =========================================================
   08. OUR STORY
========================================================= */

.about-story {
  background: #ffffff;
}

.about-story-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(320px, 0.8fr);

  gap: 90px;

  align-items: center;
}

.about-story-content {
  max-width: 700px;
}

.about-story-content h2 {
  margin: 18px 0 25px;

  font-family: "Manrope", sans-serif;

  font-size: clamp(36px, 4vw, 56px);

  line-height: 1.08;

  letter-spacing: -0.04em;

  color: var(--about-navy);
}

.about-story-content h2 span {
  display: block;

  color: var(--about-blue);
}

.about-story-content p {
  max-width: 680px;

  margin: 0 0 18px;

  color: var(--about-muted);

  font-size: 16px;

  line-height: 1.8;
}

/* =========================================================
   STORY HIGHLIGHT
========================================================= */

.about-story-highlight {
  position: relative;

  overflow: hidden;

  padding: 45px;

  border-radius: 18px;

  background: linear-gradient(145deg, #081a33, #0b2342);

  color: #ffffff;

  box-shadow: 0 25px 60px rgba(8, 26, 51, 0.15);
}

.about-story-highlight::after {
  content: "";

  position: absolute;

  width: 180px;

  height: 180px;

  right: -70px;

  bottom: -80px;

  border-radius: 50%;

  background: rgba(37, 99, 235, 0.18);

  filter: blur(15px);
}

.about-highlight-number {
  position: relative;

  z-index: 2;

  color: var(--about-blue-light);

  font-size: 12px;

  font-weight: 800;
}

.about-story-highlight h3 {
  position: relative;

  z-index: 2;

  margin: 55px 0 15px;

  font-family: "Manrope", sans-serif;

  font-size: 28px;
}

.about-story-highlight p {
  position: relative;

  z-index: 2;

  margin: 0;

  color: rgba(255, 255, 255, 0.65);

  line-height: 1.8;
}

.about-highlight-line {
  position: relative;

  z-index: 2;

  width: 55px;

  height: 2px;

  margin: 35px 0 18px;

  background: #3b82f6;
}

.about-highlight-label {
  position: relative;

  z-index: 2;

  color: rgba(255, 255, 255, 0.4);

  font-size: 10px;

  letter-spacing: 0.15em;
}

/* =========================================================
   09. MISSION & VISION
========================================================= */

.about-mission {
  background: var(--about-light);
}

.mission-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 24px;
}

.mission-card {
  position: relative;

  min-height: 330px;

  padding: 45px;

  overflow: hidden;

  border: 1px solid var(--about-border);

  border-radius: 16px;

  background: #ffffff;

  box-shadow: 0 5px 20px rgba(8, 26, 51, 0.02);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.mission-card:hover {
  transform: translateY(-5px);

  box-shadow: var(--about-shadow-md);
}

.mission-card-dark {
  border-color: var(--about-navy);

  background: linear-gradient(145deg, #081a33, #0b2342);

  color: #ffffff;
}

.mission-number {
  position: absolute;

  top: 30px;

  right: 30px;

  color: var(--about-blue);

  font-size: 12px;

  font-weight: 800;
}

.mission-card-dark .mission-number {
  color: var(--about-blue-light);
}

.mission-icon {
  width: 55px;

  height: 55px;

  display: grid;

  place-items: center;

  margin-bottom: 35px;

  border-radius: 12px;

  background: #eff6ff;

  color: var(--about-blue);

  font-size: 23px;
}

.mission-card-dark .mission-icon {
  background: rgba(96, 165, 250, 0.12);

  color: var(--about-blue-light);
}

.mission-card h3 {
  margin: 0 0 15px;

  font-family: "Manrope", sans-serif;

  font-size: 27px;

  color: inherit;
}

.mission-card p {
  max-width: 650px;

  margin: 0;

  color: var(--about-muted);

  line-height: 1.8;
}

.mission-card-dark p {
  color: rgba(255, 255, 255, 0.62);
}

/* =========================================================
   10. PRODUCTS
========================================================= */

.about-products {
  background: #ffffff;
}

.about-product-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 20px;
}

.about-product-card {
  position: relative;

  min-height: 320px;

  padding: 30px;

  overflow: hidden;

  border: 1px solid var(--about-border);

  border-radius: 14px;

  background: #ffffff;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.about-product-card::after {
  content: "";

  position: absolute;

  width: 120px;

  height: 120px;

  right: -65px;

  bottom: -65px;

  border-radius: 50%;

  background: rgba(37, 99, 235, 0.05);

  transition: transform 0.3s ease;
}

.about-product-card:hover {
  transform: translateY(-6px);

  border-color: rgba(37, 99, 235, 0.18);

  box-shadow: 0 20px 45px rgba(8, 26, 51, 0.08);
}

.about-product-card:hover::after {
  transform: scale(1.5);
}

.about-product-card > span {
  position: relative;

  z-index: 2;

  color: var(--about-blue);

  font-size: 11px;

  font-weight: 800;
}

.about-product-card > div {
  position: relative;

  z-index: 2;

  margin: 35px 0 20px;

  font-size: 32px;

  line-height: 1;
}

.about-product-card h3 {
  position: relative;

  z-index: 2;

  margin: 0 0 12px;

  font-family: "Manrope", sans-serif;

  font-size: 20px;

  color: var(--about-navy);
}

.about-product-card p {
  position: relative;

  z-index: 2;

  margin: 0;

  color: var(--about-muted);

  font-size: 14px;

  line-height: 1.7;
}

/* =========================================================
   11. OUR APPROACH
========================================================= */

.about-approach-section {
  background: #f7f9fc;
}

.about-approach-grid {
  display: grid;

  grid-template-columns:
    minmax(350px, 0.85fr)
    minmax(0, 1.15fr);

  gap: 100px;

  align-items: center;
}

/* =========================================================
   APPROACH VISUAL
========================================================= */

.about-approach-visual {
  position: relative;

  min-height: 560px;

  display: flex;

  align-items: center;

  justify-content: center;
}

.about-approach-visual::before {
  content: "";

  position: absolute;

  width: 380px;

  height: 380px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(37, 99, 235, 0.12), transparent 70%);
}

.approach-panel {
  position: relative;

  z-index: 2;

  width: min(100%, 450px);

  min-height: 500px;

  padding: 55px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  overflow: hidden;

  border-radius: 22px;

  background: linear-gradient(145deg, #061426, #081a33 55%, #0b2342);

  color: #ffffff;

  box-shadow: 0 30px 70px rgba(8, 26, 51, 0.18);
}

.approach-panel::before {
  content: "";

  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);

  background-size: 40px 40px;

  mask-image: linear-gradient(to bottom, black, transparent);

  -webkit-mask-image: linear-gradient(to bottom, black, transparent);

  pointer-events: none;
}

.approach-label {
  position: relative;

  z-index: 2;

  color: var(--about-blue-light);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.18em;
}

.approach-panel h3 {
  position: relative;

  z-index: 2;

  margin: 35px 0 0;

  font-family: "Manrope", sans-serif;

  font-size: clamp(42px, 4vw, 58px);

  line-height: 1.04;

  letter-spacing: -0.045em;
}

.approach-line {
  position: relative;

  z-index: 2;

  width: 60px;

  height: 2px;

  margin: 35px 0 22px;

  background: #3b82f6;
}

.approach-panel p {
  position: relative;

  z-index: 2;

  max-width: 300px;

  margin: 0;

  color: rgba(255, 255, 255, 0.58);

  font-size: 14px;

  line-height: 1.8;
}

/* =========================================================
   APPROACH CONTENT
========================================================= */

.about-approach-content {
  max-width: 700px;
}

.about-approach-content h2 {
  margin: 18px 0 22px;

  font-family: "Manrope", sans-serif;

  font-size: clamp(38px, 4vw, 56px);

  line-height: 1.08;

  letter-spacing: -0.045em;

  color: var(--about-navy);
}

.about-approach-content h2 span {
  display: block;

  color: var(--about-blue);
}

.about-approach-content > p {
  max-width: 650px;

  margin: 0 0 35px;

  color: var(--about-muted);

  font-size: 16px;

  line-height: 1.8;
}

/* =========================================================
   APPROACH LIST
========================================================= */

.approach-list {
  border-top: 1px solid var(--about-border);
}

.approach-item {
  display: grid;

  grid-template-columns: 45px 1fr;

  gap: 20px;

  padding: 23px 0;

  border-bottom: 1px solid var(--about-border);
}

.approach-item > span {
  color: var(--about-blue);

  font-size: 11px;

  font-weight: 800;

  padding-top: 4px;
}

.approach-item h3 {
  margin: 0 0 6px;

  font-family: "Manrope", sans-serif;

  font-size: 18px;

  color: var(--about-navy);
}

.approach-item p {
  margin: 0;

  color: var(--about-muted);

  font-size: 14px;

  line-height: 1.7;
}

/* =========================================================
   12. VALUES
========================================================= */

.about-values {
  background: var(--about-light);
}

.values-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 20px;
}

.value-card {
  position: relative;

  min-height: 245px;

  padding: 30px;

  overflow: hidden;

  border-top: 2px solid var(--about-blue);

  background: #ffffff;

  box-shadow: 0 5px 20px rgba(8, 26, 51, 0.025);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.value-card::after {
  content: "";

  position: absolute;

  width: 100px;

  height: 100px;

  right: -55px;

  bottom: -55px;

  border-radius: 50%;

  background: rgba(37, 99, 235, 0.05);
}

.value-card:hover {
  transform: translateY(-5px);

  box-shadow: var(--about-shadow-md);
}

.value-card > strong {
  position: relative;

  z-index: 2;

  color: var(--about-blue);

  font-size: 12px;
}

.value-card h3 {
  position: relative;

  z-index: 2;

  margin: 30px 0 12px;

  font-family: "Manrope", sans-serif;

  font-size: 21px;

  color: var(--about-navy);
}

.value-card p {
  position: relative;

  z-index: 2;

  max-width: 260px;

  margin: 0;

  color: var(--about-muted);

  font-size: 14px;

  line-height: 1.7;
}

/* =========================================================
   13. WHY KAMAL GROUP
========================================================= */

.about-difference-section {
  position: relative;

  padding: 120px 0;

  overflow: hidden;

  background: linear-gradient(135deg, #061426, #081a33 60%, #0b2342);

  color: #ffffff;
}

.about-difference-section::before {
  content: "";

  position: absolute;

  width: 500px;

  height: 500px;

  right: -150px;

  top: -200px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(37, 99, 235, 0.2), transparent 70%);

  pointer-events: none;
}

.about-difference-grid {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.85fr)
    minmax(0, 1.15fr);

  gap: 100px;

  align-items: center;
}

/* =========================================================
   DIFFERENCE CONTENT
========================================================= */

.about-difference-content {
  max-width: 560px;
}

.about-difference-content .eyebrow {
  color: var(--about-blue-light);
}

.about-difference-content h2 {
  margin: 20px 0;

  font-family: "Manrope", sans-serif;

  font-size: clamp(40px, 4.5vw, 60px);

  line-height: 1.05;

  letter-spacing: -0.045em;
}

.about-difference-content h2 span {
  display: block;

  color: var(--about-blue-light);
}

.about-difference-content p {
  max-width: 520px;

  margin: 0;

  color: rgba(255, 255, 255, 0.62);

  font-size: 16px;

  line-height: 1.8;
}

/* =========================================================
   DIFFERENCE LIST
========================================================= */

.difference-list {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.difference-item {
  display: grid;

  grid-template-columns: 45px 1fr;

  gap: 20px;

  padding: 25px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.difference-item > span {
  color: var(--about-blue-light);

  font-size: 11px;

  font-weight: 800;

  padding-top: 4px;
}

.difference-item h3 {
  margin: 0 0 7px;

  font-family: "Manrope", sans-serif;

  font-size: 19px;

  color: #ffffff;
}

.difference-item p {
  max-width: 600px;

  margin: 0;

  color: rgba(255, 255, 255, 0.55);

  font-size: 14px;

  line-height: 1.7;
}

/* =========================================================
   14. COMPANY METRICS
========================================================= */

.about-metrics-section {
  padding: 0;

  background: #ffffff;
}

.about-metrics-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  border-left: 1px solid var(--about-border);

  border-right: 1px solid var(--about-border);
}

.about-metrics-grid > div {
  min-height: 190px;

  padding: 40px 30px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  border-right: 1px solid var(--about-border);
}

.about-metrics-grid > div:last-child {
  border-right: 0;
}

.about-metrics-grid strong {
  display: block;

  margin-bottom: 10px;

  font-family: "Manrope", sans-serif;

  font-size: clamp(35px, 4vw, 48px);

  line-height: 1;

  letter-spacing: -0.04em;

  color: var(--about-navy);
}

.about-metrics-grid span {
  color: var(--about-muted);

  font-size: 12px;

  line-height: 1.5;
}

/* =========================================================
   15. FINAL CTA
========================================================= */

.about-final-cta {
  position: relative;

  padding: 120px 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 80% 50%,
      rgba(59, 130, 246, 0.2),
      transparent 35%
    ),
    #081a33;

  color: #ffffff;
}

.about-final-grid {
  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.5;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);

  background-size: 60px 60px;

  mask-image: linear-gradient(to bottom, transparent, black, transparent);

  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    black,
    transparent
  );
}

.about-final-content {
  position: relative;

  z-index: 2;

  max-width: 780px;

  margin-inline: auto;

  text-align: center;
}

.about-final-content .eyebrow {
  color: var(--about-blue-light);
}

.about-final-content h2 {
  margin: 20px 0;

  font-family: "Manrope", sans-serif;

  font-size: clamp(40px, 5vw, 64px);

  line-height: 1.05;

  letter-spacing: -0.05em;
}

.about-final-content h2 span {
  display: block;

  color: var(--about-blue-light);
}

.about-final-content p {
  max-width: 620px;

  margin: 0 auto;

  color: rgba(255, 255, 255, 0.62);

  font-size: 16px;

  line-height: 1.8;
}

/* =========================================================
   FINAL CTA ACTIONS
========================================================= */

.about-final-actions {
  margin-top: 35px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 25px;
}

.about-final-actions .btn {
  flex-shrink: 0;
}

.final-text-link {
  color: #ffffff;

  text-decoration: none;

  font-size: 14px;

  font-weight: 700;
}

.final-text-link:hover {
  color: var(--about-blue-light);

  transform: translateX(3px);
}

/* =========================================================
   16. REVEAL ANIMATIONS
========================================================= */

.about-page .reveal {
  opacity: 0;

  transform: translateY(30px);

  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.about-page .reveal.revealed {
  opacity: 1;

  transform: translateY(0);
}

/* =========================================================
   STAGGERED REVEAL
========================================================= */

.about-product-grid .reveal:nth-child(2),
.values-grid .reveal:nth-child(2) {
  transition-delay: 0.08s;
}

.about-product-grid .reveal:nth-child(3),
.values-grid .reveal:nth-child(3) {
  transition-delay: 0.16s;
}

.about-product-grid .reveal:nth-child(4),
.values-grid .reveal:nth-child(4) {
  transition-delay: 0.24s;
}

/* =========================================================
   17. ACCESSIBILITY
========================================================= */

.about-page a:focus-visible,
.about-page button:focus-visible {
  outline: 3px solid rgba(96, 165, 250, 0.7);

  outline-offset: 4px;

  border-radius: 5px;
}

/* =========================================================
   18. LARGE TABLETS / SMALL DESKTOP
========================================================= */

@media (max-width: 1100px) {
  /* HERO */

  .about-hero-container {
    grid-template-columns: 1fr;

    gap: 50px;

    padding-top: 80px;

    padding-bottom: 80px;
  }

  .about-hero-content {
    max-width: 760px;
  }

  .about-hero-visual {
    min-height: 450px;
  }

  /* STORY */

  .about-story-grid {
    gap: 55px;
  }

  /* PRODUCTS */

  .about-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* VALUES */

  .values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* APPROACH */

  .about-approach-grid {
    grid-template-columns: 0.8fr 1.2fr;

    gap: 55px;
  }

  .approach-panel {
    padding: 45px;
  }

  /* DIFFERENCE */

  .about-difference-grid {
    gap: 55px;
  }

  /* METRICS */

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

  .about-metrics-grid > div:nth-child(2) {
    border-right: 0;
  }

  .about-metrics-grid > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--about-border);
  }
}

/* =========================================================
   19. TABLETS
========================================================= */

@media (max-width: 900px) {
  .about-page .section {
    padding-top: 85px;

    padding-bottom: 85px;
  }

  /* STORY */

  .about-story-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }

  .about-story-content {
    max-width: 760px;
  }

  /* MISSION */

  .mission-card {
    min-height: 300px;

    padding: 38px;
  }

  /* APPROACH */

  .about-approach-grid {
    grid-template-columns: 1fr;

    gap: 60px;
  }

  .about-approach-visual {
    min-height: 500px;
  }

  .approach-panel {
    width: min(100%, 520px);

    min-height: 450px;

    margin-inline: auto;
  }

  /* DIFFERENCE */

  .about-difference-grid {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .about-difference-content {
    max-width: 760px;
  }
}

/* =========================================================
   20. MOBILE
========================================================= */

@media (max-width: 768px) {
  /* CONTAINER */

  .about-page .container {
    width: calc(100% - 36px);
  }

  /* SECTION */

  .about-page .section {
    padding-top: 70px;

    padding-bottom: 70px;
  }

  /* SECTION HEADING */

  .about-page .section-heading {
    margin-bottom: 42px;
  }

  .about-page .section-heading h2 {
    font-size: clamp(34px, 9vw, 48px);
  }

  .about-page .section-heading p {
    font-size: 15px;
  }

  /* HERO */

  .about-hero {
    min-height: auto;
    padding: 50px 0px;
  }

  .about-hero-container {
    width: 100%;

    min-height: auto;

    padding: 70px 24px;

    grid-template-columns: 1fr;

    gap: 55px;
  }

  .about-hero-content h1 {
    font-size: clamp(42px, 11vw, 58px);

    letter-spacing: -0.05em;
  }

  .about-hero-content > p {
    font-size: 16px;

    line-height: 1.75;
  }

  /* HERO ACTIONS */

  .about-hero-actions {
    flex-direction: column;

    align-items: stretch;

    gap: 10px;
  }

  .about-hero-actions .btn {
    width: 100%;
  }

  /* HERO TRUST */

  .about-hero-trust {
    gap: 20px;

    justify-content: space-between;
  }

  .about-hero-trust strong {
    font-size: 18px;
  }

  .about-hero-trust span {
    max-width: 90px;

    font-size: 10px;
  }

  /* HERO VISUAL */

  .about-hero-visual {
    min-height: 390px;
  }

  .about-platform-card {
    width: 100%;
  }

  .about-platform-body {
    min-height: 280px;
  }

  /* STORY */

  .about-story-grid {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .about-story-content h2 {
    font-size: clamp(35px, 9vw, 48px);
  }

  .about-story-highlight {
    padding: 32px;
  }

  /* MISSION */

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

  /* PRODUCTS */

  .about-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-product-card {
    min-height: 290px;

    padding: 25px;
  }

  /* APPROACH */

  .about-approach-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }

  .about-approach-visual {
    min-height: 420px;
  }

  .approach-panel {
    min-height: 400px;

    padding: 38px;
  }

  .approach-panel h3 {
    font-size: clamp(40px, 11vw, 55px);
  }

  /* VALUES */

  .values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* DIFFERENCE */

  .about-difference-section {
    padding: 80px 0;
  }

  .about-difference-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }

  .about-difference-content h2 {
    font-size: clamp(38px, 10vw, 52px);
  }

  /* METRICS */

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

  .about-metrics-grid > div {
    min-height: 155px;

    padding: 30px 22px;
  }

  .about-metrics-grid strong {
    font-size: 35px;
  }

  /* FINAL CTA */

  .about-final-cta {
    padding: 90px 0;
  }

  .about-final-content h2 {
    font-size: clamp(40px, 10vw, 55px);
  }

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

  .about-final-actions {
    flex-direction: column;

    gap: 18px;
  }
}

/* =========================================================
   21. SMALL MOBILE
========================================================= */

@media (max-width: 520px) {
  /* CONTAINER */

  .about-page .container {
    width: calc(100% - 32px);
  }

  /* HERO */

  .about-hero-container {
    padding: 60px 18px;
  }

  .about-hero-content h1 {
    font-size: clamp(40px, 12vw, 52px);
  }

  .about-hero-content > p {
    font-size: 15px;
  }

  /* HERO TRUST */

  .about-hero-trust {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;
  }

  .about-hero-trust strong {
    font-size: 17px;
  }

  .about-hero-trust span {
    font-size: 9px;
  }

  /* HERO VISUAL */

  .about-hero-visual {
    min-height: 350px;
  }

  .about-platform-card {
    border-radius: 14px;
  }

  .about-card-header {
    padding: 14px;
  }

  .about-card-logo {
    width: 34px;

    height: 34px;

    flex-basis: 34px;
  }

  .about-card-header strong {
    font-size: 11px;
  }

  .about-card-header small {
    font-size: 7px;
  }

  .about-live {
    font-size: 8px;
  }

  /* PLATFORM BODY */

  .about-platform-body {
    min-height: 245px;
  }

  .about-platform-center {
    width: 110px;

    height: 110px;
  }

  .about-platform-center span {
    font-size: 27px;
  }

  .about-platform-center strong {
    font-size: 10px;
  }

  .about-platform-center small {
    max-width: 75px;

    font-size: 7px;
  }

  /* NODES */

  .about-platform-node {
    min-width: auto;

    padding: 7px 9px;

    gap: 5px;

    font-size: 8px;
  }

  .about-platform-node span {
    font-size: 13px;
  }

  .node-education {
    top: 25px;

    left: 10px;
  }

  .node-hr {
    top: 25px;

    right: 10px;
  }

  .node-business {
    bottom: 25px;

    left: 10px;
  }

  .node-supply {
    bottom: 25px;

    right: 10px;
  }

  /* CARD FOOTER */

  .about-card-footer div {
    padding: 12px 9px;
  }

  .about-card-footer small {
    font-size: 6px;
  }

  .about-card-footer strong {
    font-size: 11px;
  }

  /* STORY */

  .about-story-highlight {
    padding: 28px;
  }

  .about-story-highlight h3 {
    margin-top: 40px;

    font-size: 25px;
  }

  /* MISSION */

  .mission-card {
    min-height: auto;

    padding: 30px;
  }

  .mission-card h3 {
    font-size: 24px;
  }

  /* PRODUCTS */

  .about-product-grid {
    grid-template-columns: 1fr;
  }

  .about-product-card {
    min-height: auto;

    padding: 28px;
  }

  /* APPROACH */

  .about-approach-visual {
    min-height: 350px;
  }

  .approach-panel {
    min-height: 350px;

    padding: 30px;

    border-radius: 16px;
  }

  .approach-panel h3 {
    margin-top: 28px;

    font-size: clamp(38px, 12vw, 50px);
  }

  .approach-item {
    grid-template-columns: 35px 1fr;

    gap: 12px;

    padding: 20px 0;
  }

  .approach-item h3 {
    font-size: 17px;
  }

  .approach-item p {
    font-size: 13px;
  }

  /* VALUES */

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

  .value-card {
    min-height: auto;

    padding: 28px;
  }

  /* DIFFERENCE */

  .difference-item {
    grid-template-columns: 35px 1fr;

    gap: 12px;

    padding: 22px 0;
  }

  .difference-item h3 {
    font-size: 17px;
  }

  .difference-item p {
    font-size: 13px;
  }

  /* METRICS */

  .about-metrics-grid {
    grid-template-columns: 1fr;
  }

  .about-metrics-grid > div {
    min-height: 135px;

    border-right: 0;

    border-bottom: 1px solid var(--about-border);
  }

  .about-metrics-grid > div:last-child {
    border-bottom: 0;
  }

  .about-metrics-grid strong {
    font-size: 36px;
  }

  /* FINAL CTA */

  .about-final-cta {
    padding: 75px 0;
  }

  .about-final-actions {
    align-items: stretch;
  }

  .about-final-actions .btn {
    width: 100%;
  }

  .final-text-link {
    display: inline-flex;

    justify-content: center;

    padding: 8px;
  }
}

/* =========================================================
   22. EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 380px) {
  .about-hero-container {
    padding-left: 15px;

    padding-right: 15px;
  }

  .about-hero-trust {
    gap: 7px;
  }

  .about-hero-trust strong {
    font-size: 15px;
  }

  .about-hero-trust span {
    font-size: 8px;
  }

  .about-platform-body {
    min-height: 225px;
  }

  .about-platform-center {
    width: 95px;

    height: 95px;
  }

  .about-platform-center span {
    font-size: 24px;
  }

  .about-platform-node {
    padding: 6px 7px;

    font-size: 7px;
  }

  .about-platform-node span {
    font-size: 11px;
  }

  .about-card-footer div {
    padding: 10px 6px;
  }

  .about-card-footer strong {
    font-size: 10px;
  }
}

/* =========================================================
   23. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .about-page *,
  .about-page *::before,
  .about-page *::after {
    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;
  }

  .about-page .reveal {
    opacity: 1;

    transform: none;
  }
}

/* LEADERSHIP PAGE */
/* =========================================================
   KAMAL GROUP OF CORPORATE
   LEADERSHIP PAGE
   /assets/css/leadership.css

   NOTE:
   Global variables are already defined in style.css :root.
   This file intentionally uses those existing variables.
========================================================= */

/* =========================================================
   PAGE BASE
========================================================= */

.leadership-page {
  background: var(--off-white);
  color: var(--text);
  overflow-x: hidden;
}

.leadership-page main {
  overflow: hidden;
}

.leadership-page section {
  position: relative;
}

.leadership-page .section {
  padding: 120px 0;
}

.leadership-page p {
  color: var(--text-soft);
  line-height: 1.8;
}

.leadership-page h1,
.leadership-page h2,
.leadership-page h3,
.leadership-page h4 {
  font-family: "Manrope", sans-serif;
  color: var(--navy);
  letter-spacing: -0.03em;
}

.leadership-page a {
  text-decoration: none;
}

/* =========================================================
   HEADER ACTIVE STATE
========================================================= */

.leadership-page .site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.leadership-page .site-header.scrolled {
  box-shadow: 0 10px 35px rgba(8, 26, 51, 0.08);
}

/* =========================================================
   HERO
========================================================= */

.leadership-hero {
  min-height: 850px;
  padding: 170px 0 100px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(23, 105, 224, 0.12),
      transparent 30%
    ),
    linear-gradient(135deg, #f7f9fc 0%, #ffffff 50%, #f1f6ff 100%);
  overflow: hidden;
}

.leadership-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(23, 105, 224, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 105, 224, 0.035) 1px, transparent 1px);
  background-size: 70px 70px;
}

.leadership-hero-bg::before,
.leadership-hero-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(5px);
}

.leadership-hero-bg::before {
  width: 500px;
  height: 500px;
  top: -220px;
  right: -100px;
  background: rgba(59, 130, 246, 0.08);
}

.leadership-hero-bg::after {
  width: 350px;
  height: 350px;
  bottom: -180px;
  left: -100px;
  background: rgba(124, 58, 237, 0.06);
}

.leadership-hero-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  gap: 90px;
  align-items: center;
}

/* =========================================================
   EYEBROW
========================================================= */

.leadership-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--blue);
}

.leadership-page .eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 20px;
  background: var(--blue);
}

/* =========================================================
   HERO CONTENT
========================================================= */

.leadership-hero-content {
  max-width: 700px;
}

.leadership-hero-content h1 {
  max-width: 680px;
  margin: 0 0 28px;
  font-size: clamp(52px, 6vw, 86px);
  line-height: 0.98;
  font-weight: 800;
}

.leadership-hero-content h1 span {
  display: block;
  color: var(--blue);
}

.leadership-hero-content > p {
  max-width: 650px;
  margin: 0 0 34px;
  font-size: 18px;
  line-height: 1.8;
}

/* =========================================================
   HERO BUTTONS
========================================================= */

.leadership-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 50px;
}

.leadership-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 12px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    background var(--transition),
    color var(--transition);
}

.leadership-page .btn:hover {
  transform: translateY(-3px);
}

.leadership-page .btn-primary {
  color: var(--white);
  background: var(--blue);
  box-shadow: 0 14px 30px rgba(23, 105, 224, 0.22);
}

.leadership-page .btn-primary:hover {
  background: var(--blue-dark);
  box-shadow: 0 18px 35px rgba(23, 105, 224, 0.28);
}

.leadership-page .btn-secondary {
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.leadership-page .btn-secondary:hover {
  border-color: rgba(23, 105, 224, 0.25);
  color: var(--blue);
}

/* =========================================================
   HERO TRUST / STATS
========================================================= */

.leadership-hero-trust {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}

.leadership-stat {
  min-width: 145px;
  padding-right: 30px;
  margin-right: 30px;
  border-right: 1px solid var(--border);
}

.leadership-stat:last-child {
  border-right: 0;
}

.leadership-stat strong {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
  font-family: "Manrope", sans-serif;
  font-size: 25px;
  font-weight: 800;
}

.leadership-stat span {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

/* =========================================================
   HERO VISUAL
========================================================= */

.leadership-hero-visual {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.leadership-visual-glow {
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(23, 105, 224, 0.22) 0%,
    rgba(23, 105, 224, 0.08) 40%,
    transparent 70%
  );
  filter: blur(8px);
  animation: leadershipGlow 6s ease-in-out infinite;
}

@keyframes leadershipGlow {
  0%,
  100% {
    transform: scale(0.95);
    opacity: 0.75;
  }

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

/* =========================================================
   COMMAND CARD
========================================================= */

.leadership-command-card {
  position: relative;
  z-index: 2;
  width: min(100%, 470px);
  min-height: 490px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  color: var(--white);
  background: linear-gradient(
    145deg,
    rgba(11, 36, 71, 0.98),
    rgba(8, 26, 51, 0.98)
  );
  box-shadow:
    0 40px 90px rgba(8, 26, 51, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transform: rotate(1deg);
  transition:
    transform 0.5s ease,
    box-shadow 0.5s ease;
}

.leadership-command-card:hover {
  transform: rotate(0deg) translateY(-8px);
  box-shadow:
    0 50px 100px rgba(8, 26, 51, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.leadership-command-card::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  top: -150px;
  right: -100px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.16);
  filter: blur(15px);
}

.leadership-command-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 45px 45px;
}

.leadership-card-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.leadership-card-label,
.leadership-card-status {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.leadership-card-label {
  color: rgba(255, 255, 255, 0.55);
}

.leadership-card-status {
  color: #60a5fa;
}

.leadership-command-center {
  position: relative;
  z-index: 2;
  padding: 58px 20px 50px;
  text-align: center;
}

.leadership-monogram {
  width: 120px;
  height: 120px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 50%;
  color: var(--white);
  background: radial-gradient(
    circle at 30% 25%,
    rgba(59, 130, 246, 0.45),
    rgba(23, 105, 224, 0.08)
  );
  box-shadow:
    0 0 0 12px rgba(59, 130, 246, 0.04),
    0 0 60px rgba(59, 130, 246, 0.2);
  font-family: "Manrope", sans-serif;
  font-size: 48px;
  font-weight: 800;
}

.leadership-command-center strong {
  display: block;
  margin-bottom: 8px;
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 22px;
}

.leadership-command-center small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.leadership-command-lines {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.leadership-command-lines > div {
  padding: 18px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.leadership-command-lines span {
  display: block;
  margin-bottom: 6px;
  color: #60a5fa;
  font-size: 10px;
  font-weight: 700;
}

.leadership-command-lines strong {
  color: var(--white);
  font-size: 12px;
}

/* =========================================================
   SECTION HEADINGS
========================================================= */

.leadership-page .section-heading {
  max-width: 800px;
  margin: 0 auto 70px;
  text-align: center;
}

.leadership-page .section-heading h2 {
  margin: 0 0 22px;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.04;
  font-weight: 800;
}

.leadership-page .section-heading h2 span {
  color: var(--blue);
}

.leadership-page .section-heading p {
  max-width: 680px;
  margin: 0 auto;
  font-size: 16px;
}

/* =========================================================
   LEADERSHIP INTRODUCTION
========================================================= */

.leadership-introduction {
  background: var(--white);
}

.leadership-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
  gap: 90px;
  align-items: center;
}

.leadership-intro-content {
  max-width: 700px;
}

.leadership-intro-content h2 {
  margin: 0 0 26px;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.05;
}

.leadership-intro-content h2 span {
  display: block;
  color: var(--blue);
}

.leadership-intro-content p {
  margin: 0 0 20px;
  font-size: 16px;
}

.leadership-intro-highlight {
  position: relative;
  padding: 45px;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, #081a33, #0b2447);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.leadership-intro-highlight::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  top: -100px;
  right: -80px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.16);
}

.leadership-highlight-number {
  position: relative;
  display: block;
  margin-bottom: 35px;
  color: #60a5fa;
  font-family: "Manrope", sans-serif;
  font-size: 48px;
  font-weight: 800;
}

.leadership-intro-highlight h3 {
  position: relative;
  margin: 0 0 15px;
  color: var(--white);
  font-size: 28px;
}

.leadership-intro-highlight p {
  position: relative;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
}

.leadership-highlight-line {
  width: 60px;
  height: 2px;
  margin: 30px 0 18px;
  background: var(--blue-light);
}

.leadership-highlight-label {
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

/* =========================================================
   FOUNDER SECTION
========================================================= */

.leadership-founder-section {
  background: var(--off-white);
}

.founder-profile-card {
  display: grid;
  grid-template-columns: minmax(350px, 0.8fr) minmax(0, 1.2fr);
  min-height: 620px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.founder-profile-visual {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(59, 130, 246, 0.28),
      transparent 35%
    ),
    linear-gradient(145deg, #0b2447, #081a33);
  overflow: hidden;
}

.founder-profile-visual::before {
  content: "";
  position: absolute;
  inset: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
}

.founder-profile-visual::after {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 50%;
}

.leader-photo-placeholder {
  position: relative;
  z-index: 2;
  width: 280px;
  height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.025)
  );
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.leader-photo-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 145px;
  height: 145px;
  margin-bottom: 25px;
  border-radius: 50%;
  color: var(--white);
  background: linear-gradient(145deg, var(--blue), var(--blue-dark));
  box-shadow: 0 20px 50px rgba(23, 105, 224, 0.35);
  font-family: "Manrope", sans-serif;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.leader-photo-placeholder small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.leader-photo-placeholder.dark {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  border-radius: 18px;
  background:
    radial-gradient(circle at center, rgba(59, 130, 246, 0.2), transparent 45%),
    linear-gradient(145deg, #0b2447, #081a33);
}

.founder-profile-content {
  padding: 70px 75px;
}

.leader-number {
  display: block;
  margin-bottom: 10px;
  color: var(--blue);
  font-family: "Manrope", sans-serif;
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
}

.leader-role {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.founder-profile-content h3 {
  margin: 0 0 22px;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.08;
}

.founder-profile-content p {
  max-width: 700px;
  margin: 0 0 18px;
}

.founder-profile-content .leader-intro {
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
}

/* =========================================================
   LEADER FOCUS GRID
========================================================= */

.leader-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 35px;
}

.leader-focus-grid > div {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--off-white);
  transition:
    transform var(--transition),
    border-color var(--transition),
    background var(--transition);
}

.leader-focus-grid > div:hover {
  transform: translateY(-5px);
  border-color: rgba(23, 105, 224, 0.22);
  background: #f5f8ff;
}

.leader-focus-grid span {
  display: block;
  margin-bottom: 12px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}

.leader-focus-grid strong {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 14px;
}

.leader-focus-grid small {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
}

/* =========================================================
   MANAGING DIRECTOR
========================================================= */

.leadership-md-section {
  background: var(--white);
}

.managing-director-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 0.85fr);
  gap: 100px;
  align-items: center;
}

.managing-director-content {
  max-width: 720px;
}

.managing-director-content > .leader-number {
  margin: 25px 0 18px;
}

.managing-director-content h2 {
  margin: 0 0 25px;
  font-size: clamp(40px, 5vw, 62px);
  line-height: 1.02;
}

.managing-director-content h2 span {
  display: block;
  color: var(--blue);
}

.managing-director-content h3 {
  margin: 0 0 20px;
  font-size: 28px;
}

.managing-director-content p {
  margin: 0 0 18px;
}

.managing-director-content .leader-intro {
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
}

/* =========================================================
   MD FOCUS LIST
========================================================= */

.md-focus-list {
  margin-top: 35px;
  border-top: 1px solid var(--border);
}

.md-focus-item {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 20px;
  padding: 23px 0;
  border-bottom: 1px solid var(--border);
}

.md-focus-item > span {
  color: var(--blue);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.md-focus-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
}

.md-focus-item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
}

/* =========================================================
   MD VISUAL
========================================================= */

.managing-director-visual {
  display: flex;
  justify-content: center;
}

.md-visual-card {
  width: min(100%, 450px);
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--off-white);
  box-shadow: var(--shadow);
  transform: rotate(-2deg);
  transition:
    transform 0.5s ease,
    box-shadow 0.5s ease;
}

.md-visual-card:hover {
  transform: rotate(0deg) translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.md-card-header,
.md-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.md-card-header {
  padding: 14px 10px 18px;
}

.md-card-header span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.md-card-body {
  min-height: 420px;
  overflow: hidden;
  border-radius: 18px;
}

.md-card-footer {
  gap: 15px;
  padding: 18px 10px 8px;
  flex-direction: column;
  align-items: flex-start;
}

.md-card-footer strong {
  color: var(--navy);
  font-family: "Manrope", sans-serif;
  font-size: 15px;
}

.md-card-footer span {
  color: var(--text-muted);
  font-size: 12px;
}

/* =========================================================
   BOARD OF DIRECTORS
========================================================= */

.leadership-board-section {
  background: var(--off-white);
}

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

.board-card {
  position: relative;
  min-height: 400px;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.board-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.board-card:hover,
.board-card.board-active {
  transform: translateY(-8px);
  border-color: rgba(23, 105, 224, 0.18);
  box-shadow: var(--shadow);
}

.board-card:hover::before,
.board-card.board-active::before {
  transform: scaleX(1);
}

.board-card-featured {
  background: linear-gradient(145deg, #0b2447, #081a33);
}

.board-card-featured h3,
.board-card-featured .board-role,
.board-card-featured p {
  color: var(--white);
}

.board-card-featured p {
  color: rgba(255, 255, 255, 0.62);
}

.board-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 35px;
}

.board-card-top > span:first-child {
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
}

.board-card-featured .board-card-top > span:first-child {
  color: #60a5fa;
}

.board-status {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text-muted);
  background: var(--off-white);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.board-card-featured .board-status {
  border-color: rgba(255, 255, 255, 0.12);
  color: #93c5fd;
  background: rgba(255, 255, 255, 0.05);
}

.board-avatar {
  width: 90px;
  height: 90px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--white);
  background: linear-gradient(145deg, var(--blue), var(--blue-dark));
  box-shadow: 0 15px 30px rgba(23, 105, 224, 0.2);
  font-family: "Manrope", sans-serif;
  font-size: 22px;
  font-weight: 800;
}

.board-role {
  display: block;
  margin-bottom: 12px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.board-card h3 {
  margin: 0 0 15px;
  font-size: 22px;
  line-height: 1.2;
}

.board-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

/* =========================================================
   LEADERSHIP PRINCIPLES
========================================================= */

.leadership-principles-section {
  background: var(--white);
}

.leadership-principles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.leadership-principle-card {
  position: relative;
  min-height: 320px;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--white);
  overflow: hidden;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.leadership-principle-card:hover {
  transform: translateY(-8px);
  border-color: rgba(23, 105, 224, 0.2);
  box-shadow: var(--shadow);
}

.leadership-principle-card > span {
  display: block;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
}

.principle-icon {
  width: 62px;
  height: 62px;
  margin: 40px 0 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: var(--blue);
  background: #edf4ff;
  font-size: 23px;
  transition:
    background var(--transition),
    color var(--transition),
    transform var(--transition);
}

.leadership-principle-card:hover .principle-icon {
  color: var(--white);
  background: var(--blue);
  transform: rotate(-5deg);
}

.leadership-principle-card h3 {
  margin: 0 0 12px;
  font-size: 21px;
}

.leadership-principle-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

/* =========================================================
   GOVERNANCE
========================================================= */

.leadership-governance-section {
  background: var(--off-white);
}

.leadership-governance-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.8fr) minmax(0, 1.2fr);
  gap: 100px;
  align-items: center;
}

.governance-visual {
  min-height: 600px;
}

.governance-panel {
  position: sticky;
  top: 120px;
  min-height: 560px;
  padding: 55px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 28px;
  color: var(--white);
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(59, 130, 246, 0.2),
      transparent 30%
    ),
    linear-gradient(145deg, #0b2447, #081a33);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.governance-panel::before {
  content: "";
  position: absolute;
  inset: 25px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
}

.governance-panel::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  right: -120px;
  bottom: -120px;
  border-radius: 50%;
  border: 1px solid rgba(96, 165, 250, 0.2);
}

.governance-label {
  position: relative;
  z-index: 2;
  margin-bottom: 35px;
  color: #60a5fa;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.governance-panel h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--white);
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.02;
}

.governance-line {
  position: relative;
  z-index: 2;
  width: 65px;
  height: 2px;
  margin: 35px 0 25px;
  background: var(--blue-light);
}

.governance-panel p {
  position: relative;
  z-index: 2;
  max-width: 420px;
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
}

.governance-content {
  max-width: 720px;
}

.governance-content h2 {
  margin: 0 0 25px;
  font-size: clamp(40px, 5vw, 58px);
  line-height: 1.05;
}

.governance-content h2 span {
  display: block;
  color: var(--blue);
}

.governance-content > p {
  margin: 0 0 35px;
}

.governance-list {
  border-top: 1px solid var(--border);
}

.governance-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.governance-item > span {
  color: var(--blue);
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.governance-item h3 {
  margin: 0 0 7px;
  font-size: 17px;
}

.governance-item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
}

/* =========================================================
   LEADERSHIP VISION
========================================================= */

.leadership-vision-section {
  position: relative;
  padding: 140px 0;
  color: var(--white);
  background: linear-gradient(135deg, #081a33, #0b2447);
  overflow: hidden;
}

.leadership-vision-grid,
.leadership-final-grid {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 60px 60px;
}

.leadership-vision-section::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  top: -300px;
  right: -150px;
  border-radius: 50%;
  background: rgba(23, 105, 224, 0.18);
  filter: blur(30px);
}

.leadership-vision-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.leadership-vision-content .eyebrow {
  color: #60a5fa;
}

.leadership-vision-content .eyebrow::before {
  background: #60a5fa;
}

.leadership-vision-content h2 {
  margin: 0 0 25px;
  color: var(--white);
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.02;
}

.leadership-vision-content h2 span {
  display: block;
  color: #60a5fa;
}

.leadership-vision-content > p {
  max-width: 720px;
  margin: 0 0 45px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 17px;
}

.vision-points {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.vision-points > div {
  padding: 25px 20px 0 0;
  margin-right: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.vision-points > div:last-child {
  margin-right: 0;
  border-right: 0;
}

.vision-points strong {
  display: block;
  margin-bottom: 8px;
  color: #60a5fa;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
}

.vision-points span {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.5;
}

/* =========================================================
   FINAL CTA
========================================================= */

.leadership-final-cta {
  position: relative;
  padding: 130px 0;
  color: var(--white);
  background: linear-gradient(135deg, #1769e0, #0e4eb5);
  overflow: hidden;
}

.leadership-final-cta::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  top: -350px;
  right: -150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.leadership-final-cta::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  bottom: -250px;
  left: -100px;
  border-radius: 50%;
  background: rgba(8, 26, 51, 0.12);
}

.leadership-final-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.leadership-final-content .eyebrow {
  color: rgba(255, 255, 255, 0.8);
}

.leadership-final-content .eyebrow::before {
  background: rgba(255, 255, 255, 0.8);
}

.leadership-final-content h2 {
  margin: 0 0 24px;
  color: var(--white);
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.02;
}

.leadership-final-content h2 span {
  display: block;
  color: #dbeafe;
}

.leadership-final-content > p {
  max-width: 700px;
  margin: 0 auto 35px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 17px;
}

.leadership-final-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
}

.leadership-page .btn-light {
  color: var(--navy);
  background: var(--white);
  box-shadow: 0 15px 35px rgba(8, 26, 51, 0.16);
}

.leadership-page .btn-light:hover {
  color: var(--blue);
  background: #f8fbff;
}

.leadership-page .btn-large {
  min-height: 58px;
  padding: 0 30px;
}

.final-text-link {
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  transition:
    opacity var(--transition),
    transform var(--transition);
}

.final-text-link:hover {
  opacity: 0.8;
  transform: translateX(3px);
}

/* =========================================================
   FOOTER COMPATIBILITY
========================================================= */

.leadership-page .site-footer {
  position: relative;
  z-index: 3;
}

/* =========================================================
   SCROLL REVEAL
========================================================= */

.leadership-page .reveal {
  opacity: 0;
  transform: translateY(35px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.leadership-page .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   STAGGERED REVEAL
========================================================= */

.board-card:nth-child(2),
.leadership-principle-card:nth-child(2),
.governance-item:nth-child(2) {
  transition-delay: 0.08s;
}

.board-card:nth-child(3),
.leadership-principle-card:nth-child(3),
.governance-item:nth-child(3) {
  transition-delay: 0.16s;
}

.board-card:nth-child(4),
.leadership-principle-card:nth-child(4),
.governance-item:nth-child(4) {
  transition-delay: 0.24s;
}

.board-card:nth-child(5) {
  transition-delay: 0.32s;
}

.board-card:nth-child(6) {
  transition-delay: 0.4s;
}

/* =========================================================
   FOCUS STATES
========================================================= */

.leadership-page a:focus-visible,
.leadership-page button:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.35);
  outline-offset: 4px;
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .leadership-page *,
  .leadership-page *::before,
  .leadership-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .leadership-page .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   LARGE TABLETS
========================================================= */

@media (max-width: 1100px) {
  .leadership-page .section {
    padding: 100px 0;
  }

  .leadership-hero {
    min-height: auto;
    padding: 150px 0 90px;
  }

  .leadership-hero-container {
    grid-template-columns: 1fr 0.85fr;
    gap: 55px;
  }

  .leadership-hero-content h1 {
    font-size: clamp(48px, 6vw, 68px);
  }

  .leadership-intro-grid {
    gap: 55px;
  }

  .founder-profile-content {
    padding: 55px;
  }

  .managing-director-grid {
    gap: 60px;
  }

  .leadership-governance-grid {
    gap: 60px;
  }

  .governance-panel {
    padding: 45px;
  }

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

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

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {
  .leadership-page .section {
    padding: 85px 0;
  }

  .leadership-hero {
    padding-top: 135px;
  }

  .leadership-hero-container {
    grid-template-columns: 1fr;
    gap: 65px;
  }

  .leadership-hero-content {
    max-width: 760px;
  }

  .leadership-hero-content h1 {
    max-width: 650px;
  }

  .leadership-hero-visual {
    min-height: 450px;
  }

  .leadership-command-card {
    width: min(100%, 500px);
  }

  .leadership-intro-grid {
    grid-template-columns: 1fr;
  }

  .leadership-intro-content {
    max-width: 800px;
  }

  .leadership-intro-highlight {
    max-width: 650px;
  }

  .founder-profile-card {
    grid-template-columns: 1fr;
  }

  .founder-profile-visual {
    min-height: 500px;
  }

  .founder-profile-content {
    padding: 55px;
  }

  .managing-director-grid {
    grid-template-columns: 1fr;
  }

  .managing-director-content {
    max-width: 800px;
  }

  .managing-director-visual {
    order: -1;
  }

  .leadership-governance-grid {
    grid-template-columns: 1fr;
  }

  .governance-visual {
    min-height: auto;
  }

  .governance-panel {
    position: relative;
    top: auto;
    max-width: 650px;
    min-height: 500px;
  }

  .governance-content {
    max-width: 800px;
  }

  .vision-points {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 25px;
  }

  .vision-points > div:nth-child(2) {
    border-right: 0;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {
  .leadership-page .section {
    padding: 70px 0;
  }

  .leadership-hero {
    padding: 120px 0 70px;
  }

  .leadership-hero-container {
    gap: 45px;
  }

  .leadership-page .eyebrow {
    margin-bottom: 16px;
    font-size: 10px;
  }

  .leadership-hero-content h1 {
    margin-bottom: 22px;
    font-size: clamp(42px, 13vw, 58px);
  }

  .leadership-hero-content > p {
    font-size: 15px;
    line-height: 1.7;
  }

  .leadership-hero-actions {
    align-items: stretch;
    flex-direction: column;
    margin-bottom: 35px;
  }

  .leadership-page .btn {
    width: 100%;
  }

  .leadership-hero-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .leadership-stat {
    min-width: 0;
    padding: 0 12px;
    margin: 0;
  }

  .leadership-stat:first-child {
    padding-left: 0;
  }

  .leadership-stat strong {
    font-size: 20px;
  }

  .leadership-stat span {
    font-size: 10px;
  }

  .leadership-hero-visual {
    min-height: 390px;
  }

  .leadership-visual-glow {
    width: 320px;
    height: 320px;
  }

  .leadership-command-card {
    min-height: 400px;
    padding: 20px;
    border-radius: 22px;
  }

  .leadership-command-center {
    padding: 40px 10px 35px;
  }

  .leadership-monogram {
    width: 95px;
    height: 95px;
    margin-bottom: 20px;
    font-size: 36px;
  }

  .leadership-command-center strong {
    font-size: 18px;
  }

  .leadership-command-lines > div {
    padding: 14px 8px;
  }

  .leadership-command-lines strong {
    font-size: 10px;
  }

  .leadership-page .section-heading {
    margin-bottom: 45px;
  }

  .leadership-page .section-heading h2 {
    font-size: clamp(34px, 10vw, 46px);
  }

  .leadership-page .section-heading p {
    font-size: 14px;
  }

  .leadership-intro-content h2,
  .managing-director-content h2,
  .governance-content h2 {
    font-size: clamp(34px, 10vw, 46px);
  }

  .leadership-intro-content p {
    font-size: 14px;
  }

  .leadership-intro-highlight {
    padding: 32px;
  }

  .leadership-highlight-number {
    margin-bottom: 25px;
    font-size: 38px;
  }

  .leadership-intro-highlight h3 {
    font-size: 23px;
  }

  .founder-profile-visual {
    min-height: 420px;
    padding: 30px;
  }

  .founder-profile-visual::before {
    inset: 20px;
  }

  .leader-photo-placeholder {
    width: 220px;
    height: 300px;
  }

  .leader-photo-monogram {
    width: 115px;
    height: 115px;
    font-size: 27px;
  }

  .founder-profile-content {
    padding: 40px 25px;
  }

  .leader-number {
    font-size: 38px;
  }

  .founder-profile-content h3 {
    font-size: 30px;
  }

  .founder-profile-content .leader-intro,
  .managing-director-content .leader-intro {
    font-size: 15px;
  }

  .leader-focus-grid {
    grid-template-columns: 1fr;
  }

  .managing-director-content h3 {
    font-size: 24px;
  }

  .md-focus-item {
    grid-template-columns: 35px 1fr;
    gap: 12px;
  }

  .md-visual-card {
    transform: none;
  }

  .md-card-body {
    min-height: 350px;
  }

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

  .board-card {
    min-height: auto;
    padding: 25px;
  }

  .leadership-principles-grid {
    grid-template-columns: 1fr;
  }

  .leadership-principle-card {
    min-height: auto;
  }

  .principle-icon {
    margin-top: 28px;
  }

  .leadership-governance-grid {
    gap: 45px;
  }

  .governance-panel {
    min-height: 430px;
    padding: 35px;
  }

  .governance-panel h3 {
    font-size: 44px;
  }

  .governance-item {
    grid-template-columns: 35px 1fr;
    gap: 12px;
  }

  .leadership-vision-section {
    padding: 90px 0;
  }

  .leadership-vision-content h2 {
    font-size: clamp(38px, 11vw, 54px);
  }

  .leadership-vision-content > p {
    font-size: 15px;
  }

  .vision-points {
    grid-template-columns: 1fr 1fr;
  }

  .vision-points > div {
    margin: 0;
    padding-right: 15px;
  }

  .vision-points > div:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }

  .vision-points > div:nth-child(even) {
    border-right: 0;
  }

  .leadership-final-cta {
    padding: 90px 0;
  }

  .leadership-final-content h2 {
    font-size: clamp(38px, 11vw, 54px);
  }

  .leadership-final-content > p {
    font-size: 15px;
  }

  .leadership-final-actions {
    flex-direction: column;
  }

  .leadership-final-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .leadership-page .section {
    padding: 60px 0;
  }

  .leadership-hero {
    padding-top: 110px;
  }

  .leadership-hero-content h1 {
    font-size: 41px;
  }

  .leadership-hero-trust {
    gap: 5px;
  }

  .leadership-stat {
    padding: 0 8px;
  }

  .leadership-stat strong {
    font-size: 18px;
  }

  .leadership-stat span {
    font-size: 9px;
    line-height: 1.35;
  }

  .leadership-hero-visual {
    min-height: 350px;
  }

  .leadership-command-card {
    min-height: 360px;
    padding: 17px;
  }

  .leadership-card-label,
  .leadership-card-status {
    font-size: 8px;
  }

  .leadership-command-center {
    padding: 32px 5px 27px;
  }

  .leadership-monogram {
    width: 80px;
    height: 80px;
    font-size: 30px;
  }

  .leadership-command-center strong {
    font-size: 16px;
  }

  .leadership-command-center small {
    font-size: 9px;
  }

  .leadership-command-lines {
    gap: 7px;
  }

  .leadership-command-lines > div {
    padding: 11px 5px;
  }

  .leadership-command-lines span {
    font-size: 8px;
  }

  .leadership-command-lines strong {
    font-size: 9px;
  }

  .leadership-intro-highlight {
    padding: 27px;
  }

  .founder-profile-visual {
    min-height: 370px;
  }

  .leader-photo-placeholder {
    width: 190px;
    height: 260px;
  }

  .leader-photo-monogram {
    width: 95px;
    height: 95px;
    font-size: 23px;
  }

  .founder-profile-content {
    padding: 35px 20px;
  }

  .founder-profile-content h3 {
    font-size: 27px;
  }

  .board-card {
    padding: 22px;
  }

  .board-avatar {
    width: 75px;
    height: 75px;
    font-size: 18px;
  }

  .governance-panel {
    min-height: 380px;
    padding: 28px;
  }

  .governance-panel h3 {
    font-size: 37px;
  }

  .vision-points {
    grid-template-columns: 1fr;
  }

  .vision-points > div,
  .vision-points > div:nth-child(odd),
  .vision-points > div:nth-child(even) {
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .vision-points > div:last-child {
    border-bottom: 0;
  }
}

/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {
  .leadership-hero-content h1 {
    font-size: 37px;
  }

  .leadership-hero-trust {
    display: block;
  }

  .leadership-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .leadership-stat:last-child {
    border-bottom: 0;
  }

  .leadership-stat strong {
    margin: 0;
  }

  .leadership-stat span {
    font-size: 10px;
  }

  .leadership-command-card {
    min-height: 340px;
  }
}

/* =========================================================
   PRINT
========================================================= */

@media print {
  .leadership-page .site-header,
  .leadership-page .mobile-navigation,
  .leadership-page .leadership-final-cta {
    display: none !important;
  }

  .leadership-page .section,
  .leadership-page .leadership-vision-section {
    padding: 40px 0;
  }

  .leadership-page .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .leadership-page {
    background: #fff;
  }

  .board-card,
  .founder-profile-card,
  .leadership-principle-card {
    box-shadow: none;
    break-inside: avoid;
  }
}
/* =========================================================
   LEADERSHIP PROFILE PHOTO
========================================================= */

.leader-profile-photo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;

  object-fit: cover;
  object-position: center top;

  border: 0;
  outline: none;
  margin: 0;
  padding: 0;

  /* Remove any inherited image effects */
  background: transparent;
  box-shadow: none;
}

/* =========================================================
   PHOTO PLACEHOLDER CONTAINER
   Used as the photo frame
========================================================= */

.leader-photo-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;

  overflow: hidden;

  display: block;

  padding: 0;
  margin: 0;

  background: #081a33;
}

/* Make the image completely fill the frame */

.leader-photo-placeholder .leader-profile-photo {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center top;
}

/* =========================================================
   DARK PHOTO FRAME
========================================================= */

.leader-photo-placeholder.dark {
  position: relative;
  overflow: hidden;

  width: 100%;
  height: 100%;
  min-height: 500px;

  padding: 0;
  margin: 0;

  background: #081a33;
}

/* MD image */

.leader-photo-placeholder.dark .leader-profile-photo {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center top;
}

/* =========================================================
   REMOVE OLD MONOGRAM STYLING WHEN IMAGE IS PRESENT
========================================================= */

.leader-photo-placeholder:has(.leader-profile-photo) .leader-photo-monogram,
.leader-photo-placeholder:has(.leader-profile-photo) small {
  display: none;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {
  .leader-photo-placeholder,
  .leader-photo-placeholder.dark {
    min-height: 400px;
  }

  .leader-photo-placeholder .leader-profile-photo,
  .leader-photo-placeholder.dark .leader-profile-photo {
    object-position: center top;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .leader-photo-placeholder,
  .leader-photo-placeholder.dark {
    min-height: 350px;
  }
}

/* =========================================================
   OUR TEAM SECTION
   KAMAL GROUP OF CORPORATE
========================================================= */

.leadership-team-section {
  position: relative;
  background: var(--off-white);
  overflow: hidden;
}

/* =========================================================
   TEAM SECTION HEADING
========================================================= */

.leadership-team-section .section-heading {
  max-width: 820px;
  margin: 0 auto 65px;
  text-align: center;
}

.leadership-team-section .section-heading h2 {
  margin: 0 0 22px;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.04;
  font-weight: 800;
}

.leadership-team-section .section-heading h2 span {
  display: block;
  color: var(--blue);
}

.leadership-team-section .section-heading p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.8;
}

/* =========================================================
   TEAM CAROUSEL
========================================================= */

.team-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 20px;
}

/* =========================================================
   CAROUSEL VIEWPORT
========================================================= */

.team-carousel-viewport {
  width: 100%;
  overflow: hidden;
}

/* =========================================================
   CAROUSEL TRACK
========================================================= */

.team-carousel-track {
  display: flex;
  align-items: stretch;
  gap: 20px;

  width: max-content;

  /* JavaScript will update this value */
  transform: translateX(0);

  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform;
}

/* =========================================================
   TEAM CARD
========================================================= */

.team-card {
  position: relative;

  /*
    4 cards visible on desktop.

    Available width:
    viewport - 3 gaps
    Each card gets 25% of the available space.
  */

  flex: 0 0 calc((100vw - 40px - 60px - 3 * 20px) / 4);

  min-width: 0;

  display: flex;
  flex-direction: column;

  height: 570px;

  border: 1px solid var(--border);
  border-radius: 22px;

  background: var(--white);

  box-shadow: var(--shadow-sm);

  overflow: hidden;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/*
  If your .container has a max-width,
  this overrides the viewport calculation
  and keeps exactly 4 cards inside the container.
*/

.team-carousel-viewport {
  min-width: 0;
}

.team-card:hover {
  transform: translateY(-8px);
  border-color: rgba(23, 105, 224, 0.2);
  box-shadow: var(--shadow);
}

/* =========================================================
   TEAM CARD IMAGE
========================================================= */

.team-card-image {
  position: relative;

  flex: 0 0 270px;

  width: 100%;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(59, 130, 246, 0.2),
      transparent 50%
    ),
    linear-gradient(145deg, #0b2447, #081a33);
}

/* =========================================================
   TEAM MEMBER PHOTO
========================================================= */

.team-card-image img {
  position: absolute;
  inset: 0;
  display: block;

  width: 100%;
  height: 100%;

  /*
    Cover ensures the entire image area is filled
    without stretching the person's face/body.
  */

  object-fit: cover;

  /*
    Keeps the upper part of the photograph visible.
    Particularly useful for portrait/team photos.
  */

  object-position: center top;

  margin: 0;
  padding: 0;

  border: 0;
  outline: 0;

  background: transparent;

  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.4s ease;
}

.team-card:hover .team-card-image img {
  transform: scale(1.04);
}

/* =========================================================
   IMAGE OVERLAY
========================================================= */

.team-card-image::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(8, 26, 51, 0.02) 35%,
    rgba(8, 26, 51, 0.45) 100%
  );
}

/* =========================================================
   TEAM NUMBER
========================================================= */

.team-card-number {
  position: absolute;

  right: 18px;
  bottom: 18px;

  z-index: 3;

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

  width: 42px;
  height: 42px;

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;

  color: var(--white);

  background: rgba(8, 26, 51, 0.72);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

/* =========================================================
   TEAM CARD CONTENT
========================================================= */

.team-card-content {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 27px 25px 25px;

  min-height: 0;
}

/* =========================================================
   TEAM ROLE
========================================================= */

.team-card-role {
  display: block;

  min-height: 30px;

  margin-bottom: 10px;

  color: var(--blue);

  font-size: 10px;
  line-height: 1.5;
  font-weight: 800;

  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* =========================================================
   TEAM NAME
========================================================= */

.team-card h3 {
  margin: 0 0 13px;

  color: var(--navy);

  font-family: "Manrope", sans-serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;

  letter-spacing: -0.03em;
}

/* =========================================================
   TEAM DESCRIPTION
========================================================= */

.team-card-content > p {
  margin: 0;

  color: var(--text-soft);

  font-size: 13px;
  line-height: 1.7;
}

/* =========================================================
   TEAM FOCUS
========================================================= */

.team-card-focus {
  margin-top: auto;

  padding-top: 20px;

  border-top: 1px solid var(--border);
}

.team-card-focus span {
  display: block;

  margin-bottom: 7px;

  color: var(--text-muted);

  font-size: 9px;
  line-height: 1;
  font-weight: 800;

  letter-spacing: 0.14em;
}

.team-card-focus strong {
  display: block;

  color: var(--navy);

  font-family: "Manrope", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
}

/* =========================================================
   CAROUSEL BUTTONS
========================================================= */

.team-carousel-btn {
  position: relative;
  z-index: 5;

  width: 58px;
  height: 58px;

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

  flex: 0 0 58px;

  border: 1px solid var(--border);
  border-radius: 50%;

  color: var(--navy);

  background: var(--white);

  box-shadow: var(--shadow-sm);

  cursor: pointer;

  font-family: "Inter", sans-serif;
  font-size: 21px;
  font-weight: 600;

  transition:
    transform 0.3s ease,
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.team-carousel-btn:hover {
  color: var(--white);

  background: var(--blue);

  border-color: var(--blue);

  box-shadow: 0 12px 30px rgba(23, 105, 224, 0.22);

  transform: translateY(-3px);
}

.team-carousel-btn:active {
  transform: translateY(0) scale(0.96);
}

.team-carousel-btn:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* =========================================================
   CAROUSEL CONTROLS
========================================================= */

.team-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 35px;
}

/* =========================================================
   PROGRESS
========================================================= */

.team-carousel-progress {
  display: flex;
  align-items: center;
  gap: 14px;

  color: var(--text-muted);

  font-size: 11px;
  font-weight: 800;
}

.team-carousel-current {
  color: var(--blue);
}

.team-carousel-total {
  color: var(--text-muted);
}

/* =========================================================
   PROGRESS LINE
========================================================= */

.team-carousel-progress-line {
  position: relative;

  display: block;

  width: 130px;
  height: 2px;

  overflow: hidden;

  background: var(--border);
}

.team-carousel-progress-fill {
  position: absolute;

  top: 0;
  left: 0;

  width: 0;
  height: 100%;

  background: var(--blue);

  transition: width 0.5s ease;
}

/* =========================================================
   FOCUS STATES
========================================================= */

.team-carousel-btn:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.35);
  outline-offset: 4px;
}

/* =========================================================
   TABLET / LARGE TABLET
========================================================= */

@media (max-width: 1100px) {
  .team-carousel {
    grid-template-columns: 50px minmax(0, 1fr) 50px;
    gap: 15px;
  }

  .team-carousel-btn {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  /*
    3 cards visible on tablet.
  */

  .team-card {
    flex-basis: calc((100% - 40px) / 3);

    height: 550px;
  }

  .team-card-image {
    flex-basis: 250px;
  }

  .team-card-content {
    padding: 25px 22px 22px;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {
  .leadership-team-section .section-heading {
    margin-bottom: 50px;
  }

  .team-carousel {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    gap: 12px;
  }

  .team-carousel-btn {
    width: 46px;
    height: 46px;
    flex-basis: 46px;

    font-size: 18px;
  }

  /*
    2 cards visible.
  */

  .team-card {
    flex-basis: calc((100% - 20px) / 2);

    height: 535px;
  }

  .team-card-image {
    flex-basis: 240px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {
  .leadership-team-section .section-heading {
    margin-bottom: 40px;
  }

  .leadership-team-section .section-heading h2 {
    font-size: clamp(34px, 10vw, 46px);
  }

  .leadership-team-section .section-heading p {
    font-size: 14px;
    line-height: 1.7;
  }

  /*
    Put arrows closer to the carousel.
  */

  .team-carousel {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 8px;
  }

  .team-carousel-btn {
    width: 42px;
    height: 42px;

    flex-basis: 42px;

    font-size: 17px;
  }

  /*
    1 card visible on mobile.
  */

  .team-card {
    flex-basis: 100%;
    height: 530px;
  }

  .team-card-image {
    flex-basis: 250px;
  }

  .team-card-content {
    padding: 24px 22px 22px;
  }

  .team-card h3 {
    font-size: 21px;
  }

  .team-card-content > p {
    font-size: 13px;
  }

  .team-carousel-controls {
    margin-top: 28px;
  }

  .team-carousel-progress-line {
    width: 100px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .team-carousel {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 6px;
  }

  .team-carousel-btn {
    width: 38px;
    height: 38px;

    flex-basis: 38px;

    font-size: 15px;
  }

  .team-card {
    height: 500px;
    border-radius: 18px;
  }

  .team-card-image {
    flex-basis: 225px;
  }

  .team-card-content {
    padding: 21px 18px 18px;
  }

  .team-card-role {
    min-height: 27px;
    font-size: 9px;
  }

  .team-card h3 {
    margin-bottom: 10px;
    font-size: 20px;
  }

  .team-card-content > p {
    font-size: 12px;
    line-height: 1.65;
  }

  .team-card-focus {
    padding-top: 16px;
  }

  .team-card-focus strong {
    font-size: 11px;
  }

  .team-card-number {
    right: 14px;
    bottom: 14px;

    width: 36px;
    height: 36px;

    font-size: 10px;
  }

  .team-carousel-progress {
    gap: 10px;
    font-size: 10px;
  }

  .team-carousel-progress-line {
    width: 80px;
  }
}

/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {
  .team-carousel {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
  }

  .team-carousel-btn {
    width: 34px;
    height: 34px;

    flex-basis: 34px;

    font-size: 14px;
  }

  .team-card {
    height: 485px;
  }

  .team-card-image {
    flex-basis: 210px;
  }

  .team-card-content {
    padding: 19px 16px 16px;
  }

  .team-card h3 {
    font-size: 19px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .team-card,
  .team-card-image img,
  .team-carousel-track,
  .team-carousel-btn,
  .team-carousel-progress-fill {
    transition: none !important;
  }
}

/* CAREER PAGE */

.careers-page {
  color: var(--career-text);
  background: #fff;
  overflow: hidden;
}

.careers-container {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

/* =========================================================
         SIMPLE HEADER
      ========================================================== */

.careers-simple-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--career-border);
  backdrop-filter: blur(12px);
}

.careers-header-inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.careers-logo img {
  display: block;
  width: 175px;
  height: auto;
}

.careers-simple-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.careers-simple-nav a {
  color: #344054;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.careers-simple-nav a:hover {
  color: var(--career-blue);
}

.careers-nav-button {
  background: var(--career-blue);
  color: #fff !important;
  padding: 11px 18px;
  border-radius: 8px;
}

.careers-nav-button:hover {
  color: #fff !important;
  background: #0048d9;
}

/* =========================================================
         MOBILE MENU
      ========================================================== */

.careers-mobile-button {
  display: none;
  border: 0;
  background: transparent;
  padding: 8px;
  cursor: pointer;
}

.careers-mobile-button span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  background: var(--career-dark);
}

.careers-mobile-nav {
  display: none;
  border-top: 1px solid var(--career-border);
  background: #fff;
}

.careers-mobile-nav.active {
  display: block;
}

.careers-mobile-nav a {
  display: block;
  padding: 15px 20px;
  color: var(--career-text);
  text-decoration: none;
  border-bottom: 1px solid #f0f2f5;
  font-size: 15px;
  font-weight: 500;
}

/* =========================================================
         HERO
      ========================================================== */

.careers-hero-simple {
  padding: 90px 0 80px;
  background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
}

.careers-hero-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.careers-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 30px;
  background: #eaf2ff;
  color: var(--career-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.careers-hero-simple h1 {
  margin: 22px 0 18px;
  color: var(--career-dark);
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.careers-hero-simple h1 span {
  color: var(--career-blue);
}

.careers-hero-simple p {
  max-width: 680px;
  margin: 0 auto;
  color: var(--career-muted);
  font-size: 18px;
  line-height: 1.7;
}

.careers-hero-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.careers-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: 0.2s ease;
}

.careers-button-primary {
  background: var(--career-blue);
  color: #fff;
}

.careers-button-primary:hover {
  background: #0048d9;
  color: #fff;
  transform: translateY(-1px);
}

.careers-button-secondary {
  background: #fff;
  color: var(--career-text);
  border: 1px solid var(--career-border);
}

.careers-button-secondary:hover {
  border-color: var(--career-blue);
  color: var(--career-blue);
}

/* =========================================================
         QUICK MESSAGE
      ========================================================== */

.careers-welcome {
  padding: 26px 0;
  background: var(--career-dark);
}

.careers-welcome-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.careers-welcome p {
  margin: 0;
  color: #fff;
  font-size: 15px;
  line-height: 1.6;
}

.careers-welcome strong {
  color: #8eb6ff;
}

/* =========================================================
         GENERAL SECTION
      ========================================================== */

.careers-section {
  padding: 85px 0;
}

.careers-section-light {
  background: var(--career-light);
}

.careers-section-heading {
  max-width: 700px;
  margin: 0 auto 45px;
  text-align: center;
}

.careers-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--career-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.careers-section-heading h2 {
  margin: 0 0 14px;
  color: var(--career-dark);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.careers-section-heading p {
  margin: 0;
  color: var(--career-muted);
  font-size: 16px;
  line-height: 1.7;
}

/* =========================================================
         WHY JOIN
      ========================================================== */

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

.careers-simple-card {
  padding: 28px;
  background: #fff;
  border: 1px solid var(--career-border);
  border-radius: 12px;
}

.careers-simple-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 9px;
  background: #eaf2ff;
  color: var(--career-blue);
  font-size: 19px;
  font-weight: 700;
}

.careers-simple-card h3 {
  margin: 0 0 9px;
  color: var(--career-dark);
  font-size: 18px;
}

.careers-simple-card p {
  margin: 0;
  color: var(--career-muted);
  font-size: 14px;
  line-height: 1.7;
}

/* =========================================================
         CAREER AREAS
      ========================================================== */

.careers-area-list {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.careers-area-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--career-border);
  border-radius: 10px;
}

.careers-area-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f0f5ff;
  color: var(--career-blue);
  font-size: 17px;
  font-weight: 700;
}

.careers-area-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--career-dark);
  font-size: 15px;
}

.careers-area-item span {
  display: block;
  color: var(--career-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* =========================================================
         OPPORTUNITIES
      ========================================================== */

.careers-opportunities {
  max-width: 900px;
  margin: 0 auto;
}

.careers-opportunity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 24px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--career-border);
  border-radius: 10px;
}

.careers-opportunity:last-child {
  margin-bottom: 0;
}

.careers-opportunity h3 {
  margin: 0 0 7px;
  color: var(--career-dark);
  font-size: 17px;
}

.careers-opportunity p {
  margin: 0 0 10px;
  color: var(--career-muted);
  font-size: 13px;
  line-height: 1.6;
}

.careers-opportunity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.careers-opportunity-meta span {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 5px;
  background: #f2f4f7;
  color: #475467;
  font-size: 11px;
  font-weight: 600;
}

.careers-opportunity-action {
  flex-shrink: 0;
  color: var(--career-blue);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.careers-opportunity-action:hover {
  text-decoration: underline;
}

.careers-note {
  max-width: 900px;
  margin: 22px auto 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: #fff8e6;
  color: #7a5a00;
  font-size: 12px;
  line-height: 1.6;
}

/* =========================================================
         INTERNSHIP SECTION
      ========================================================== */

.careers-internship {
  padding: 85px 0;
  background: #eef5ff;
}

.careers-internship-box {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.careers-internship h2 {
  margin: 0 0 15px;
  color: var(--career-dark);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.careers-internship h2 span {
  color: var(--career-blue);
}

.careers-internship-description {
  margin: 0;
  color: var(--career-muted);
  font-size: 16px;
  line-height: 1.75;
}

.careers-internship-points {
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
}

.careers-internship-points li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 13px;
  color: #344054;
  font-size: 14px;
  line-height: 1.6;
}

.careers-internship-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--career-green);
  font-weight: 800;
}

.careers-internship-card {
  padding: 30px;
  background: #fff;
  border: 1px solid #dce6f5;
  border-radius: 14px;
}

.careers-internship-card h3 {
  margin: 0 0 10px;
  color: var(--career-dark);
  font-size: 20px;
}

.careers-internship-card p {
  margin: 0 0 20px;
  color: var(--career-muted);
  font-size: 14px;
  line-height: 1.6;
}

.careers-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 25px;
}

.careers-tags span {
  padding: 7px 10px;
  border-radius: 6px;
  background: #f2f4f7;
  color: #475467;
  font-size: 12px;
}

/* =========================================================
         PROCESS
      ========================================================== */

.careers-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.careers-process-item {
  padding: 24px;
  border: 1px solid var(--career-border);
  border-radius: 10px;
  background: #fff;
}

.careers-process-number {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #eaf2ff;
  color: var(--career-blue);
  font-size: 12px;
  font-weight: 800;
}

.careers-process-item h3 {
  margin: 0 0 8px;
  color: var(--career-dark);
  font-size: 16px;
}

.careers-process-item p {
  margin: 0;
  color: var(--career-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* =========================================================
         FAQ
      ========================================================== */

.careers-faq {
  max-width: 800px;
  margin: 0 auto;
}

.careers-faq-item {
  border-bottom: 1px solid var(--career-border);
}

.careers-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border: 0;
  background: transparent;
  color: var(--career-dark);
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.careers-faq-plus {
  color: var(--career-blue);
  font-size: 20px;
  font-weight: 400;
  transition: transform 0.2s ease;
}

.careers-faq-item.open .careers-faq-plus {
  transform: rotate(45deg);
}

.careers-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.careers-faq-answer p {
  margin: 0;
  padding: 0 0 20px;
  color: var(--career-muted);
  font-size: 14px;
  line-height: 1.7;
}

/* =========================================================
         FINAL CTA
      ========================================================== */

.careers-final {
  padding: 75px 0;
  background: var(--career-dark);
}

.careers-final-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.careers-final h2 {
  margin: 0 0 15px;
  color: #fff;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.careers-final p {
  margin: 0 auto;
  max-width: 620px;
  color: #b9c5d6;
  font-size: 15px;
  line-height: 1.7;
}

.careers-final .careers-button-primary {
  margin-top: 25px;
  background: #fff;
  color: var(--career-blue);
}

.careers-final .careers-button-primary:hover {
  background: #f2f5f9;
  color: var(--career-blue);
}

/* =========================================================
         SIMPLE FOOTER
      ========================================================== */

.careers-footer {
  padding: 45px 0 25px;
  background: #061328;
  color: #fff;
}

.careers-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 40px;
}

.careers-footer-brand img {
  width: 170px;
  height: auto;
  margin-bottom: 15px;
}

.careers-footer-brand p {
  max-width: 330px;
  margin: 0;
  color: #9eabbf;
  font-size: 13px;
  line-height: 1.7;
}

.careers-footer-column h3 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 14px;
}

.careers-footer-column a {
  display: block;
  margin-bottom: 9px;
  color: #9eabbf;
  text-decoration: none;
  font-size: 13px;
}

.careers-footer-column a:hover {
  color: #fff;
}

.careers-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 35px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.careers-footer-bottom p,
.careers-footer-bottom a {
  margin: 0;
  color: #7f8da3;
  font-size: 12px;
  text-decoration: none;
}

.careers-footer-bottom-links {
  display: flex;
  gap: 20px;
}

/* =========================================================
         RESPONSIVE
      ========================================================== */

@media (max-width: 900px) {
  .careers-simple-nav {
    display: none;
  }

  .careers-mobile-button {
    display: block;
  }

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

  .careers-internship-box {
    grid-template-columns: 1fr;
    gap: 35px;
  }

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

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

@media (max-width: 700px) {
  .careers-container {
    width: min(100% - 30px, 1120px);
  }

  .careers-header-inner {
    min-height: 65px;
  }

  .careers-logo img {
    width: 150px;
  }

  .careers-hero-simple {
    padding: 100px 0px;
  }

  .careers-hero-simple p {
    font-size: 16px;
  }

  .careers-section {
    padding: 60px 0;
  }

  .careers-simple-grid,
  .careers-area-list,
  .careers-process {
    grid-template-columns: 1fr;
  }

  .careers-opportunity {
    display: block;
  }

  .careers-opportunity-action {
    display: inline-block;
    margin-top: 15px;
  }

  .careers-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px 20px;
  }

  .careers-footer-brand {
    grid-column: 1 / -1;
  }

  .careers-footer-bottom {
    display: block;
  }

  .careers-footer-bottom-links {
    margin-top: 12px;
  }
}

@media (max-width: 480px) {
  .careers-hero-buttons {
    flex-direction: column;
  }

  .careers-button {
    width: 100%;
  }

  .careers-footer-grid {
    grid-template-columns: 1fr;
  }

  .careers-footer-brand {
    grid-column: auto;
  }
}

/* Partners */
/* =========================================================
   PARTNERS PAGE
========================================================= */

.partners-page {
  background: #ffffff;
  color: #081a33;
}

/* =========================================================
   HERO
========================================================= */

.partners-hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 75% 40%,
      rgba(35, 103, 255, 0.14),
      transparent 30%
    ),
    linear-gradient(135deg, #f7faff 0%, #ffffff 55%, #f4f8ff 100%);
  display: flex;
  align-items: center;
}

.partners-hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image:
    linear-gradient(rgba(8, 26, 51, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 26, 51, 0.035) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(to bottom, black, transparent);
}

.partners-hero-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  right: -180px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(45, 107, 255, 0.09);
  filter: blur(30px);
}

.partners-hero-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: center;
  padding-top: 90px;
  padding-bottom: 90px;
}

.partners-hero-content {
  max-width: 700px;
}

.partners-hero-content h1 {
  margin: 20px 0 25px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(48px, 6vw, 78px);
  line-height: 1.02;
  letter-spacing: -3px;
  color: #081a33;
}

.partners-hero-content h1 span {
  display: block;
  color: #2563eb;
}

.partners-hero-content > p {
  max-width: 650px;
  margin: 0;
  color: #536176;
  font-size: 18px;
  line-height: 1.8;
}

.partners-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 35px;
}

.partners-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 55px;
}

.partners-hero-trust > div {
  min-width: 175px;
  padding: 0 28px;
  border-left: 1px solid #dce4ef;
}

.partners-hero-trust > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.partners-hero-trust strong {
  display: block;
  margin-bottom: 5px;
  font-family: "Manrope", sans-serif;
  font-size: 25px;
  color: #081a33;
}

.partners-hero-trust span {
  color: #657287;
  font-size: 13px;
  font-weight: 600;
}

/* =========================================================
   HERO VISUAL
========================================================= */

.partners-hero-visual {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-orbit {
  position: absolute;
  border: 1px solid rgba(37, 99, 235, 0.13);
  border-radius: 50%;
}

.orbit-one {
  width: 330px;
  height: 330px;
}

.orbit-two {
  width: 470px;
  height: 470px;
}

.orbit-three {
  width: 600px;
  height: 600px;
  border-color: rgba(37, 99, 235, 0.07);
}

.partner-center-card {
  position: relative;
  z-index: 5;
  width: 245px;
  height: 245px;
  border-radius: 50%;
  background: linear-gradient(145deg, #0a2346, #102e58);
  box-shadow:
    0 30px 70px rgba(8, 26, 51, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
}

.partner-center-logo {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  font-family: "Manrope", sans-serif;
  font-size: 27px;
  font-weight: 800;
  color: #ffffff;
}

.partner-center-card span {
  font-size: 10px;
  letter-spacing: 2px;
  color: #91b8ff;
  font-weight: 700;
}

.partner-center-card strong {
  margin-top: 7px;
  font-family: "Manrope", sans-serif;
  font-size: 19px;
}

.partner-center-card small {
  max-width: 150px;
  margin-top: 8px;
  color: #aabbd4;
  line-height: 1.5;
}

.partner-floating-card {
  position: absolute;
  z-index: 8;
  min-width: 155px;
  padding: 15px 18px;
  border: 1px solid #e3eaf4;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 45px rgba(8, 26, 51, 0.1);
  backdrop-filter: blur(12px);
}

.partner-floating-card span {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  margin-right: 7px;
  border-radius: 9px;
  background: #edf4ff;
  color: #2563eb;
}

.partner-floating-card strong {
  font-size: 13px;
}

.partner-floating-card small {
  display: block;
  margin-top: 4px;
  margin-left: 39px;
  color: #7a8799;
  font-size: 11px;
}

.partner-card-one {
  top: 80px;
  left: 20px;
}

.partner-card-two {
  top: 85px;
  right: 5px;
}

.partner-card-three {
  bottom: 90px;
  left: 5px;
}

.partner-card-four {
  right: 25px;
  bottom: 65px;
}

/* =========================================================
   INTRO
========================================================= */

.partners-intro {
  background: #ffffff;
}

.partners-intro-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 90px;
  align-items: center;
}

.partners-intro-content h2 {
  max-width: 650px;
  margin: 18px 0 25px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.08;
  letter-spacing: -2px;
}

.partners-intro-content h2 span {
  display: block;
  color: #2563eb;
}

.partners-intro-content p {
  max-width: 680px;
  margin: 0 0 18px;
  color: #59677b;
  line-height: 1.85;
  font-size: 16px;
}

.partners-intro-highlight {
  position: relative;
  overflow: hidden;
  padding: 45px;
  border-radius: 22px;
  background: #f4f8ff;
  border: 1px solid #e1eaf7;
}

.intro-highlight-number {
  display: block;
  color: #b7c6da;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
}

.intro-highlight-icon {
  margin: 25px 0 18px;
  color: #2563eb;
  font-size: 34px;
}

.partners-intro-highlight h3 {
  margin: 0 0 12px;
  font-family: "Manrope", sans-serif;
  font-size: 27px;
}

.partners-intro-highlight p {
  margin: 0;
  color: #66758b;
  line-height: 1.75;
}

.intro-highlight-line {
  width: 65px;
  height: 3px;
  margin: 28px 0 15px;
  background: #2563eb;
}

.intro-highlight-label {
  color: #718098;
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 800;
}

/* =========================================================
   PARTNERSHIP TYPES
========================================================= */

.partnership-types {
  background: #f7f9fc;
}

.partner-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.partner-type-card {
  position: relative;
  min-height: 360px;
  padding: 30px;
  border: 1px solid #e3e9f2;
  border-radius: 18px;
  background: #ffffff;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.partner-type-card:hover,
.partner-type-card.partner-active {
  transform: translateY(-7px);
  border-color: #c8d9f5;
  box-shadow: 0 22px 50px rgba(8, 26, 51, 0.09);
}

.partner-type-number {
  color: #b5c2d4;
  font-size: 12px;
  font-weight: 800;
}

.partner-type-icon {
  width: 52px;
  height: 52px;
  margin: 30px 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 23px;
}

.partner-type-icon.blue {
  color: #2563eb;
  background: #edf4ff;
}

.partner-type-icon.purple {
  color: #7c3aed;
  background: #f3edff;
}

.partner-type-icon.green {
  color: #16a34a;
  background: #edfaf1;
}

.partner-type-icon.orange {
  color: #ea580c;
  background: #fff2e9;
}

.partner-type-card h3 {
  margin: 0 0 13px;
  font-family: "Manrope", sans-serif;
  font-size: 20px;
}

.partner-type-card p {
  margin: 0;
  color: #68768a;
  line-height: 1.7;
  font-size: 14px;
}

.partner-type-card a {
  position: absolute;
  left: 30px;
  bottom: 28px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.partner-type-card a span {
  margin-left: 5px;
}

/* =========================================================
   WHY PARTNER
========================================================= */

.why-partner-section {
  background: #ffffff;
}

.why-partner-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 90px;
  align-items: center;
}

.why-partner-visual {
  position: relative;
  min-height: 550px;
  display: flex;
  align-items: center;
}

.why-partner-panel {
  width: 100%;
  min-height: 480px;
  padding: 55px;
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(58, 127, 255, 0.22),
      transparent 30%
    ),
    linear-gradient(145deg, #071a34, #0c2b52);
  color: #ffffff;
  box-shadow: 0 30px 70px rgba(8, 26, 51, 0.18);
}

.why-partner-label {
  color: #8db4ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

.why-partner-panel h3 {
  margin: 35px 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(42px, 5vw, 65px);
  line-height: 1.03;
  letter-spacing: -2px;
}

.why-partner-line {
  width: 65px;
  height: 3px;
  margin-bottom: 25px;
  background: #3d82ff;
}

.why-partner-panel p {
  max-width: 350px;
  color: #a9bad1;
  line-height: 1.75;
}

.why-floating-stat {
  position: absolute;
  padding: 17px 22px;
  background: #ffffff;
  border: 1px solid #e2e9f2;
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(8, 26, 51, 0.13);
}

.why-floating-stat strong {
  display: block;
  color: #2563eb;
  font-family: "Manrope", sans-serif;
  font-size: 21px;
}

.why-floating-stat span {
  color: #6d7a8d;
  font-size: 11px;
  font-weight: 700;
}

.stat-top {
  top: 50px;
  right: -25px;
}

.stat-bottom {
  bottom: 50px;
  left: -25px;
}

.why-partner-content h2 {
  margin: 18px 0 24px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(38px, 5vw, 57px);
  line-height: 1.08;
  letter-spacing: -2px;
}

.why-partner-content h2 span {
  display: block;
  color: #2563eb;
}

.why-partner-content > p {
  max-width: 650px;
  color: #657287;
  line-height: 1.8;
}

.why-partner-list {
  margin-top: 35px;
}

.why-partner-item {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid #e8edf4;
}

.why-partner-item > span {
  color: #9ba9bb;
  font-size: 12px;
  font-weight: 800;
}

.why-partner-item h3 {
  margin: 0 0 7px;
  font-family: "Manrope", sans-serif;
  font-size: 17px;
}

.why-partner-item p {
  margin: 0;
  color: #728095;
  line-height: 1.65;
  font-size: 14px;
}

/* =========================================================
   ECOSYSTEM
========================================================= */

.partner-ecosystem {
  background: #f7f9fc;
  overflow: hidden;
}

.ecosystem-wrapper {
  position: relative;
  max-width: 850px;
  height: 600px;
  margin: 70px auto 0;
}

.ecosystem-center {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 210px;
  height: 210px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(145deg, #0a2244, #123a6c);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #ffffff;
  box-shadow: 0 25px 65px rgba(8, 26, 51, 0.22);
}

.ecosystem-center > div {
  width: 50px;
  height: 50px;
  margin-bottom: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  font-weight: 800;
}

.ecosystem-center strong {
  font-family: "Manrope", sans-serif;
  font-size: 16px;
}

.ecosystem-center small {
  max-width: 135px;
  margin-top: 7px;
  color: #9fb5d1;
  line-height: 1.4;
}

.ecosystem-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 290px;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    rgba(37, 99, 235, 0.35),
    rgba(37, 99, 235, 0)
  );
}

.ecosystem-line-one {
  transform: rotate(0deg);
}

.ecosystem-line-two {
  transform: rotate(120deg);
}

.ecosystem-line-three {
  transform: rotate(240deg);
}

.ecosystem-node {
  position: absolute;
  z-index: 8;
  width: 190px;
  padding: 22px;
  border: 1px solid #dfe7f1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(8, 26, 51, 0.08);
  text-align: center;
}

.ecosystem-node span {
  display: block;
  margin-bottom: 8px;
  font-size: 25px;
}

.ecosystem-node strong {
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
}

.ecosystem-node small {
  display: block;
  margin-top: 5px;
  color: #78869a;
  font-size: 11px;
}

.ecosystem-node-one {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.ecosystem-node-two {
  right: 10px;
  bottom: 55px;
}

.ecosystem-node-three {
  left: 10px;
  bottom: 55px;
}

.ecosystem-node-four {
  top: 240px;
  right: 0;
}

/* =========================================================
   PROCESS
========================================================= */

.partner-process {
  background: #ffffff;
}

.partner-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.process-card {
  position: relative;
  padding: 32px;
  min-height: 300px;
  border: 1px solid #e3e9f2;
  border-radius: 18px;
  background: #ffffff;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.process-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(8, 26, 51, 0.08);
}

.process-card > span {
  color: #aebacd;
  font-size: 12px;
  font-weight: 800;
}

.process-icon {
  margin: 35px 0 20px;
  font-size: 30px;
}

.process-card h3 {
  margin: 0 0 12px;
  font-family: "Manrope", sans-serif;
  font-size: 21px;
}

.process-card p {
  margin: 0;
  color: #6c798c;
  line-height: 1.7;
  font-size: 14px;
}

/* =========================================================
   IDEAL PARTNER
========================================================= */

.ideal-partner-section {
  background: #f7f9fc;
}

.ideal-partner-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 90px;
  align-items: center;
}

.ideal-partner-content h2 {
  margin: 18px 0 22px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -2px;
}

.ideal-partner-content h2 span {
  display: block;
  color: #2563eb;
}

.ideal-partner-content > p {
  max-width: 650px;
  color: #66758a;
  line-height: 1.8;
}

.ideal-check-list {
  margin-top: 30px;
}

.ideal-check-list > div {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-bottom: 15px;
}

.ideal-check-list span {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf2ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
}

.ideal-check-list p {
  margin: 0;
  color: #536176;
  font-size: 14px;
}

.ideal-partner-card {
  overflow: hidden;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #dfe7f1;
  box-shadow: 0 25px 60px rgba(8, 26, 51, 0.08);
}

.ideal-card-top {
  padding: 30px;
  background: #0a2346;
  color: #ffffff;
}

.ideal-card-top span {
  display: block;
  margin-bottom: 7px;
  color: #88aeef;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

.ideal-card-top strong {
  font-family: "Manrope", sans-serif;
  font-size: 20px;
}

.ideal-card-body {
  padding: 30px;
}

.ideal-profile-row {
  display: flex;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid #e9edf3;
}

.ideal-profile-row span {
  color: #68768a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.7px;
}

.ideal-profile-row strong {
  color: #22a45d;
}

.ideal-profile-score {
  margin-top: 25px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
  background: #f2f8f4;
}

.ideal-profile-score span {
  color: #64766b;
  font-size: 10px;
  font-weight: 800;
}

.ideal-profile-score strong {
  color: #169653;
  font-family: "Manrope", sans-serif;
}

/* =========================================================
   BENEFITS
========================================================= */

.partner-benefits {
  background: #ffffff;
}

.partner-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.benefit-card {
  padding: 30px;
  min-height: 270px;
  border-top: 2px solid #2563eb;
  background: #f8fafc;
}

.benefit-card > span {
  color: #a6b4c7;
  font-size: 12px;
  font-weight: 800;
}

.benefit-card h3 {
  margin: 35px 0 12px;
  font-family: "Manrope", sans-serif;
  font-size: 19px;
}

.benefit-card p {
  margin: 0;
  color: #6d7a8e;
  font-size: 14px;
  line-height: 1.75;
}

/* =========================================================
   FINAL CTA
========================================================= */

.partners-final-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    radial-gradient(
      circle at 75% 40%,
      rgba(42, 109, 255, 0.2),
      transparent 30%
    ),
    #071a34;
  color: #ffffff;
}

.partners-final-grid {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 70px 70px;
}

.partners-final-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  right: -160px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.15);
  filter: blur(30px);
}

.partners-final-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  text-align: center;
  margin: 0 auto;
}

.partners-final-content .eyebrow {
  color: #8eb6ff;
}

.partners-final-content h2 {
  margin: 18px 0 22px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(42px, 6vw, 68px);
  line-height: 1.05;
  letter-spacing: -2px;
}

.partners-final-content h2 span {
  display: block;
  color: #67a0ff;
}

.partners-final-content > p {
  max-width: 680px;
  margin: 0 auto;
  color: #a9bad1;
  line-height: 1.8;
  font-size: 16px;
}

.partners-final-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
  margin-top: 35px;
}

.partners-final-actions .final-text-link {
  color: #ffffff;
}

/* =========================================================
   REVEAL ANIMATION
========================================================= */

.partners-page .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}

.partners-page .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {
  .partners-hero-container {
    gap: 40px;
  }

  .partner-type-grid,
  .partner-process-grid,
  .partner-benefit-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ecosystem-wrapper {
    max-width: 760px;
  }
}

@media (max-width: 992px) {
  .partners-hero {
    min-height: auto;
  }

  .partners-hero-container,
  .partners-intro-grid,
  .why-partner-grid,
  .ideal-partner-grid {
    grid-template-columns: 1fr;
  }

  .partners-hero-container {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .partners-hero-content {
    max-width: 850px;
  }

  .partners-hero-visual {
    min-height: 500px;
  }

  .partners-intro-grid,
  .why-partner-grid,
  .ideal-partner-grid {
    gap: 50px;
  }

  .why-partner-visual {
    min-height: 500px;
  }

  .partner-type-grid,
  .partner-process-grid,
  .partner-benefit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .partners-hero-content h1 {
    font-size: 48px;
    letter-spacing: -2px;
  }

  .partners-hero-content > p {
    font-size: 16px;
  }

  .partners-hero-trust {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .partners-hero-trust > div,
  .partners-hero-trust > div:first-child {
    padding: 0 0 0 18px;
    border-left: 2px solid #dce4ef;
  }

  .partners-hero-visual {
    min-height: 430px;
    transform: scale(0.9);
  }

  .orbit-three {
    width: 470px;
    height: 470px;
  }

  .orbit-two {
    width: 370px;
    height: 370px;
  }

  .orbit-one {
    width: 280px;
    height: 280px;
  }

  .partner-floating-card {
    min-width: 135px;
    padding: 12px;
  }

  .partner-card-one {
    left: -5px;
  }

  .partner-card-two {
    right: -5px;
  }

  .partner-card-three {
    left: -5px;
  }

  .partner-card-four {
    right: -5px;
  }

  .partners-intro-highlight {
    padding: 35px;
  }

  .partner-type-grid,
  .partner-process-grid,
  .partner-benefit-grid {
    grid-template-columns: 1fr;
  }

  .partner-type-card,
  .process-card,
  .benefit-card {
    min-height: auto;
  }

  .partner-type-card {
    padding-bottom: 85px;
  }

  .why-partner-panel {
    min-height: 420px;
    padding: 40px;
  }

  .why-floating-stat {
    display: none;
  }

  .ecosystem-wrapper {
    height: 650px;
    transform: scale(0.85);
    transform-origin: center top;
    margin-bottom: -70px;
  }
}

@media (max-width: 576px) {
  .partners-hero-content h1 {
    font-size: 40px;
  }

  .partners-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .partners-hero-actions .btn {
    justify-content: center;
  }

  .partners-hero-visual {
    min-height: 360px;
    transform: scale(0.72);
    margin-left: -15%;
    margin-right: -15%;
  }

  .partner-center-card {
    width: 210px;
    height: 210px;
  }

  .partners-intro-content h2,
  .why-partner-content h2,
  .ideal-partner-content h2 {
    font-size: 38px;
  }

  .why-partner-panel {
    min-height: 390px;
    padding: 32px;
  }

  .why-partner-panel h3 {
    font-size: 43px;
  }

  .ecosystem-wrapper {
    transform: scale(0.65);
    margin-left: -28%;
    margin-right: -28%;
    margin-bottom: -170px;
  }

  .partners-final-cta {
    padding: 90px 0;
  }

  .partners-final-content h2 {
    font-size: 43px;
  }
}

/* CONTACT PAGE */
/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-page {
  background: #ffffff;
  color: #081a33;
}

/* =========================================================
   CONTACT HERO
========================================================= */

.contact-hero {
  position: relative;
  overflow: hidden;
  min-height: 650px;
  padding: 150px 0 110px;
  background:
    radial-gradient(
      circle at 85% 25%,
      rgba(31, 106, 255, 0.16),
      transparent 30%
    ),
    linear-gradient(135deg, #f5f9ff 0%, #ffffff 55%, #eef5ff 100%);
}

.contact-hero-grid,
.contact-final-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;

  background-image:
    linear-gradient(rgba(8, 26, 51, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 26, 51, 0.04) 1px, transparent 1px);

  background-size: 60px 60px;

  mask-image: linear-gradient(to bottom, black, transparent);
}

.contact-hero-container {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(420px, 0.95fr);

  gap: 80px;

  align-items: center;
}

.contact-hero-content {
  max-width: 700px;
}

.contact-page .eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 22px;

  color: #246bdb;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}

.contact-page .eyebrow::before {
  content: "";

  width: 28px;

  height: 2px;

  background: #246bdb;
}

.contact-hero h1 {
  margin: 0;

  max-width: 700px;

  font-family: "Manrope", sans-serif;

  font-size: clamp(48px, 6vw, 78px);

  line-height: 1.02;

  letter-spacing: -0.055em;

  font-weight: 800;

  color: #081a33;
}

.contact-hero h1 span,
.contact-page h2 span {
  color: #246bdb;
}

.contact-hero-content > p {
  max-width: 640px;

  margin: 28px 0 0;

  color: #5f6d82;

  font-size: 18px;

  line-height: 1.8;
}

.contact-hero-points {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 14px;

  margin-top: 42px;
}

.contact-hero-points > div {
  display: flex;

  flex-direction: column;

  gap: 12px;

  padding: 18px;

  border: 1px solid rgba(8, 26, 51, 0.08);

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.72);

  backdrop-filter: blur(10px);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.contact-hero-points > div:hover {
  transform: translateY(-5px);

  border-color: rgba(36, 107, 219, 0.25);

  box-shadow: 0 18px 40px rgba(8, 26, 51, 0.08);
}

.contact-hero-points span {
  color: #246bdb;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.12em;
}

.contact-hero-points strong {
  color: #081a33;

  font-size: 13px;

  line-height: 1.45;
}

/* =========================================================
   HERO VISUAL
========================================================= */

.contact-hero-visual {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 490px;
}

.contact-orbit {
  position: absolute;

  border: 1px solid rgba(36, 107, 219, 0.15);

  border-radius: 50%;

  animation: contactOrbit 10s linear infinite;
}

.orbit-one {
  width: 470px;
  height: 470px;
}

.orbit-two {
  width: 360px;
  height: 360px;

  animation-duration: 7s;

  animation-direction: reverse;
}

@keyframes contactOrbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.contact-visual-card {
  position: relative;

  z-index: 2;

  width: min(100%, 450px);

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 26px;

  background: linear-gradient(145deg, #0c2345, #081a33);

  color: #ffffff;

  box-shadow: 0 35px 90px rgba(8, 26, 51, 0.28);
}

.contact-visual-header {
  display: flex;

  align-items: center;

  gap: 14px;

  padding: 22px 24px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-visual-logo {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  border-radius: 12px;

  background: linear-gradient(135deg, #2d7df6, #1252b8);

  font-family: "Manrope", sans-serif;

  font-size: 18px;

  font-weight: 800;
}

.contact-visual-header div:nth-child(2) {
  display: flex;

  flex-direction: column;

  gap: 4px;

  flex: 1;
}

.contact-visual-header small {
  color: rgba(255, 255, 255, 0.5);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.16em;
}

.contact-visual-header strong {
  font-size: 14px;
}

.contact-online {
  color: #51d99b;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.08em;
}

.contact-visual-body {
  position: relative;

  min-height: 320px;

  padding: 50px 30px;

  text-align: center;

  background: radial-gradient(
    circle at center,
    rgba(36, 107, 219, 0.18),
    transparent 55%
  );
}

.contact-center-icon {
  display: grid;

  place-items: center;

  width: 70px;
  height: 70px;

  margin: 0 auto 18px;

  border: 1px solid rgba(255, 255, 255, 0.16);

  border-radius: 22px;

  background: rgba(255, 255, 255, 0.08);

  color: #6da4ff;

  font-size: 26px;

  box-shadow: 0 0 45px rgba(36, 107, 219, 0.25);
}

.contact-visual-body h3 {
  margin: 0;

  font-family: "Manrope", sans-serif;

  font-size: 25px;

  letter-spacing: -0.03em;
}

.contact-visual-body h3 span {
  color: #63a0ff;
}

.contact-visual-body p {
  margin: 8px 0 0;

  color: rgba(255, 255, 255, 0.5);

  font-size: 12px;
}

.contact-visual-nodes {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

  margin-top: 38px;
}

.contact-visual-nodes span {
  padding: 11px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.04);

  color: rgba(255, 255, 255, 0.72);

  font-size: 11px;
}

.contact-visual-footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  padding: 18px 24px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-visual-footer span {
  color: rgba(255, 255, 255, 0.4);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 0.14em;
}

.contact-visual-footer strong {
  color: #ffffff;

  font-size: 11px;
}

/* =========================================================
   MAIN CONTACT
========================================================= */

.contact-main {
  background: #ffffff;
}

.contact-main-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(340px, 0.75fr);

  gap: 90px;

  align-items: start;
}

.contact-section-label h2,
.contact-information h2,
.contact-reasons-content h2 {
  margin: 0;

  font-family: "Manrope", sans-serif;

  font-size: clamp(34px, 4vw, 52px);

  line-height: 1.08;

  letter-spacing: -0.045em;

  color: #081a33;
}

.contact-section-label p,
.contact-info-intro,
.contact-reasons-content > p {
  max-width: 620px;

  margin: 18px 0 0;

  color: #66758a;

  font-size: 16px;

  line-height: 1.75;
}

/* =========================================================
   FORM
========================================================= */

.contact-form {
  margin-top: 40px;

  padding: 34px;

  border: 1px solid rgba(8, 26, 51, 0.08);

  border-radius: 22px;

  background: #ffffff;

  box-shadow: 0 20px 70px rgba(8, 26, 51, 0.06);
}

.form-row {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 18px;
}

.form-group {
  margin-bottom: 22px;
}

.form-group label {
  display: block;

  margin-bottom: 8px;

  color: #081a33;

  font-size: 13px;

  font-weight: 700;
}

.form-group label span {
  color: #246bdb;
}

.form-group input,
.form-group select,
.form-group textarea {
  display: block;

  width: 100%;

  border: 1px solid #dce3ec;

  border-radius: 10px;

  outline: none;

  background: #fbfcfe;

  color: #081a33;

  font-family: "Inter", sans-serif;

  font-size: 14px;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.form-group input,
.form-group select {
  height: 52px;

  padding: 0 15px;
}

.form-group textarea {
  min-height: 145px;

  padding: 15px;

  resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #a4afbe;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #246bdb;

  background: #ffffff;

  box-shadow: 0 0 0 4px rgba(36, 107, 219, 0.08);
}

.form-group .form-invalid {
  border-color: #df4d5d;
}

.form-error {
  display: block;

  min-height: 16px;

  margin-top: 5px;

  color: #df4d5d;

  font-size: 11px;
}

.form-checkbox {
  display: flex;

  align-items: flex-start;

  gap: 10px;

  margin: 4px 0 22px;
}

.form-checkbox input {
  width: 17px;
  height: 17px;

  margin-top: 2px;

  accent-color: #246bdb;
}

.form-checkbox label {
  color: #66758a;

  font-size: 12px;

  line-height: 1.6;

  cursor: pointer;
}

.contact-submit {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  min-height: 54px;

  padding: 0 25px;

  border: 0;

  cursor: pointer;
}

.contact-submit:disabled {
  cursor: wait;

  opacity: 0.7;
}

.submit-arrow {
  font-size: 18px;
}

.contact-submit.is-loading .submit-arrow {
  animation: contactSpin 0.8s linear infinite;
}

@keyframes contactSpin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   FORM SUCCESS
========================================================= */

.form-success {
  display: none;

  align-items: flex-start;

  gap: 14px;

  margin-top: 22px;

  padding: 18px;

  border: 1px solid rgba(42, 174, 117, 0.2);

  border-radius: 12px;

  background: rgba(42, 174, 117, 0.06);
}

.form-success.show {
  display: flex;

  animation: successIn 0.4s ease both;
}

@keyframes successIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

.success-icon {
  display: grid;

  flex: 0 0 auto;

  place-items: center;

  width: 30px;
  height: 30px;

  border-radius: 50%;

  background: #2aae75;

  color: #ffffff;

  font-weight: 800;
}

.form-success strong {
  color: #145c42;

  font-size: 13px;
}

.form-success p {
  margin: 5px 0 0;

  color: #587467;

  font-size: 12px;

  line-height: 1.6;
}

/* =========================================================
   INFORMATION
========================================================= */

.contact-information {
  position: sticky;

  top: 110px;
}

.contact-information h2 {
  margin-top: 0;
}

.contact-info-card {
  display: flex;

  align-items: flex-start;

  gap: 15px;

  margin-top: 18px;

  padding: 19px;

  border: 1px solid rgba(8, 26, 51, 0.08);

  border-radius: 15px;

  background: #ffffff;

  color: inherit;

  text-decoration: none;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

a.contact-info-card:hover {
  transform: translateY(-4px);

  border-color: rgba(36, 107, 219, 0.22);

  box-shadow: 0 16px 35px rgba(8, 26, 51, 0.07);
}

.contact-info-icon {
  display: grid;

  flex: 0 0 auto;

  place-items: center;

  width: 44px;
  height: 44px;

  border-radius: 12px;

  background: #edf4ff;

  color: #246bdb;

  font-size: 17px;

  font-weight: 800;
}

.contact-info-card > div:last-child {
  display: flex;

  flex-direction: column;

  gap: 4px;

  min-width: 0;
}

.contact-info-card small {
  color: #8a96a8;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.14em;
}

.contact-info-card strong {
  color: #081a33;

  font-size: 13px;

  word-break: break-word;
}

.contact-info-card span {
  color: #246bdb;

  font-size: 11px;
}

.response-card {
  margin-top: 28px;

  padding: 25px;

  border-radius: 18px;

  background: linear-gradient(145deg, #081a33, #0d2a51);

  color: #ffffff;

  box-shadow: 0 22px 50px rgba(8, 26, 51, 0.18);
}

.response-card-top {
  display: flex;

  align-items: center;

  justify-content: space-between;
}

.response-card-top span {
  color: rgba(255, 255, 255, 0.45);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.16em;
}

.response-card-top strong {
  color: #63a0ff;

  font-size: 20px;
}

.response-card h3 {
  margin: 35px 0 10px;

  font-family: "Manrope", sans-serif;

  font-size: 24px;

  line-height: 1.2;
}

.response-card p {
  margin: 0;

  color: rgba(255, 255, 255, 0.56);

  font-size: 13px;

  line-height: 1.7;
}

/* =========================================================
   SERVICES
========================================================= */

.contact-services {
  background: #f7f9fc;
}

.contact-service-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;

  margin-top: 50px;
}

.contact-service-card {
  position: relative;

  display: flex;

  flex-direction: column;

  min-height: 320px;

  padding: 28px;

  overflow: hidden;

  border: 1px solid rgba(8, 26, 51, 0.08);

  border-radius: 18px;

  background: #ffffff;

  color: #081a33;

  text-decoration: none;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.contact-service-card:hover {
  transform: translateY(-7px);

  border-color: rgba(36, 107, 219, 0.2);

  box-shadow: 0 25px 55px rgba(8, 26, 51, 0.1);
}

.service-number {
  position: absolute;

  top: 22px;

  right: 22px;

  color: #b9c4d3;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.1em;
}

.service-icon {
  display: grid;

  place-items: center;

  width: 50px;
  height: 50px;

  margin-bottom: 25px;

  border-radius: 14px;

  background: #edf4ff;

  color: #246bdb;

  font-size: 20px;

  font-weight: 800;
}

.contact-service-card h3 {
  margin: 0;

  font-family: "Manrope", sans-serif;

  font-size: 20px;

  letter-spacing: -0.02em;
}

.contact-service-card p {
  margin: 12px 0 0;

  color: #6c7a8d;

  font-size: 13px;

  line-height: 1.7;
}

.service-link {
  margin-top: auto;

  padding-top: 25px;

  color: #246bdb;

  font-size: 12px;

  font-weight: 700;
}

.service-card-dark {
  background: linear-gradient(145deg, #081a33, #0d2b54);

  color: #ffffff;

  border-color: rgba(255, 255, 255, 0.06);
}

.service-card-dark p {
  color: rgba(255, 255, 255, 0.55);
}

.service-card-dark .service-number {
  color: rgba(255, 255, 255, 0.28);
}

.service-card-dark .service-icon {
  background: rgba(255, 255, 255, 0.08);

  color: #75aaff;
}

/* =========================================================
   REASONS
========================================================= */

.contact-reasons {
  background: #ffffff;
}

.contact-reasons-grid {
  display: grid;

  grid-template-columns:
    0.9fr
    1.1fr;

  gap: 100px;

  align-items: start;
}

.contact-reasons-content > p {
  max-width: 530px;

  margin-bottom: 30px;
}

.contact-reason-list {
  border-top: 1px solid #e3e8ef;
}

.reason-item {
  display: grid;

  grid-template-columns: 50px 1fr;

  gap: 18px;

  padding: 24px 0;

  border-bottom: 1px solid #e3e8ef;
}

.reason-item > span {
  color: #246bdb;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.1em;
}

.reason-item h3 {
  margin: 0;

  font-family: "Manrope", sans-serif;

  font-size: 17px;
}

.reason-item p {
  margin: 7px 0 0;

  color: #6c7a8d;

  font-size: 13px;

  line-height: 1.65;
}

/* =========================================================
   FAQ
========================================================= */

.contact-faq {
  background: #f7f9fc;
}

.faq-list {
  max-width: 900px;

  margin: 45px auto 0;
}

.faq-item {
  border-top: 1px solid #dce2ea;
}

.faq-item:last-child {
  border-bottom: 1px solid #dce2ea;
}

.faq-question {
  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  min-height: 76px;

  padding: 0;

  border: 0;

  outline: none;

  background: transparent;

  color: #081a33;

  font-family: "Manrope", sans-serif;

  font-size: 16px;

  font-weight: 700;

  text-align: left;

  cursor: pointer;
}

.faq-plus {
  display: grid;

  flex: 0 0 auto;

  place-items: center;

  width: 32px;
  height: 32px;

  border: 1px solid #dce2ea;

  border-radius: 50%;

  color: #246bdb;

  font-size: 18px;

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.faq-item.open .faq-plus {
  transform: rotate(45deg);

  background: #edf4ff;
}

.faq-answer {
  max-height: 0;

  overflow: hidden;

  transition: max-height 0.35s ease;
}

.faq-answer p {
  max-width: 780px;

  margin: 0;

  padding: 0 55px 25px 0;

  color: #68778a;

  font-size: 14px;

  line-height: 1.8;
}

/* =========================================================
   FINAL CTA
========================================================= */

.contact-final-cta {
  position: relative;

  overflow: hidden;

  padding: 115px 0;

  background: linear-gradient(135deg, #081a33, #0b2850);

  color: #ffffff;
}

.contact-final-grid {
  opacity: 0.2;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);

  background-size: 55px 55px;
}

.contact-final-content {
  position: relative;

  z-index: 2;

  max-width: 850px;

  margin: auto;

  text-align: center;
}

.contact-final-content .eyebrow {
  justify-content: center;

  color: #75aaff;
}

.contact-final-content .eyebrow::before {
  background: #75aaff;
}

.contact-final-content h2 {
  margin: 0;

  font-family: "Manrope", sans-serif;

  font-size: clamp(40px, 5vw, 68px);

  line-height: 1.05;

  letter-spacing: -0.05em;
}

.contact-final-content h2 span {
  display: block;

  color: #69a2ff;
}

.contact-final-content p {
  max-width: 650px;

  margin: 22px auto 0;

  color: rgba(255, 255, 255, 0.58);

  font-size: 16px;

  line-height: 1.8;
}

.contact-final-actions {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 30px;

  margin-top: 35px;
}

.btn-light {
  background: #ffffff;

  color: #081a33;

  border-color: #ffffff;
}

.btn-light:hover {
  background: #edf4ff;

  color: #081a33;
}

.final-text-link {
  color: #ffffff;

  font-size: 13px;

  font-weight: 700;

  text-decoration: none;
}

.final-text-link:hover {
  color: #75aaff;
}

/* =========================================================
   REVEAL ANIMATION
========================================================= */

.contact-page .reveal {
  opacity: 0;

  transform: translateY(25px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.contact-page .reveal.revealed {
  opacity: 1;

  transform: translateY(0);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
  .contact-hero-container {
    grid-template-columns: 1fr;

    gap: 60px;
  }

  .contact-hero-content {
    max-width: 800px;
  }

  .contact-hero-visual {
    min-height: 430px;
  }

  .contact-main-grid {
    grid-template-columns: 1fr;

    gap: 60px;
  }

  .contact-information {
    position: static;
  }

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

  .contact-reasons-grid {
    grid-template-columns: 1fr;

    gap: 55px;
  }
}

@media (max-width: 768px) {
  .contact-hero {
    min-height: auto;

    padding: 120px 0 70px;
  }

  .contact-hero h1 {
    font-size: clamp(42px, 11vw, 62px);
  }

  .contact-hero-content > p {
    font-size: 15px;
  }

  .contact-hero-points {
    grid-template-columns: 1fr;

    gap: 10px;
  }

  .contact-hero-points > div {
    flex-direction: row;

    align-items: center;
  }

  .contact-hero-visual {
    min-height: 390px;
  }

  .orbit-one {
    width: 350px;
    height: 350px;
  }

  .orbit-two {
    width: 280px;
    height: 280px;
  }

  .contact-visual-card {
    max-width: 390px;
  }

  .contact-form {
    padding: 22px;

    border-radius: 17px;
  }

  .form-row {
    grid-template-columns: 1fr;

    gap: 0;
  }

  .contact-service-grid {
    grid-template-columns: 1fr;
  }

  .contact-service-card {
    min-height: 280px;
  }

  .contact-reasons-content h2,
  .contact-section-label h2,
  .contact-information h2 {
    font-size: 38px;
  }

  .contact-final-cta {
    padding: 85px 0;
  }

  .contact-final-content h2 {
    font-size: 44px;
  }

  .contact-final-actions {
    flex-direction: column;

    gap: 20px;
  }
}

@media (max-width: 480px) {
  .contact-hero {
    padding-top: 105px;
  }

  .contact-hero h1 {
    font-size: 42px;
  }

  .contact-hero-visual {
    min-height: 350px;
  }

  .contact-visual-card {
    width: 100%;

    border-radius: 20px;
  }

  .contact-visual-body {
    min-height: 270px;

    padding: 35px 20px;
  }

  .contact-visual-footer {
    flex-direction: column;

    align-items: flex-start;
  }

  .contact-form {
    padding: 18px;
  }

  .contact-reasons-content h2,
  .contact-section-label h2,
  .contact-information h2 {
    font-size: 34px;
  }

  .faq-question {
    min-height: 68px;

    font-size: 14px;

    gap: 20px;
  }

  .faq-answer p {
    padding-right: 0;

    font-size: 13px;
  }

  .contact-final-content h2 {
    font-size: 38px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .contact-page *,
  .contact-page *::before,
  .contact-page *::after {
    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;
  }
}
/* =========================================================
   CONTACT SOCIAL MEDIA
   Compact / Premium Card Design
========================================================= */

.contact-social {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: 55px;
  border-top: 1px solid rgba(8, 26, 51, 0.08);
}

.contact-social-heading {
  max-width: 620px;
  margin-bottom: 24px;
}

.contact-social-heading h3 {
  margin: 8px 0 8px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.2;
  color: #081a33;
}

.contact-social-heading p {
  margin: 0;
  max-width: 580px;
  color: #64748b;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* =========================================================
   SOCIAL LINKS GRID
========================================================= */

.contact-social-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 900px;
}

/* =========================================================
   SOCIAL CARD
========================================================= */

.social-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;

  min-height: 68px;
  padding: 12px 15px;

  border: 1px solid rgba(8, 26, 51, 0.08);
  border-radius: 12px;

  background: #ffffff;

  color: #081a33;
  text-decoration: none;

  box-shadow: 0 4px 14px rgba(8, 26, 51, 0.035);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

/* =========================================================
   ICON
========================================================= */

.social-icon {
  flex: 0 0 38px;

  width: 38px;
  height: 38px;

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

  border-radius: 9px;

  background: #f4f7fa;
  color: #526277;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.social-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* =========================================================
   TEXT
========================================================= */

.social-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.social-text strong {
  font-family: "Manrope", sans-serif;
  font-size: 0.88rem;
  line-height: 1.25;
  font-weight: 700;
  color: #081a33;
}

.social-text small {
  font-size: 0.75rem;
  line-height: 1.35;
  color: #7a8798;
}

/* =========================================================
   ARROW
========================================================= */

.social-arrow {
  margin-left: auto;

  font-size: 1rem;
  line-height: 1;

  color: #a0acba;

  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

/* =========================================================
   HOVER
========================================================= */

.social-link:hover {
  transform: translateY(-2px);

  border-color: rgba(8, 26, 51, 0.13);

  box-shadow: 0 10px 24px rgba(8, 26, 51, 0.07);
}

.social-link:hover .social-arrow {
  transform: translateX(3px);
  color: #081a33;
}

.social-link:hover .social-icon {
  transform: scale(1.04);
}

/* =========================================================
   LINKEDIN
========================================================= */

.social-link.linkedin:hover .social-icon {
  background: #e8f2fb;
  color: #0a66c2;
}

/* =========================================================
   INSTAGRAM
========================================================= */

.social-link.instagram:hover .social-icon {
  background: #fbeaf3;
  color: #d62976;
}

/* =========================================================
   FACEBOOK
========================================================= */

.social-link.facebook:hover .social-icon {
  background: #eaf1ff;
  color: #1877f2;
}

/* =========================================================
   YOUTUBE
========================================================= */

.social-link.youtube:hover .social-icon {
  background: #fff0f0;
  color: #ff0000;
}

/* =========================================================
   WHATSAPP
========================================================= */

.social-link.whatsapp:hover .social-icon {
  background: #e8f8ef;
  color: #25d366;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .contact-social {
    margin-top: 0;
    padding-top: 40px;
  }

  .contact-social-links {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .social-link {
    min-height: 64px;
    padding: 11px 13px;
  }

  .social-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }

  .social-icon svg {
    width: 17px;
    height: 17px;
  }

  .social-text strong {
    font-size: 0.84rem;
  }

  .social-text small {
    font-size: 0.72rem;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1000px) {
  .contact-social-links {
    grid-template-columns: 1fr 1fr;
  }
}
/* =========================================================
   FOOTER SOCIAL MEDIA
   Minimal / Premium Style
========================================================= */

.footer-social {
  margin-top: 24px;
}

.footer-social-label {
  display: block;

  margin-bottom: 10px;

  font-family: "Manrope", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.45);
}

/* =========================================================
   SOCIAL LINKS
========================================================= */

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* =========================================================
   INDIVIDUAL ICON
========================================================= */

.footer-social-link {
  width: 36px;
  height: 36px;

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

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;

  background: rgba(255, 255, 255, 0.045);

  color: rgba(255, 255, 255, 0.62);

  text-decoration: none;

  transition:
    transform 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}

.footer-social-link svg {
  width: 17px;
  height: 17px;

  display: block;
}

/* =========================================================
   HOVER
========================================================= */

.footer-social-link:hover {
  transform: translateY(-2px);

  color: #ffffff;

  background: rgba(255, 255, 255, 0.1);

  border-color: rgba(255, 255, 255, 0.2);
}

/* =========================================================
   BRAND COLORS
========================================================= */

.footer-social-link.linkedin:hover {
  color: #70b7f5;
  background: rgba(10, 102, 194, 0.15);
  border-color: rgba(10, 102, 194, 0.3);
}

.footer-social-link.instagram:hover {
  color: #f47aa9;
  background: rgba(214, 41, 118, 0.14);
  border-color: rgba(214, 41, 118, 0.28);
}

.footer-social-link.facebook:hover {
  color: #6da2ff;
  background: rgba(24, 119, 242, 0.14);
  border-color: rgba(24, 119, 242, 0.28);
}

.footer-social-link.youtube:hover {
  color: #ff6b6b;
  background: rgba(255, 0, 0, 0.12);
  border-color: rgba(255, 0, 0, 0.25);
}

.footer-social-link.whatsapp:hover {
  color: #5be58a;
  background: rgba(37, 211, 102, 0.13);
  border-color: rgba(37, 211, 102, 0.28);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .footer-social {
    margin-top: 20px;
    margin-bottom: 30px;
  }

  .footer-social-label {
    margin-bottom: 9px;
  }

  .footer-social-link {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  .footer-social-link svg {
    width: 16px;
    height: 16px;
  }
}

/* SCHOOL MANAGEMENT SYSTEM PAGE */
/* =========================================================
   KAMAL - SMS
   SCHOOL MANAGEMENT SYSTEM
   PRODUCT PAGE STYLES
   UPDATED / RESPONSIVE VERSION
========================================================= */

/* =========================================================
   01. VARIABLES
========================================================= */

.sms-page {
  --sms-navy: #081a33;
  --sms-navy-deep: #061426;
  --sms-navy-light: #0b2342;

  --sms-blue: #2563eb;
  --sms-blue-dark: #1d4ed8;
  --sms-blue-light: #60a5fa;

  --sms-purple: #7c3aed;
  --sms-purple-light: #a78bfa;

  --sms-green: #22c55e;
  --sms-orange: #f97316;
  --sms-cyan: #06b6d4;

  --sms-text: #0f172a;
  --sms-muted: #64748b;

  --sms-light: #f7f9fc;
  --sms-border: #e5eaf1;

  --sms-white: #ffffff;

  --sms-container: 1280px;

  --sms-shadow-sm: 0 10px 30px rgba(8, 26, 51, 0.06);
  --sms-shadow-md: 0 20px 50px rgba(8, 26, 51, 0.08);
  --sms-shadow-lg: 0 30px 80px rgba(8, 26, 51, 0.14);

  --sms-radius-sm: 8px;
  --sms-radius-md: 12px;
  --sms-radius-lg: 16px;
  --sms-radius-xl: 20px;
}

/* =========================================================
   02. BASE
========================================================= */

.sms-page {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;

  color: var(--sms-text);
  background: #ffffff;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sms-page *,
.sms-page *::before,
.sms-page *::after {
  box-sizing: border-box;
}

.sms-page img,
.sms-page svg,
.sms-page video {
  max-width: 100%;
}

.sms-page img {
  height: auto;
}

.sms-page button,
.sms-page a {
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease;
}

.sms-page a {
  -webkit-tap-highlight-color: transparent;
}

.sms-page button {
  font: inherit;
}

.sms-page ::selection {
  color: #ffffff;
  background: var(--sms-blue);
}

/* =========================================================
   03. CONTAINER
========================================================= */

.sms-page .container {
  width: min(calc(100% - 48px), var(--sms-container));
  margin-inline: auto;
}

/* =========================================================
   04. SECTIONS
========================================================= */

.sms-page .section {
  position: relative;
  padding-block: 110px;
}

.sms-page .section-heading {
  max-width: 760px;
  margin-bottom: 60px;
}

.sms-page .section-heading .eyebrow {
  margin-bottom: 18px;
}

.sms-page .section-heading h2 {
  margin: 0;

  color: var(--sms-navy);

  font-family: "Manrope", sans-serif;
  font-size: clamp(38px, 4.5vw, 58px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.sms-page .section-heading h2 span {
  display: block;
  color: var(--sms-blue);
}

.sms-page .section-heading p {
  max-width: 680px;

  margin: 22px 0 0;

  color: var(--sms-muted);

  font-size: 16px;
  line-height: 1.8;
}

/* =========================================================
   05. EYEBROW
========================================================= */

.sms-page .eyebrow {
  display: inline-block;

  color: var(--sms-blue);

  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* =========================================================
   06. BUTTONS
========================================================= */

.sms-page .btn {
  min-height: 52px;

  padding: 0 23px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border: 1px solid transparent;
  border-radius: var(--sms-radius-sm);

  font-family: inherit;
  font-size: 14px;
  font-weight: 700;

  text-decoration: none;

  cursor: pointer;
  user-select: none;
}

.sms-page .btn span {
  font-size: 18px;
  line-height: 1;

  transition: transform 0.25s ease;
}

.sms-page .btn:hover span {
  transform: translateX(4px);
}

.sms-page .btn-primary {
  color: #ffffff;
  background: var(--sms-blue);

  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
}

.sms-page .btn-primary:hover {
  color: #ffffff;
  background: var(--sms-blue-dark);

  transform: translateY(-2px);

  box-shadow: 0 16px 35px rgba(37, 99, 235, 0.32);
}

.sms-page .btn-secondary {
  color: #ffffff;

  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.sms-page .btn-secondary:hover {
  color: #ffffff;

  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.09);

  transform: translateY(-2px);
}

.sms-page .btn-light {
  color: var(--sms-navy);
  background: #ffffff;
}

.sms-page .btn-light:hover {
  color: var(--sms-blue);
  background: #eff6ff;

  transform: translateY(-2px);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}

.sms-page .btn-large {
  min-height: 56px;

  padding-inline: 27px;

  font-size: 15px;
}

/* =========================================================
   07. PRODUCT HERO
========================================================= */

.sms-hero {
  position: relative;

  min-height: 760px;

  overflow: hidden;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 78% 38%,
      rgba(37, 99, 235, 0.22),
      transparent 32%
    ),
    radial-gradient(
      circle at 55% 100%,
      rgba(124, 58, 237, 0.12),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      var(--sms-navy-deep) 0%,
      var(--sms-navy) 55%,
      var(--sms-navy-light) 100%
    );
}

.sms-hero-grid {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);

  background-size: 60px 60px;

  mask-image: linear-gradient(to bottom, black, black 55%, transparent);

  -webkit-mask-image: linear-gradient(to bottom, black, black 55%, transparent);
}

.sms-hero-container {
  position: relative;
  z-index: 2;

  min-height: 760px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, 0.95fr);

  align-items: center;

  gap: 70px;

  padding-block: 90px;
}

/* =========================================================
   08. HERO CONTENT
========================================================= */

.sms-hero-content {
  max-width: 690px;
}

.sms-product-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 20px;

  color: rgba(255, 255, 255, 0.78);

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 0.12em;
}

.sms-product-mark {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  color: #ffffff;

  background: linear-gradient(135deg, var(--sms-blue), var(--sms-purple));

  font-family: "Manrope", sans-serif;
  font-size: 17px;

  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.25);
}

.sms-hero-content .eyebrow {
  display: block;

  margin-bottom: 18px;

  color: var(--sms-blue-light);
}

.sms-hero-content h1 {
  margin: 0;

  color: #ffffff;

  font-family: "Manrope", sans-serif;

  font-size: clamp(48px, 5.4vw, 78px);
  font-weight: 800;
  line-height: 1.01;

  letter-spacing: -0.055em;
}

.sms-hero-content h1 span {
  display: block;

  color: transparent;

  background: linear-gradient(
    90deg,
    var(--sms-blue-light),
    var(--sms-purple-light)
  );

  -webkit-background-clip: text;
  background-clip: text;
}

.sms-hero-content > p {
  max-width: 650px;

  margin: 28px 0 0;

  color: rgba(255, 255, 255, 0.7);

  font-size: 18px;
  line-height: 1.8;
}

/* =========================================================
   09. HERO ACTIONS
========================================================= */

.sms-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;

  margin-top: 34px;
}

/* =========================================================
   10. HERO META
========================================================= */

.sms-hero-meta {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 25px;

  margin-top: 55px;
  padding-top: 25px;

  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sms-hero-meta > div {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sms-hero-meta strong {
  color: #ffffff;

  font-family: "Manrope", sans-serif;
  font-size: 14px;

  white-space: nowrap;
}

.sms-hero-meta span {
  overflow: hidden;

  color: rgba(255, 255, 255, 0.48);

  font-size: 11px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   11. HERO VISUAL
========================================================= */

.sms-hero-visual {
  position: relative;

  width: 100%;
  min-height: 540px;

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

.sms-visual-glow {
  position: absolute;

  width: 470px;
  height: 470px;

  max-width: 90vw;
  max-height: 90vw;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--sms-blue), var(--sms-purple));

  filter: blur(115px);

  opacity: 0.17;

  pointer-events: none;
}

/* =========================================================
   12. DASHBOARD
========================================================= */

.sms-dashboard {
  position: relative;
  z-index: 2;

  width: min(100%, 560px);

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--sms-radius-xl);

  background: rgba(9, 27, 51, 0.88);

  box-shadow:
    0 45px 100px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.sms-dashboard-header {
  min-height: 76px;

  padding: 17px 20px;

  display: flex;
  align-items: center;
  gap: 12px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sms-dashboard-brand {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 11px;
}

.sms-dashboard-logo {
  width: 39px;
  height: 39px;

  flex: 0 0 39px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  color: #ffffff;

  background: linear-gradient(135deg, var(--sms-blue), var(--sms-purple));

  font-weight: 800;
}

.sms-dashboard-brand div {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sms-dashboard-brand small {
  color: rgba(255, 255, 255, 0.4);

  font-size: 8px;

  letter-spacing: 0.14em;
}

.sms-dashboard-brand strong {
  overflow: hidden;

  color: #ffffff;

  font-size: 12px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.sms-dashboard-status {
  margin-left: auto;

  color: #4ade80;

  font-size: 8px;
  font-weight: 800;

  white-space: nowrap;
}

/* =========================================================
   13. DASHBOARD BODY
========================================================= */

.sms-dashboard-body {
  padding: 24px;
}

.sms-dashboard-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-bottom: 20px;
}

.sms-dashboard-welcome > div {
  min-width: 0;
}

.sms-dashboard-welcome small {
  color: rgba(255, 255, 255, 0.35);

  font-size: 8px;

  letter-spacing: 0.13em;
}

.sms-dashboard-welcome h3 {
  margin: 7px 0 0;

  color: #ffffff;

  font-family: "Manrope", sans-serif;
  font-size: 19px;
}

.sms-dashboard-welcome h3 span {
  color: var(--sms-blue-light);
}

.sms-date-box {
  width: 45px;
  height: 48px;

  flex: 0 0 45px;

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

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;

  background: rgba(255, 255, 255, 0.04);
}

.sms-date-box span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 7px;
}

.sms-date-box strong {
  color: #ffffff;
  font-size: 16px;
}

/* =========================================================
   14. DASHBOARD STATS
========================================================= */

.sms-dashboard-stats {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 10px;
}

.sms-mini-stat {
  min-width: 0;

  padding: 12px;

  display: flex;
  align-items: center;
  gap: 9px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;

  background: rgba(255, 255, 255, 0.035);
}

.sms-mini-icon {
  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  font-size: 13px;
}

.sms-mini-icon.blue {
  background: rgba(37, 99, 235, 0.18);
}

.sms-mini-icon.purple {
  background: rgba(124, 58, 237, 0.18);
}

.sms-mini-icon.green {
  background: rgba(34, 197, 94, 0.14);
}

.sms-mini-stat div {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sms-mini-stat strong {
  overflow: hidden;

  color: #ffffff;

  font-size: 9px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.sms-mini-stat small {
  overflow: hidden;

  color: rgba(255, 255, 255, 0.35);

  font-size: 7px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   15. DASHBOARD PANELS
========================================================= */

.sms-dashboard-panels {
  display: grid;

  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);

  gap: 10px;

  margin-top: 12px;
}

.sms-dashboard-panel,
.sms-notification-panel {
  min-width: 0;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;

  background: rgba(255, 255, 255, 0.035);
}

.sms-dashboard-panel {
  padding: 15px;
}

.sms-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 18px;
}

.sms-panel-heading strong {
  color: #ffffff;
  font-size: 10px;
}

.sms-panel-heading span {
  color: var(--sms-blue-light);
  font-size: 8px;
}

.sms-progress-row {
  margin-bottom: 14px;
}

.sms-progress-row:last-child {
  margin-bottom: 0;
}

.sms-progress-row > div:first-child {
  display: flex;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 6px;
}

.sms-progress-row span {
  color: rgba(255, 255, 255, 0.42);
  font-size: 7px;
}

.sms-progress-row strong {
  color: rgba(255, 255, 255, 0.68);
  font-size: 7px;
}

.sms-progress {
  height: 4px;

  overflow: hidden;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.07);
}

.sms-progress span {
  display: block;

  width: var(--progress, 70%);
  height: 100%;

  border-radius: inherit;

  background: linear-gradient(90deg, var(--sms-blue), var(--sms-blue-light));
}

.sms-notification-panel {
  padding: 18px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 12px;
}

.sms-notification-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  color: var(--sms-purple-light);

  background: rgba(124, 58, 237, 0.16);
}

.sms-notification-panel strong {
  display: block;

  margin-bottom: 5px;

  color: #ffffff;
  font-size: 10px;
}

.sms-notification-panel small {
  display: block;

  color: rgba(255, 255, 255, 0.38);

  font-size: 8px;
  line-height: 1.5;
}

/* =========================================================
   16. DASHBOARD FOOTER
========================================================= */

.sms-dashboard-footer {
  padding: 13px 20px;

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

  gap: 10px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sms-dashboard-footer span {
  overflow: hidden;

  color: rgba(255, 255, 255, 0.35);

  font-size: 7px;

  letter-spacing: 0.12em;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   17. INTRO
========================================================= */

.sms-intro {
  background: #ffffff;
}

.sms-intro-grid {
  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

  gap: 100px;

  align-items: center;
}

.sms-intro-heading {
  max-width: 600px;
}

.sms-intro-heading h2 {
  margin: 18px 0 0;

  color: var(--sms-navy);

  font-family: "Manrope", sans-serif;

  font-size: clamp(38px, 4.5vw, 58px);

  font-weight: 800;
  line-height: 1.06;

  letter-spacing: -0.045em;
}

.sms-intro-heading h2 span {
  display: block;
  color: var(--sms-blue);
}

.sms-intro-content {
  max-width: 620px;
}

.sms-intro-content p {
  margin: 0 0 20px;

  color: var(--sms-muted);

  font-size: 16px;
  line-height: 1.85;
}

.sms-intro-content p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   18. FEATURES
========================================================= */

.sms-features {
  background: var(--sms-light);
}

.sms-feature-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 20px;
}

.sms-feature-card {
  position: relative;

  min-height: 320px;

  padding: 32px;

  overflow: hidden;

  border: 1px solid var(--sms-border);
  border-radius: 15px;

  background: #ffffff;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.sms-feature-card::after {
  content: "";

  position: absolute;

  width: 160px;
  height: 160px;

  right: -90px;
  bottom: -90px;

  border-radius: 50%;

  background: rgba(37, 99, 235, 0.05);

  transition: transform 0.3s ease;
}

.sms-feature-card:hover {
  transform: translateY(-7px);

  border-color: rgba(37, 99, 235, 0.18);

  box-shadow: var(--sms-shadow-md);
}

.sms-feature-card:hover::after {
  transform: scale(1.5);
}

.sms-feature-number {
  position: absolute;

  top: 28px;
  right: 28px;

  color: var(--sms-blue);

  font-size: 11px;
  font-weight: 800;
}

.sms-feature-icon {
  width: 56px;
  height: 56px;

  display: grid;
  place-items: center;

  margin-bottom: 45px;

  border-radius: 12px;

  font-size: 24px;
}

.sms-feature-icon.blue {
  background: #eff6ff;
}

.sms-feature-icon.purple {
  background: #f5f3ff;
}

.sms-feature-icon.green {
  background: #f0fdf4;
}

.sms-feature-icon.orange {
  background: #fff7ed;
}

.sms-feature-icon.cyan {
  background: #ecfeff;
}

.sms-feature-icon.dark {
  background: #eef2ff;
}

.sms-feature-card h3 {
  margin: 0 0 12px;

  color: var(--sms-navy);

  font-family: "Manrope", sans-serif;
  font-size: 21px;
}

.sms-feature-card p {
  max-width: 320px;

  margin: 0;

  color: var(--sms-muted);

  font-size: 14px;
  line-height: 1.75;
}

.sms-feature-line {
  position: absolute;

  left: 32px;
  bottom: 30px;

  width: 35px;
  height: 2px;

  background: var(--sms-blue);
}

/* =========================================================
   19. ECOSYSTEM
========================================================= */

.sms-ecosystem {
  background: #ffffff;
}

.sms-ecosystem-grid {
  display: grid;

  grid-template-columns:
    minmax(400px, 0.9fr)
    minmax(0, 1.1fr);

  gap: 110px;

  align-items: center;
}

/* =========================================================
   20. ECOSYSTEM VISUAL
========================================================= */

.sms-ecosystem-visual {
  --orbit-inner: 360px;
  --orbit-outer: 500px;
  --center-size: 165px;

  position: relative;

  width: min(100%, 560px);

  min-height: 560px;

  margin-inline: auto;

  display: grid;
  place-items: center;

  isolation: isolate;
}

.sms-ecosystem-visual::before {
  content: "";

  position: absolute;

  width: min(var(--orbit-outer), 90%);
  aspect-ratio: 1;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.035) 0%,
    rgba(37, 99, 235, 0.02) 45%,
    transparent 70%
  );

  pointer-events: none;
}

/* =========================================================
   21. ORBIT CIRCLES
========================================================= */

.ecosystem-orbit {
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  border: 1px dashed rgba(37, 99, 235, 0.18);

  border-radius: 50%;

  pointer-events: none;
}

.orbit-one {
  width: var(--orbit-inner);
  height: var(--orbit-inner);

  border-color: rgba(37, 99, 235, 0.22);

  z-index: 1;
}

.orbit-two {
  width: var(--orbit-outer);
  height: var(--orbit-outer);

  border-color: rgba(124, 58, 237, 0.14);

  z-index: 0;
}

/* =========================================================
   22. ECOSYSTEM CENTER
========================================================= */

.ecosystem-center {
  position: absolute;

  top: 50%;
  left: 50%;

  z-index: 5;

  width: var(--center-size);
  height: var(--center-size);

  transform: translate(-50%, -50%);

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

  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 50%;

  background: radial-gradient(
    circle at 35% 30%,
    rgba(255, 255, 255, 0.98),
    rgba(239, 246, 255, 0.96) 60%,
    rgba(219, 234, 254, 0.94)
  );

  box-shadow:
    0 25px 60px rgba(37, 99, 235, 0.12),
    0 0 0 12px rgba(37, 99, 235, 0.025);

  text-align: center;
}

.ecosystem-center::before {
  content: "";

  position: absolute;

  inset: -8px;

  border: 1px solid rgba(37, 99, 235, 0.07);

  border-radius: 50%;

  pointer-events: none;
}

.ecosystem-center span {
  color: transparent;

  font-family: "Manrope", sans-serif;

  font-size: 42px;
  font-weight: 800;
  line-height: 1;

  background: linear-gradient(135deg, var(--sms-blue), var(--sms-purple));

  -webkit-background-clip: text;
  background-clip: text;
}

.ecosystem-center strong {
  margin-top: 8px;

  color: var(--sms-navy);

  font-size: 12px;
}

.ecosystem-center small {
  margin-top: 4px;

  color: var(--sms-muted);

  font-size: 8px;
}

/* =========================================================
   23. ECOSYSTEM NODES
========================================================= */

.ecosystem-node {
  position: absolute;

  z-index: 6;

  min-width: 130px;

  padding: 12px 14px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border: 1px solid var(--sms-border);
  border-radius: 12px;

  color: var(--sms-navy);

  background: rgba(255, 255, 255, 0.96);

  box-shadow:
    0 15px 35px rgba(8, 26, 51, 0.08),
    0 2px 5px rgba(8, 26, 51, 0.03);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;

  white-space: nowrap;
}

.ecosystem-node:hover {
  border-color: rgba(37, 99, 235, 0.18);

  box-shadow:
    0 20px 45px rgba(8, 26, 51, 0.12),
    0 4px 10px rgba(8, 26, 51, 0.04);
}

/* =========================================================
   24. ECOSYSTEM NODE POSITIONS
========================================================= */

.node-student {
  top: calc(50% - (var(--orbit-outer) / 2));
  left: 50%;

  transform: translate(-50%, -50%);
}

.node-teacher {
  top: 50%;
  left: calc(50% + (var(--orbit-outer) / 2));

  transform: translate(-50%, -50%);
}

.node-admin {
  top: calc(50% + (var(--orbit-outer) / 2));
  left: 50%;

  transform: translate(-50%, -50%);
}

.node-parent {
  top: 50%;
  left: calc(50% - (var(--orbit-outer) / 2));

  transform: translate(-50%, -50%);
}

/* =========================================================
   25. NODE HOVER
========================================================= */

.node-student:hover {
  transform: translate(-50%, calc(-50% - 5px));
}

.node-teacher:hover {
  transform: translate(calc(-50% + 5px), -50%);
}

.node-admin:hover {
  transform: translate(-50%, calc(-50% + 5px));
}

.node-parent:hover {
  transform: translate(calc(-50% - 5px), -50%);
}

.ecosystem-node span {
  font-size: 18px;
  line-height: 1;
}

.ecosystem-node strong {
  color: var(--sms-navy);

  font-size: 10px;
  font-weight: 800;
}

/* =========================================================
   26. ECOSYSTEM CONNECTOR DOTS
========================================================= */

.sms-ecosystem-visual::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 7px;
  height: 7px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: var(--sms-blue);

  box-shadow:
    0 calc((var(--orbit-outer) / -2) + 0px) 0 rgba(37, 99, 235, 0.45),
    calc(var(--orbit-outer) / 2) 0 0 rgba(124, 58, 237, 0.35),
    0 calc(var(--orbit-outer) / 2) 0 rgba(34, 197, 94, 0.35),
    calc((var(--orbit-outer) / -2) + 0px) 0 0 rgba(6, 182, 212, 0.35);

  opacity: 0.45;

  pointer-events: none;

  z-index: 2;
}

/* =========================================================
   27. ECOSYSTEM CONTENT
========================================================= */

.sms-ecosystem-content {
  max-width: 680px;
}

.sms-ecosystem-content h2 {
  margin: 18px 0 22px;

  color: var(--sms-navy);

  font-family: "Manrope", sans-serif;

  font-size: clamp(38px, 4.5vw, 58px);

  font-weight: 800;
  line-height: 1.06;

  letter-spacing: -0.045em;
}

.sms-ecosystem-content h2 span {
  display: block;
  color: var(--sms-blue);
}

.sms-ecosystem-content > p {
  max-width: 630px;

  margin: 0 0 35px;

  color: var(--sms-muted);

  font-size: 16px;
  line-height: 1.8;
}

.sms-ecosystem-list {
  border-top: 1px solid var(--sms-border);
}

.sms-ecosystem-item {
  display: grid;

  grid-template-columns: 45px minmax(0, 1fr);

  gap: 20px;

  padding: 22px 0;

  border-bottom: 1px solid var(--sms-border);
}

.sms-ecosystem-item > span {
  padding-top: 4px;

  color: var(--sms-blue);

  font-size: 11px;
  font-weight: 800;
}

.sms-ecosystem-item h3 {
  margin: 0 0 6px;

  color: var(--sms-navy);

  font-family: "Manrope", sans-serif;
  font-size: 18px;
}

.sms-ecosystem-item p {
  margin: 0;

  color: var(--sms-muted);

  font-size: 14px;
  line-height: 1.7;
}

/* =========================================================
   28. BENEFITS
========================================================= */

.sms-benefits {
  background: var(--sms-light);
}

.sms-benefits-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 20px;
}

.sms-benefit-card {
  min-height: 260px;

  padding: 30px;

  border-top: 2px solid var(--sms-blue);

  background: #ffffff;

  box-shadow: 0 5px 20px rgba(8, 26, 51, 0.025);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.sms-benefit-card:hover {
  transform: translateY(-5px);

  box-shadow: var(--sms-shadow-md);
}

.sms-benefit-card > span {
  color: var(--sms-blue);

  font-size: 11px;
  font-weight: 800;
}

.sms-benefit-card h3 {
  margin: 32px 0 12px;

  color: var(--sms-navy);

  font-family: "Manrope", sans-serif;
  font-size: 21px;
}

.sms-benefit-card p {
  margin: 0;

  color: var(--sms-muted);

  font-size: 14px;
  line-height: 1.75;
}

/* =========================================================
   29. WORKFLOW
========================================================= */

.sms-workflow {
  position: relative;

  padding-block: 120px;

  overflow: hidden;

  color: #ffffff;

  background: linear-gradient(
    135deg,
    var(--sms-navy-deep),
    var(--sms-navy) 60%,
    var(--sms-navy-light)
  );
}

.sms-workflow::before {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  right: -180px;
  top: -200px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 70%);
}

.sms-workflow-grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.85fr)
    minmax(0, 1.15fr);

  gap: 100px;

  align-items: center;
}

.sms-workflow-content {
  max-width: 560px;
}

.sms-workflow-content .eyebrow {
  color: var(--sms-blue-light);
}

.sms-workflow-content h2 {
  margin: 20px 0;

  color: #ffffff;

  font-family: "Manrope", sans-serif;

  font-size: clamp(40px, 4.5vw, 60px);

  font-weight: 800;
  line-height: 1.05;

  letter-spacing: -0.045em;
}

.sms-workflow-content h2 span {
  display: block;
  color: var(--sms-blue-light);
}

.sms-workflow-content p {
  max-width: 520px;

  margin: 0;

  color: rgba(255, 255, 255, 0.6);

  font-size: 16px;
  line-height: 1.8;
}

.sms-workflow-steps {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sms-workflow-step {
  display: grid;

  grid-template-columns: 45px minmax(0, 1fr);

  gap: 20px;

  padding: 25px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sms-workflow-step > span {
  padding-top: 4px;

  color: var(--sms-blue-light);

  font-size: 11px;
  font-weight: 800;
}

.sms-workflow-step h3 {
  margin: 0 0 7px;

  color: #ffffff;

  font-family: "Manrope", sans-serif;
  font-size: 19px;
}

.sms-workflow-step p {
  margin: 0;

  color: rgba(255, 255, 255, 0.52);

  font-size: 14px;
  line-height: 1.7;
}

/* =========================================================
   30. MODULES
========================================================= */

.sms-modules {
  background: #ffffff;
}

.sms-module-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 16px;
}

.sms-module-card {
  position: relative;

  min-height: 205px;

  padding: 25px;

  overflow: hidden;

  border: 1px solid var(--sms-border);
  border-radius: 13px;

  background: #ffffff;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.sms-module-card:hover {
  transform: translateY(-5px);

  border-color: rgba(37, 99, 235, 0.2);

  box-shadow: var(--sms-shadow-sm);
}

.sms-module-number {
  position: absolute;

  top: 22px;
  right: 22px;

  color: var(--sms-blue);

  font-size: 10px;
  font-weight: 800;
}

.sms-module-card > div {
  margin-bottom: 25px;

  font-size: 28px;
  line-height: 1;
}

.sms-module-card strong {
  display: block;

  margin-bottom: 8px;

  color: var(--sms-navy);

  font-family: "Manrope", sans-serif;
  font-size: 18px;
}

.sms-module-card small {
  display: block;

  max-width: 220px;

  color: var(--sms-muted);

  font-size: 12px;
  line-height: 1.65;
}

/* =========================================================
   31. CTA
========================================================= */

.sms-cta {
  position: relative;

  padding-block: 120px;

  overflow: hidden;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 75% 50%,
      rgba(59, 130, 246, 0.2),
      transparent 35%
    ),
    var(--sms-navy);
}

.sms-cta-grid {
  position: absolute;
  inset: 0;

  opacity: 0.5;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);

  background-size: 60px 60px;
}

.sms-cta-content {
  position: relative;
  z-index: 2;

  max-width: 800px;

  margin-inline: auto;

  text-align: center;
}

.sms-cta-mark {
  width: 62px;
  height: 62px;

  display: grid;
  place-items: center;

  margin: 0 auto 25px;

  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 16px;

  color: #ffffff;

  background: linear-gradient(135deg, var(--sms-blue), var(--sms-purple));

  font-family: "Manrope", sans-serif;
  font-size: 27px;
  font-weight: 800;

  box-shadow: 0 15px 40px rgba(37, 99, 235, 0.25);
}

.sms-cta-content .eyebrow {
  color: var(--sms-blue-light);
}

.sms-cta-content h2 {
  margin: 20px 0;

  color: #ffffff;

  font-family: "Manrope", sans-serif;

  font-size: clamp(40px, 5vw, 64px);

  font-weight: 800;
  line-height: 1.05;

  letter-spacing: -0.05em;
}

.sms-cta-content h2 span {
  display: block;
  color: var(--sms-blue-light);
}

.sms-cta-content p {
  max-width: 650px;

  margin: 0 auto;

  color: rgba(255, 255, 255, 0.62);

  font-size: 16px;
  line-height: 1.8;
}

.sms-cta-actions {
  margin-top: 35px;

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

  gap: 25px;
}

.sms-cta-link {
  color: #ffffff;

  font-size: 14px;
  font-weight: 700;

  text-decoration: none;
}

.sms-cta-link:hover {
  color: var(--sms-blue-light);

  transform: translateX(3px);
}

/* =========================================================
   32. REVEAL
========================================================= */

.sms-page .reveal {
  opacity: 0;

  transform: translateY(30px);

  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sms-page .reveal.revealed {
  opacity: 1;

  transform: translateY(0);
}

/* =========================================================
   33. STAGGER
========================================================= */

.sms-feature-grid .reveal:nth-child(2),
.sms-module-grid .reveal:nth-child(2),
.sms-benefits-grid .reveal:nth-child(2) {
  transition-delay: 0.08s;
}

.sms-feature-grid .reveal:nth-child(3),
.sms-module-grid .reveal:nth-child(3),
.sms-benefits-grid .reveal:nth-child(3) {
  transition-delay: 0.16s;
}

.sms-feature-grid .reveal:nth-child(4),
.sms-module-grid .reveal:nth-child(4),
.sms-benefits-grid .reveal:nth-child(4) {
  transition-delay: 0.24s;
}

.sms-feature-grid .reveal:nth-child(5),
.sms-module-grid .reveal:nth-child(5) {
  transition-delay: 0.32s;
}

.sms-feature-grid .reveal:nth-child(6),
.sms-module-grid .reveal:nth-child(6) {
  transition-delay: 0.4s;
}

/* =========================================================
   34. ACCESSIBILITY
========================================================= */

.sms-page a:focus-visible,
.sms-page button:focus-visible {
  outline: 3px solid rgba(96, 165, 250, 0.7);
  outline-offset: 4px;
  border-radius: 5px;
}

/* =========================================================
   35. LARGE TABLETS
========================================================= */

@media (max-width: 1100px) {
  .sms-hero-container {
    grid-template-columns: 1fr;

    gap: 55px;

    padding-block: 80px;
  }

  .sms-hero-content {
    max-width: 800px;
  }

  .sms-hero-visual {
    min-height: 500px;
  }

  .sms-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sms-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sms-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sms-ecosystem-grid {
    gap: 60px;
  }

  .sms-ecosystem-visual {
    --orbit-inner: 320px;
    --orbit-outer: 440px;
    --center-size: 150px;

    min-height: 500px;
  }
}

/* =========================================================
   36. TABLETS
========================================================= */

@media (max-width: 900px) {
  .sms-page .section {
    padding-block: 85px;
  }

  .sms-intro-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sms-ecosystem-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .sms-ecosystem-visual {
    --orbit-inner: 330px;
    --orbit-outer: 460px;
    --center-size: 155px;

    max-width: 560px;
    min-height: 520px;
  }

  .sms-ecosystem-content {
    max-width: 760px;
  }

  .sms-workflow-grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }
}

/* =========================================================
   37. MOBILE
========================================================= */

@media (max-width: 768px) {
  .sms-page .container {
    width: calc(100% - 36px);
  }

  .sms-page .section {
    padding-block: 70px;
  }

  .sms-page .section-heading {
    margin-bottom: 42px;
  }

  .sms-page .section-heading h2 {
    font-size: clamp(34px, 9vw, 48px);
  }

  .sms-page .section-heading p {
    font-size: 15px;
  }

  /* =====================================================
     HERO
  ===================================================== */

  .sms-hero {
    min-height: auto;
    padding: 50px 0px;
  }

  .sms-hero-container {
    min-height: auto;

    grid-template-columns: 1fr;

    gap: 50px;

    padding: 65px 18px;
  }

  .sms-hero-content h1 {
    font-size: clamp(42px, 11vw, 60px);
  }

  .sms-hero-content > p {
    font-size: 16px;
  }

  .sms-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .sms-hero-actions .btn {
    width: 100%;
  }

  .sms-hero-meta {
    gap: 14px;
  }

  .sms-hero-meta strong {
    font-size: 12px;
  }

  .sms-hero-meta span {
    font-size: 9px;
  }

  /* =====================================================
     DASHBOARD
  ===================================================== */

  .sms-hero-visual {
    min-height: 410px;
  }

  .sms-dashboard {
    width: 100%;
  }

  .sms-dashboard-body {
    padding: 18px;
  }

  .sms-dashboard-panels {
    grid-template-columns: 1fr;
  }

  /* =====================================================
     FEATURES
  ===================================================== */

  .sms-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sms-feature-card {
    min-height: 300px;
    padding: 25px;
  }

  /* =====================================================
     ECOSYSTEM
  ===================================================== */

  .sms-ecosystem-visual {
    --orbit-inner: 290px;
    --orbit-outer: 390px;
    --center-size: 140px;

    width: min(100%, 480px);
    min-height: 430px;
  }

  .ecosystem-node {
    min-width: 110px;

    padding: 9px 10px;

    gap: 6px;
  }

  .ecosystem-node strong {
    font-size: 8px;
  }

  .ecosystem-node span {
    font-size: 15px;
  }

  /* =====================================================
     BENEFITS
  ===================================================== */

  .sms-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* =====================================================
     MODULES
  ===================================================== */

  .sms-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* =====================================================
     CTA
  ===================================================== */

  .sms-cta {
    padding-block: 90px;
  }

  .sms-cta-content h2 {
    font-size: clamp(40px, 10vw, 55px);
  }

  .sms-cta-actions {
    flex-direction: column;
    gap: 18px;
  }
}

/* =========================================================
   38. SMALL MOBILE
========================================================= */

@media (max-width: 520px) {
  .sms-page .container {
    width: calc(100% - 32px);
  }

  .sms-page .section {
    padding-block: 60px;
  }

  /* =====================================================
     HERO
  ===================================================== */

  .sms-hero-container {
    padding: 55px 16px;
    gap: 40px;
  }

  .sms-product-label {
    font-size: 10px;
  }

  .sms-product-mark {
    width: 34px;
    height: 34px;

    font-size: 15px;
  }

  .sms-hero-content h1 {
    font-size: clamp(40px, 12vw, 53px);
  }

  .sms-hero-content > p {
    font-size: 15px;
  }

  .sms-hero-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sms-hero-meta strong {
    font-size: 10px;
  }

  .sms-hero-meta span {
    font-size: 8px;
  }

  /* =====================================================
     DASHBOARD
  ===================================================== */

  .sms-hero-visual {
    min-height: 350px;
  }

  .sms-dashboard {
    border-radius: 14px;
  }

  .sms-dashboard-header {
    padding: 13px;
  }

  .sms-dashboard-logo {
    width: 33px;
    height: 33px;

    flex-basis: 33px;
  }

  .sms-dashboard-brand strong {
    font-size: 10px;
  }

  .sms-dashboard-status {
    font-size: 6px;
  }

  .sms-dashboard-body {
    padding: 14px;
  }

  .sms-dashboard-welcome h3 {
    font-size: 15px;
  }

  .sms-dashboard-stats {
    grid-template-columns: 1fr;
  }

  .sms-mini-stat {
    padding: 9px;
  }

  .sms-dashboard-footer {
    padding: 10px 13px;
  }

  /* =====================================================
     FEATURES
  ===================================================== */

  .sms-feature-grid {
    grid-template-columns: 1fr;
  }

  .sms-feature-card {
    min-height: auto;
    padding: 28px;
  }

  .sms-feature-icon {
    margin-bottom: 30px;
  }

  /* =====================================================
     INTRO
  ===================================================== */

  .sms-intro-content p {
    font-size: 15px;
  }

  /* =====================================================
     ECOSYSTEM
  ===================================================== */

  .sms-ecosystem-visual {
    --orbit-inner: 220px;
    --orbit-outer: 300px;
    --center-size: 120px;

    width: min(100%, 350px);
    min-height: 340px;
  }

  .ecosystem-center span {
    font-size: 30px;
  }

  .ecosystem-center strong {
    font-size: 9px;
  }

  .ecosystem-center small {
    font-size: 7px;
  }

  .ecosystem-node {
    min-width: 88px;

    padding: 7px 8px;

    gap: 4px;

    border-radius: 9px;
  }

  .ecosystem-node span {
    font-size: 13px;
  }

  .ecosystem-node strong {
    font-size: 7px;
  }

  /* =====================================================
     BENEFITS
  ===================================================== */

  .sms-benefits-grid {
    grid-template-columns: 1fr;
  }

  .sms-benefit-card {
    min-height: auto;
  }

  /* =====================================================
     MODULES
  ===================================================== */

  .sms-module-grid {
    grid-template-columns: 1fr;
  }

  .sms-module-card {
    min-height: auto;
  }

  /* =====================================================
     WORKFLOW
  ===================================================== */

  .sms-workflow {
    padding-block: 80px;
  }

  .sms-workflow-step {
    grid-template-columns: 35px minmax(0, 1fr);

    gap: 12px;
  }

  .sms-workflow-step h3 {
    font-size: 17px;
  }

  .sms-workflow-step p {
    font-size: 13px;
  }

  /* =====================================================
     CTA
  ===================================================== */

  .sms-cta {
    padding-block: 75px;
  }

  .sms-cta-actions {
    align-items: stretch;
  }

  .sms-cta-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   39. EXTRA SMALL
========================================================= */

@media (max-width: 380px) {
  .sms-page .container {
    width: calc(100% - 28px);
  }

  .sms-hero-container {
    padding-inline: 14px;
  }

  .sms-hero-meta {
    gap: 7px;
  }

  .sms-hero-meta strong {
    font-size: 9px;
  }

  .sms-hero-meta span {
    font-size: 7px;
  }

  /* =====================================================
     VERY SMALL ECOSYSTEM
  ===================================================== */

  .sms-ecosystem-visual {
    --orbit-inner: 195px;
    --orbit-outer: 255px;
    --center-size: 105px;

    width: min(100%, 300px);
    min-height: 295px;
  }

  .ecosystem-center span {
    font-size: 27px;
  }

  .ecosystem-center strong {
    font-size: 8px;
  }

  .ecosystem-center small {
    font-size: 6px;
  }

  .ecosystem-node {
    min-width: 76px;

    padding: 6px;

    gap: 3px;
  }

  .ecosystem-node span {
    font-size: 11px;
  }

  .ecosystem-node strong {
    font-size: 6px;
  }
}

/* =========================================================
   40. TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {
  .sms-feature-card:hover,
  .sms-benefit-card:hover,
  .sms-module-card:hover,
  .ecosystem-node:hover,
  .sms-page .btn:hover {
    transform: none;
  }

  .sms-feature-card:hover::after {
    transform: none;
  }
}

/* =========================================================
   41. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .sms-page *,
  .sms-page *::before,
  .sms-page *::after {
    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;

    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .sms-page .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Human Resource Management System */

/* =========================================================
   KAMAL - HRMS
   HUMAN RESOURCE MANAGEMENT SYSTEM
   PRODUCT PAGE STYLES
   UPDATED + FULLY RESPONSIVE
========================================================= */

/* =========================================================
   01. VARIABLES
========================================================= */

.hrms-page {
  --hrms-navy: #081a33;
  --hrms-navy-deep: #061426;
  --hrms-navy-light: #0b2342;

  --hrms-blue: #2563eb;
  --hrms-blue-light: #60a5fa;

  --hrms-purple: #7c3aed;
  --hrms-purple-light: #a78bfa;

  --hrms-green: #22c55e;
  --hrms-orange: #f97316;
  --hrms-cyan: #06b6d4;
  --hrms-pink: #ec4899;

  --hrms-text: #0f172a;
  --hrms-muted: #64748b;

  --hrms-light: #f7f9fc;
  --hrms-border: #e5eaf1;

  --hrms-white: #ffffff;

  --hrms-container: 1280px;

  --hrms-shadow-sm: 0 10px 30px rgba(8, 26, 51, 0.06);
  --hrms-shadow-md: 0 20px 50px rgba(8, 26, 51, 0.08);
  --hrms-shadow-lg: 0 30px 80px rgba(8, 26, 51, 0.14);
}

/* =========================================================
   02. BASE
========================================================= */

.hrms-page {
  overflow-x: clip;
  color: var(--hrms-text);
  background: #ffffff;
}

.hrms-page *,
.hrms-page *::before,
.hrms-page *::after {
  box-sizing: border-box;
}

.hrms-page img {
  max-width: 100%;
  height: auto;
  display: block;
}

.hrms-page button,
.hrms-page a {
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.hrms-page a {
  -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   03. CONTAINER
========================================================= */

.hrms-page .container {
  width: min(calc(100% - 48px), var(--hrms-container));
  margin-inline: auto;
}

/* =========================================================
   04. SECTIONS
========================================================= */

.hrms-page .section {
  position: relative;
  padding-top: 110px;
  padding-bottom: 110px;
}

.hrms-page .section-heading {
  max-width: 760px;
  margin-bottom: 60px;
}

.hrms-page .section-heading .eyebrow {
  margin-bottom: 18px;
}

.hrms-page .section-heading h2 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(38px, 4.5vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  color: var(--hrms-navy);
}

.hrms-page .section-heading h2 span {
  display: block;
  color: var(--hrms-blue);
}

.hrms-page .section-heading p {
  max-width: 680px;
  margin: 22px 0 0;
  color: var(--hrms-muted);
  font-size: 16px;
  line-height: 1.8;
}

/* =========================================================
   05. EYEBROW
========================================================= */

.hrms-page .eyebrow {
  display: inline-block;
  color: var(--hrms-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* =========================================================
   06. BUTTONS
========================================================= */

.hrms-page .btn {
  min-height: 52px;
  padding: 0 23px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border: 1px solid transparent;
  border-radius: 8px;

  font-family: inherit;
  font-size: 14px;
  font-weight: 700;

  text-decoration: none;
  cursor: pointer;
}

.hrms-page .btn span {
  font-size: 18px;
  line-height: 1;
  transition: transform 0.25s ease;
}

.hrms-page .btn:hover span {
  transform: translateX(4px);
}

.hrms-page .btn-primary {
  background: var(--hrms-blue);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
}

.hrms-page .btn-primary:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 16px 35px rgba(37, 99, 235, 0.32);
}

.hrms-page .btn-secondary {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}

.hrms-page .btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-2px);
}

.hrms-page .btn-light {
  background: #ffffff;
  color: var(--hrms-navy);
}

.hrms-page .btn-light:hover {
  background: #eff6ff;
  color: var(--hrms-blue);
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}

.hrms-page .btn-large {
  min-height: 56px;
  padding-inline: 27px;
  font-size: 15px;
}

/* =========================================================
   07. PRODUCT HERO
========================================================= */

.hrms-hero {
  position: relative;
  min-height: 760px;
  padding: 50px 0;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 78% 38%,
      rgba(37, 99, 235, 0.22),
      transparent 32%
    ),
    radial-gradient(
      circle at 55% 100%,
      rgba(124, 58, 237, 0.12),
      transparent 35%
    ),
    linear-gradient(135deg, #061426 0%, #081a33 55%, #0b2342 100%);

  color: #ffffff;
}

.hrms-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);

  background-size: 60px 60px;

  mask-image: linear-gradient(to bottom, black, black 55%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black, black 55%, transparent);
}

.hrms-hero-container {
  position: relative;
  z-index: 2;

  min-height: 760px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(450px, 0.95fr);

  align-items: center;

  gap: 70px;

  padding-top: 90px;
  padding-bottom: 90px;
}

/* =========================================================
   08. HERO CONTENT
========================================================= */

.hrms-hero-content {
  max-width: 690px;
}

.hrms-product-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 20px;

  color: rgba(255, 255, 255, 0.78);

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.hrms-product-mark {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background: linear-gradient(135deg, #2563eb, #7c3aed);

  color: #ffffff;

  font-family: "Manrope", sans-serif;
  font-size: 17px;

  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.25);
}

.hrms-hero-content .eyebrow {
  display: block;
  margin-bottom: 18px;
  color: var(--hrms-blue-light);
}

.hrms-hero-content h1 {
  margin: 0;

  font-family: "Manrope", sans-serif;

  font-size: clamp(48px, 5.4vw, 60px);

  font-weight: 800;
  line-height: 1.01;
  letter-spacing: -0.055em;
}

.hrms-hero-content h1 span {
  display: block;

  background: linear-gradient(90deg, #60a5fa, #a78bfa);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.hrms-hero-content > p {
  max-width: 650px;

  margin: 28px 0 0;

  color: rgba(255, 255, 255, 0.7);

  font-size: 18px;
  line-height: 1.8;
}

/* =========================================================
   09. HERO ACTIONS
========================================================= */

.hrms-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

/* =========================================================
   10. HERO META
========================================================= */

.hrms-hero-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 25px;

  margin-top: 55px;
  padding-top: 25px;

  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hrms-hero-meta > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hrms-hero-meta strong {
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  color: #ffffff;
}

.hrms-hero-meta span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
}

/* =========================================================
   11. HERO VISUAL
========================================================= */

.hrms-hero-visual {
  position: relative;

  min-height: 540px;

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

.hrms-visual-glow {
  position: absolute;

  width: 470px;
  height: 470px;

  border-radius: 50%;

  background: linear-gradient(135deg, #2563eb, #7c3aed);

  filter: blur(115px);
  opacity: 0.17;
}

/* =========================================================
   12. HRMS DASHBOARD
========================================================= */

.hrms-dashboard {
  position: relative;
  z-index: 2;

  width: min(100%, 560px);

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.13);

  border-radius: 20px;

  background: rgba(9, 27, 51, 0.88);

  box-shadow:
    0 45px 100px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.hrms-dashboard-header {
  min-height: 76px;

  padding: 17px 20px;

  display: flex;
  align-items: center;
  gap: 12px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hrms-dashboard-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.hrms-dashboard-logo {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background: linear-gradient(135deg, #2563eb, #7c3aed);

  color: #ffffff;
  font-weight: 800;
}

.hrms-dashboard-brand div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hrms-dashboard-brand small {
  color: rgba(255, 255, 255, 0.4);
  font-size: 8px;
  letter-spacing: 0.14em;
}

.hrms-dashboard-brand strong {
  color: #ffffff;
  font-size: 12px;
}

.hrms-dashboard-status {
  margin-left: auto;

  color: #4ade80;

  font-size: 8px;
  font-weight: 800;

  white-space: nowrap;
}

/* =========================================================
   13. DASHBOARD BODY
========================================================= */

.hrms-dashboard-body {
  padding: 24px;
}

.hrms-dashboard-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 20px;
}

.hrms-dashboard-welcome small {
  color: rgba(255, 255, 255, 0.35);

  font-size: 8px;
  letter-spacing: 0.13em;
}

.hrms-dashboard-welcome h3 {
  margin: 7px 0 0;

  color: #ffffff;

  font-family: "Manrope", sans-serif;
  font-size: 19px;
}

.hrms-dashboard-welcome h3 span {
  color: var(--hrms-blue-light);
}

.hrms-date-box {
  width: 45px;
  height: 48px;

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

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 9px;

  background: rgba(255, 255, 255, 0.04);
}

.hrms-date-box span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 7px;
}

.hrms-date-box strong {
  color: #ffffff;
  font-size: 16px;
}

/* =========================================================
   14. DASHBOARD STATS
========================================================= */

.hrms-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.hrms-mini-stat {
  min-width: 0;

  padding: 12px;

  display: flex;
  align-items: center;
  gap: 9px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.035);
}

.hrms-mini-icon {
  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  font-size: 13px;
}

.hrms-mini-icon.blue {
  background: rgba(37, 99, 235, 0.18);
}

.hrms-mini-icon.purple {
  background: rgba(124, 58, 237, 0.18);
}

.hrms-mini-icon.green {
  background: rgba(34, 197, 94, 0.14);
}

.hrms-mini-icon.orange {
  background: rgba(249, 115, 22, 0.14);
}

.hrms-mini-stat div {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hrms-mini-stat strong {
  overflow: hidden;

  color: #ffffff;

  font-size: 9px;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.hrms-mini-stat small {
  overflow: hidden;

  color: rgba(255, 255, 255, 0.35);

  font-size: 7px;

  white-space: nowrap;
  text-overflow: ellipsis;
}

/* =========================================================
   15. DASHBOARD PANELS
========================================================= */

.hrms-dashboard-panels {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;

  gap: 10px;

  margin-top: 12px;
}

.hrms-dashboard-panel,
.hrms-notification-panel {
  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.035);
}

.hrms-dashboard-panel {
  padding: 15px;
}

.hrms-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 18px;
}

.hrms-panel-heading strong {
  color: #ffffff;
  font-size: 10px;
}

.hrms-panel-heading span {
  color: var(--hrms-blue-light);
  font-size: 8px;
}

.hrms-progress-row {
  margin-bottom: 14px;
}

.hrms-progress-row:last-child {
  margin-bottom: 0;
}

.hrms-progress-row > div:first-child {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.hrms-progress-row span {
  color: rgba(255, 255, 255, 0.42);
  font-size: 7px;
}

.hrms-progress-row strong {
  color: rgba(255, 255, 255, 0.68);
  font-size: 7px;
}

.hrms-progress {
  height: 4px;

  overflow: hidden;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.07);
}

.hrms-progress span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.hrms-notification-panel {
  padding: 18px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.hrms-notification-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  background: rgba(124, 58, 237, 0.16);

  color: var(--hrms-purple-light);
}

.hrms-notification-panel strong {
  display: block;

  margin-bottom: 5px;

  color: #ffffff;

  font-size: 10px;
}

.hrms-notification-panel small {
  display: block;

  color: rgba(255, 255, 255, 0.38);

  font-size: 8px;
  line-height: 1.5;
}

/* =========================================================
   16. DASHBOARD FOOTER
========================================================= */

.hrms-dashboard-footer {
  padding: 13px 20px;

  display: flex;
  justify-content: space-between;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hrms-dashboard-footer span {
  color: rgba(255, 255, 255, 0.35);

  font-size: 7px;
  letter-spacing: 0.12em;
}

/* =========================================================
   17. INTRO
========================================================= */

.hrms-intro {
  background: #ffffff;
}

.hrms-intro-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 100px;

  align-items: center;
}

.hrms-intro-heading {
  max-width: 600px;
}

.hrms-intro-heading h2 {
  margin: 18px 0 0;

  font-family: "Manrope", sans-serif;

  font-size: clamp(38px, 4.5vw, 58px);

  line-height: 1.06;

  letter-spacing: -0.045em;

  color: var(--hrms-navy);
}

.hrms-intro-heading h2 span {
  display: block;
  color: var(--hrms-blue);
}

.hrms-intro-content {
  max-width: 620px;
}

.hrms-intro-content p {
  margin: 0 0 20px;

  color: var(--hrms-muted);

  font-size: 16px;
  line-height: 1.85;
}

.hrms-intro-content p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   18. FEATURES
========================================================= */

.hrms-features {
  background: var(--hrms-light);
}

.hrms-feature-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 20px;
}

.hrms-feature-card {
  position: relative;

  min-height: 320px;

  padding: 32px;

  overflow: hidden;

  border: 1px solid var(--hrms-border);

  border-radius: 15px;

  background: #ffffff;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.hrms-feature-card::after {
  content: "";

  position: absolute;

  width: 160px;
  height: 160px;

  right: -90px;
  bottom: -90px;

  border-radius: 50%;

  background: rgba(37, 99, 235, 0.05);

  transition: transform 0.3s ease;
}

.hrms-feature-card:hover {
  transform: translateY(-7px);

  border-color: rgba(37, 99, 235, 0.18);

  box-shadow: var(--hrms-shadow-md);
}

.hrms-feature-card:hover::after {
  transform: scale(1.5);
}

.hrms-feature-number {
  position: absolute;

  top: 28px;
  right: 28px;

  color: var(--hrms-blue);

  font-size: 11px;
  font-weight: 800;
}

.hrms-feature-icon {
  width: 56px;
  height: 56px;

  display: grid;
  place-items: center;

  margin-bottom: 45px;

  border-radius: 12px;

  font-size: 24px;
}

.hrms-feature-icon.blue {
  background: #eff6ff;
}

.hrms-feature-icon.purple {
  background: #f5f3ff;
}

.hrms-feature-icon.green {
  background: #f0fdf4;
}

.hrms-feature-icon.orange {
  background: #fff7ed;
}

.hrms-feature-icon.cyan {
  background: #ecfeff;
}

.hrms-feature-icon.pink {
  background: #fdf2f8;
}

.hrms-feature-icon.dark {
  background: #eef2ff;
}

.hrms-feature-card h3 {
  margin: 0 0 12px;

  font-family: "Manrope", sans-serif;

  font-size: 21px;

  color: var(--hrms-navy);
}

.hrms-feature-card p {
  max-width: 320px;

  margin: 0;

  color: var(--hrms-muted);

  font-size: 14px;
  line-height: 1.75;
}

.hrms-feature-line {
  position: absolute;

  left: 32px;
  bottom: 30px;

  width: 35px;
  height: 2px;

  background: var(--hrms-blue);
}

/* =========================================================
   19. ECOSYSTEM
========================================================= */

.hrms-ecosystem {
  background: #ffffff;
  overflow: hidden;
}

.hrms-ecosystem-grid {
  display: grid;

  /*
    IMPORTANT FIX:
    Give the ecosystem visual enough horizontal space.
    The old 420px minimum was too small for the orbit + nodes.
  */
  grid-template-columns:
    minmax(620px, 0.98fr)
    minmax(0, 1.02fr);

  gap: 70px;

  align-items: center;
}

/* =========================================================
   20. ECOSYSTEM VISUAL
   COMPLETE RESPONSIVE REBUILD
========================================================= */

.hrms-ecosystem-visual {
  --eco-node-width: 145px;
  --eco-orbit-small: 350px;
  --eco-orbit-large: 500px;

  position: relative;

  width: 100%;
  max-width: 680px;

  min-height: 560px;

  margin-inline: auto;

  display: block;

  isolation: isolate;
}

/* =========================================================
   ECOSYSTEM BACKGROUND GLOW
========================================================= */

.hrms-ecosystem-visual::before {
  content: "";

  position: absolute;

  width: 390px;
  height: 390px;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.11) 0%,
    rgba(124, 58, 237, 0.055) 40%,
    transparent 72%
  );

  filter: blur(8px);

  pointer-events: none;

  z-index: 0;
}

/* =========================================================
   OUTER SUBTLE CIRCLE
========================================================= */

.hrms-ecosystem-visual::after {
  content: "";

  position: absolute;

  width: 310px;
  height: 310px;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  border: 1px solid rgba(37, 99, 235, 0.06);

  pointer-events: none;

  z-index: 2;
}

/* =========================================================
   ORBIT RINGS
========================================================= */

.hrms-ecosystem-orbit {
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  pointer-events: none;

  z-index: 1;
}

.hrms-orbit-one {
  width: var(--eco-orbit-small);
  height: var(--eco-orbit-small);

  border: 1.5px dashed rgba(37, 99, 235, 0.22);

  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.025),
    inset 0 0 25px rgba(37, 99, 235, 0.015);
}

.hrms-orbit-two {
  width: var(--eco-orbit-large);
  height: var(--eco-orbit-large);

  border: 1.5px dashed rgba(124, 58, 237, 0.16);

  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.02),
    inset 0 0 30px rgba(124, 58, 237, 0.015);
}

/* =========================================================
   CENTER KAMAL CIRCLE
========================================================= */

.hrms-ecosystem-center {
  position: absolute;

  top: 50%;
  left: 50%;

  z-index: 10;

  width: 165px;
  height: 165px;

  transform: translate(-50%, -50%);

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

  border: 1px solid rgba(37, 99, 235, 0.28);

  border-radius: 50%;

  background: radial-gradient(
    circle at 35% 30%,
    #ffffff 0%,
    #f5f9ff 45%,
    #edf4ff 100%
  );

  box-shadow:
    0 25px 60px rgba(37, 99, 235, 0.14),
    0 0 0 12px rgba(37, 99, 235, 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

  text-align: center;

  overflow: hidden;
}

.hrms-ecosystem-center::before {
  content: "";

  position: absolute;

  inset: 9px;

  border: 1px solid rgba(37, 99, 235, 0.09);

  border-radius: 50%;

  pointer-events: none;
}

.hrms-ecosystem-center::after {
  content: "";

  position: absolute;

  width: 90px;
  height: 90px;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(96, 165, 250, 0.13),
    transparent 70%
  );

  pointer-events: none;
}

.hrms-ecosystem-center span {
  position: relative;
  z-index: 2;

  font-family: "Manrope", sans-serif;

  font-size: 44px;

  font-weight: 800;

  line-height: 1;

  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 50%, #7c3aed 100%);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.hrms-ecosystem-center strong {
  position: relative;
  z-index: 2;

  margin-top: 8px;

  color: var(--hrms-navy);

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 0.02em;
}

.hrms-ecosystem-center small {
  position: relative;
  z-index: 2;

  margin-top: 4px;

  color: var(--hrms-muted);

  font-size: 8px;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =========================================================
   21. ECOSYSTEM NODES
========================================================= */

.hrms-ecosystem-node {
  position: absolute;

  z-index: 20;

  width: var(--eco-node-width);
  min-height: 54px;

  padding: 11px 14px;

  display: flex;
  align-items: center;

  gap: 9px;

  border: 1px solid rgba(229, 234, 241, 0.95);

  border-radius: 12px;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.99),
    rgba(248, 250, 253, 0.97)
  );

  box-shadow:
    0 15px 35px rgba(8, 26, 51, 0.08),
    0 3px 10px rgba(8, 26, 51, 0.035);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;

  white-space: nowrap;
}

.hrms-ecosystem-node:hover {
  transform: translateY(-5px);

  border-color: rgba(37, 99, 235, 0.25);

  box-shadow:
    0 20px 45px rgba(8, 26, 51, 0.13),
    0 5px 15px rgba(37, 99, 235, 0.05);
}

.hrms-ecosystem-node span {
  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background: #eff6ff;

  font-size: 16px;
}

.hrms-ecosystem-node strong {
  min-width: 0;

  color: var(--hrms-navy);

  font-size: 10px;
  font-weight: 800;

  line-height: 1.25;

  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   NODE POSITIONS
   IMPORTANT:
   No translateX positioning.
   Nodes are anchored directly from the visual edges.
========================================================= */

/* TOP LEFT */

.hrms-node-recruitment {
  top: 48px;
  left: 18px;

  transform: none;
}

.hrms-node-recruitment:hover {
  transform: translateY(-5px);
}

/* TOP RIGHT */

.hrms-node-employee {
  top: 48px;
  right: 18px;

  transform: none;
}

.hrms-node-employee:hover {
  transform: translateY(-5px);
}

/* BOTTOM LEFT */

.hrms-node-admin {
  bottom: 48px;
  left: 18px;

  transform: none;
}

.hrms-node-admin:hover {
  transform: translateY(-5px);
}

/* BOTTOM RIGHT */

.hrms-node-manager {
  bottom: 48px;
  right: 18px;

  transform: none;
}

.hrms-node-manager:hover {
  transform: translateY(-5px);
}

/* =========================================================
   NODE COLOR VARIATIONS
========================================================= */

.hrms-node-recruitment span {
  background: #eff6ff;
}

.hrms-node-employee span {
  background: #f5f3ff;
}

.hrms-node-admin span {
  background: #f0fdf4;
}

.hrms-node-manager span {
  background: #fff7ed;
}

/* =========================================================
   22. ECOSYSTEM CONTENT
========================================================= */

.hrms-ecosystem-content {
  max-width: 680px;
}

.hrms-ecosystem-content h2 {
  margin: 18px 0 22px;

  font-family: "Manrope", sans-serif;

  font-size: clamp(38px, 4.5vw, 58px);

  line-height: 1.06;

  letter-spacing: -0.045em;

  color: var(--hrms-navy);
}

.hrms-ecosystem-content h2 span {
  display: block;
  color: var(--hrms-blue);
}

.hrms-ecosystem-content > p {
  max-width: 630px;

  margin: 0 0 35px;

  color: var(--hrms-muted);

  font-size: 16px;
  line-height: 1.8;
}

.hrms-ecosystem-list {
  border-top: 1px solid var(--hrms-border);
}

.hrms-ecosystem-item {
  display: grid;

  grid-template-columns: 45px 1fr;

  gap: 20px;

  padding: 22px 0;

  border-bottom: 1px solid var(--hrms-border);
}

.hrms-ecosystem-item > span {
  color: var(--hrms-blue);

  font-size: 11px;
  font-weight: 800;

  padding-top: 4px;
}

.hrms-ecosystem-item h3 {
  margin: 0 0 6px;

  font-family: "Manrope", sans-serif;

  font-size: 18px;

  color: var(--hrms-navy);
}

.hrms-ecosystem-item p {
  margin: 0;

  color: var(--hrms-muted);

  font-size: 14px;
  line-height: 1.7;
}

/* =========================================================
   23. BENEFITS
========================================================= */

.hrms-benefits {
  background: var(--hrms-light);
}

.hrms-benefits-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 20px;
}

.hrms-benefit-card {
  min-height: 260px;

  padding: 30px;

  border-top: 2px solid var(--hrms-blue);

  background: #ffffff;

  box-shadow: 0 5px 20px rgba(8, 26, 51, 0.025);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.hrms-benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--hrms-shadow-md);
}

.hrms-benefit-card > span {
  color: var(--hrms-blue);

  font-size: 11px;
  font-weight: 800;
}

.hrms-benefit-card h3 {
  margin: 32px 0 12px;

  font-family: "Manrope", sans-serif;

  font-size: 21px;

  color: var(--hrms-navy);
}

.hrms-benefit-card p {
  margin: 0;

  color: var(--hrms-muted);

  font-size: 14px;
  line-height: 1.75;
}

/* =========================================================
   24. WORKFLOW
========================================================= */

.hrms-workflow {
  position: relative;

  padding: 120px 0;

  overflow: hidden;

  background: linear-gradient(135deg, #061426, #081a33 60%, #0b2342);

  color: #ffffff;
}

.hrms-workflow::before {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  right: -180px;
  top: -200px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 70%);
}

.hrms-workflow-grid {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: 0.85fr 1.15fr;

  gap: 100px;

  align-items: center;
}

.hrms-workflow-content {
  max-width: 560px;
}

.hrms-workflow-content .eyebrow {
  color: var(--hrms-blue-light);
}

.hrms-workflow-content h2 {
  margin: 20px 0;

  font-family: "Manrope", sans-serif;

  font-size: clamp(40px, 4.5vw, 60px);

  line-height: 1.05;

  letter-spacing: -0.045em;
}

.hrms-workflow-content h2 span {
  display: block;
  color: var(--hrms-blue-light);
}

.hrms-workflow-content p {
  max-width: 520px;

  margin: 0;

  color: rgba(255, 255, 255, 0.6);

  font-size: 16px;
  line-height: 1.8;
}

.hrms-workflow-steps {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hrms-workflow-step {
  display: grid;

  grid-template-columns: 45px 1fr;

  gap: 20px;

  padding: 25px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hrms-workflow-step > span {
  color: var(--hrms-blue-light);

  font-size: 11px;
  font-weight: 800;

  padding-top: 4px;
}

.hrms-workflow-step h3 {
  margin: 0 0 7px;

  font-family: "Manrope", sans-serif;

  font-size: 19px;
}

.hrms-workflow-step p {
  margin: 0;

  color: rgba(255, 255, 255, 0.52);

  font-size: 14px;
  line-height: 1.7;
}

/* =========================================================
   25. HRMS MODULES
========================================================= */

.hrms-modules {
  background: #ffffff;
}

.hrms-module-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 16px;
}

.hrms-module-card {
  position: relative;

  min-height: 205px;

  padding: 25px;

  overflow: hidden;

  border: 1px solid var(--hrms-border);

  border-radius: 13px;

  background: #ffffff;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.hrms-module-card:hover {
  transform: translateY(-5px);

  border-color: rgba(37, 99, 235, 0.2);

  box-shadow: var(--hrms-shadow-sm);
}

.hrms-module-number {
  position: absolute;

  top: 22px;
  right: 22px;

  color: var(--hrms-blue);

  font-size: 10px;
  font-weight: 800;
}

.hrms-module-card > div {
  margin-bottom: 25px;

  font-size: 28px;
}

.hrms-module-card strong {
  display: block;

  margin-bottom: 8px;

  color: var(--hrms-navy);

  font-family: "Manrope", sans-serif;

  font-size: 18px;
}

.hrms-module-card small {
  display: block;

  max-width: 220px;

  color: var(--hrms-muted);

  font-size: 12px;
  line-height: 1.65;
}

/* =========================================================
   26. CTA
========================================================= */

.hrms-cta {
  position: relative;

  padding: 120px 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 75% 50%,
      rgba(59, 130, 246, 0.2),
      transparent 35%
    ),
    #081a33;

  color: #ffffff;
}

.hrms-cta-grid {
  position: absolute;

  inset: 0;

  opacity: 0.5;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);

  background-size: 60px 60px;
}

.hrms-cta-content {
  position: relative;

  z-index: 2;

  max-width: 800px;

  margin-inline: auto;

  text-align: center;
}

.hrms-cta-mark {
  width: 62px;
  height: 62px;

  display: grid;
  place-items: center;

  margin: 0 auto 25px;

  border: 1px solid rgba(96, 165, 250, 0.25);

  border-radius: 16px;

  background: linear-gradient(135deg, #2563eb, #7c3aed);

  color: #ffffff;

  font-family: "Manrope", sans-serif;

  font-size: 27px;
  font-weight: 800;

  box-shadow: 0 15px 40px rgba(37, 99, 235, 0.25);
}

.hrms-cta-content .eyebrow {
  color: var(--hrms-blue-light);
}

.hrms-cta-content h2 {
  margin: 20px 0;

  font-family: "Manrope", sans-serif;

  font-size: clamp(40px, 5vw, 64px);

  line-height: 1.05;

  letter-spacing: -0.05em;
}

.hrms-cta-content h2 span {
  display: block;

  color: var(--hrms-blue-light);
}

.hrms-cta-content p {
  max-width: 650px;

  margin: 0 auto;

  color: rgba(255, 255, 255, 0.62);

  font-size: 16px;
  line-height: 1.8;
}

.hrms-cta-actions {
  margin-top: 35px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 25px;
}

.hrms-cta-link {
  color: #ffffff;

  text-decoration: none;

  font-size: 14px;
  font-weight: 700;
}

.hrms-cta-link:hover {
  color: var(--hrms-blue-light);

  transform: translateX(3px);
}

/* =========================================================
   27. REVEAL
========================================================= */

.hrms-page .reveal {
  opacity: 0;

  transform: translateY(30px);

  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hrms-page .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   28. STAGGER
========================================================= */

.hrms-feature-grid .reveal:nth-child(2),
.hrms-module-grid .reveal:nth-child(2),
.hrms-benefits-grid .reveal:nth-child(2) {
  transition-delay: 0.08s;
}

.hrms-feature-grid .reveal:nth-child(3),
.hrms-module-grid .reveal:nth-child(3),
.hrms-benefits-grid .reveal:nth-child(3) {
  transition-delay: 0.16s;
}

.hrms-feature-grid .reveal:nth-child(4),
.hrms-module-grid .reveal:nth-child(4),
.hrms-benefits-grid .reveal:nth-child(4) {
  transition-delay: 0.24s;
}

.hrms-feature-grid .reveal:nth-child(5),
.hrms-module-grid .reveal:nth-child(5) {
  transition-delay: 0.32s;
}

.hrms-feature-grid .reveal:nth-child(6),
.hrms-module-grid .reveal:nth-child(6) {
  transition-delay: 0.4s;
}

/* =========================================================
   29. ACCESSIBILITY
========================================================= */

.hrms-page a:focus-visible,
.hrms-page button:focus-visible {
  outline: 3px solid rgba(96, 165, 250, 0.7);

  outline-offset: 4px;

  border-radius: 5px;
}

/* =========================================================
   30. LARGE DESKTOP / LAPTOP
========================================================= */

@media (max-width: 1250px) {
  .hrms-page .container {
    width: min(calc(100% - 40px), var(--hrms-container));
  }

  /*
    Switch ecosystem to a stacked layout earlier.
    This prevents the visual and content from competing
    for horizontal space.
  */

  .hrms-ecosystem-grid {
    grid-template-columns: 1fr;
    gap: 70px;
  }

  .hrms-ecosystem-visual {
    width: min(100%, 680px);
    min-height: 560px;
  }

  .hrms-ecosystem-content {
    max-width: 760px;
    margin-inline: auto;
    width: 100%;
  }
}

/* =========================================================
   31. LARGE TABLETS
========================================================= */

@media (max-width: 1100px) {
  .hrms-hero-container {
    grid-template-columns: 1fr;

    gap: 55px;

    padding-top: 80px;
    padding-bottom: 80px;
  }

  .hrms-hero-content {
    max-width: 800px;
  }

  .hrms-hero-visual {
    min-height: 500px;
  }

  .hrms-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hrms-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hrms-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hrms-ecosystem-visual {
    --eco-node-width: 140px;
    --eco-orbit-small: 340px;
    --eco-orbit-large: 490px;

    min-height: 550px;
  }

  .hrms-ecosystem-node {
    width: var(--eco-node-width);
  }

  .hrms-node-recruitment,
  .hrms-node-employee {
    top: 45px;
  }

  .hrms-node-admin,
  .hrms-node-manager {
    bottom: 45px;
  }
}

/* =========================================================
   32. TABLETS
========================================================= */

@media (max-width: 900px) {
  .hrms-page .section {
    padding-top: 85px;
    padding-bottom: 85px;
  }

  .hrms-intro-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hrms-ecosystem-grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .hrms-ecosystem-visual {
    --eco-node-width: 135px;
    --eco-orbit-small: 320px;
    --eco-orbit-large: 450px;

    min-height: 520px;

    width: min(100%, 650px);

    margin-inline: auto;
  }

  .hrms-workflow-grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }
}

/* =========================================================
   33. MOBILE
========================================================= */

@media (max-width: 768px) {
  .hrms-page .container {
    width: calc(100% - 36px);
  }

  .hrms-page .section {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .hrms-page .section-heading {
    margin-bottom: 42px;
  }

  .hrms-page .section-heading h2 {
    font-size: clamp(34px, 9vw, 48px);
  }

  .hrms-page .section-heading p {
    font-size: 15px;
  }

  /* =====================================================
     HERO
  ===================================================== */

  .hrms-hero {
    min-height: auto;
  }

  .hrms-hero-container {
    min-height: auto;

    padding: 65px 24px;

    grid-template-columns: 1fr;

    gap: 55px;
  }

  .hrms-hero-content h1 {
    font-size: clamp(42px, 11vw, 60px);
  }

  .hrms-hero-content > p {
    font-size: 16px;
  }

  .hrms-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hrms-hero-actions .btn {
    width: 100%;
  }

  .hrms-hero-meta {
    gap: 14px;
  }

  .hrms-hero-meta strong {
    font-size: 12px;
  }

  .hrms-hero-meta span {
    font-size: 9px;
  }

  /* =====================================================
     DASHBOARD
  ===================================================== */

  .hrms-hero-visual {
    min-height: 410px;
  }

  .hrms-dashboard {
    width: 100%;
  }

  .hrms-dashboard-body {
    padding: 18px;
  }

  .hrms-dashboard-panels {
    grid-template-columns: 1fr;
  }

  /* =====================================================
     FEATURES
  ===================================================== */

  .hrms-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hrms-feature-card {
    min-height: 300px;
    padding: 25px;
  }

  /* =====================================================
     ECOSYSTEM - MOBILE
  ===================================================== */

  .hrms-ecosystem {
    overflow: hidden;
  }

  .hrms-ecosystem-visual {
    --eco-node-width: 125px;
    --eco-orbit-small: 280px;
    --eco-orbit-large: 390px;

    width: 100%;
    max-width: 600px;

    min-height: 470px;

    margin-inline: auto;
  }

  .hrms-ecosystem-visual::before {
    width: 300px;
    height: 300px;
  }

  .hrms-ecosystem-visual::after {
    width: 250px;
    height: 250px;
  }

  .hrms-ecosystem-center {
    width: 145px;
    height: 145px;
  }

  .hrms-ecosystem-center span {
    font-size: 38px;
  }

  .hrms-ecosystem-center strong {
    font-size: 10px;
  }

  .hrms-ecosystem-center small {
    font-size: 7px;
  }

  .hrms-ecosystem-node {
    width: var(--eco-node-width);
    min-height: 48px;

    padding: 8px 9px;

    gap: 6px;

    border-radius: 10px;
  }

  .hrms-ecosystem-node span {
    width: 27px;
    height: 27px;

    flex-basis: 27px;

    font-size: 14px;
  }

  .hrms-ecosystem-node strong {
    font-size: 8px;
  }

  /*
    Keep nodes inside the visual.
    Do NOT use translateX here.
  */

  .hrms-node-recruitment {
    top: 35px;
    left: 8px;

    transform: none;
  }

  .hrms-node-recruitment:hover {
    transform: translateY(-4px);
  }

  .hrms-node-employee {
    top: 35px;
    right: 8px;

    transform: none;
  }

  .hrms-node-employee:hover {
    transform: translateY(-4px);
  }

  .hrms-node-admin {
    bottom: 35px;
    left: 8px;

    transform: none;
  }

  .hrms-node-admin:hover {
    transform: translateY(-4px);
  }

  .hrms-node-manager {
    bottom: 35px;
    right: 8px;

    transform: none;
  }

  .hrms-node-manager:hover {
    transform: translateY(-4px);
  }

  /* =====================================================
     BENEFITS
  ===================================================== */

  .hrms-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* =====================================================
     MODULES
  ===================================================== */

  .hrms-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* =====================================================
     CTA
  ===================================================== */

  .hrms-cta {
    padding: 90px 0;
  }

  .hrms-cta-content h2 {
    font-size: clamp(40px, 10vw, 55px);
  }

  .hrms-cta-actions {
    flex-direction: column;
    gap: 18px;
  }
}

/* =========================================================
   34. SMALL MOBILE
========================================================= */

@media (max-width: 520px) {
  .hrms-page .container {
    width: calc(100% - 32px);
  }

  /* =====================================================
     HERO
  ===================================================== */

  .hrms-hero-container {
    padding: 55px 18px;
  }

  .hrms-hero-content h1 {
    font-size: clamp(40px, 12vw, 53px);
  }

  .hrms-hero-content > p {
    font-size: 15px;
  }

  .hrms-hero-meta {
    grid-template-columns: repeat(3, 1fr);
  }

  .hrms-hero-meta strong {
    font-size: 10px;
  }

  .hrms-hero-meta span {
    font-size: 8px;
  }

  /* =====================================================
     DASHBOARD
  ===================================================== */

  .hrms-hero-visual {
    min-height: 350px;
  }

  .hrms-dashboard {
    border-radius: 14px;
  }

  .hrms-dashboard-header {
    padding: 13px;
  }

  .hrms-dashboard-logo {
    width: 33px;
    height: 33px;
  }

  .hrms-dashboard-brand strong {
    font-size: 10px;
  }

  .hrms-dashboard-status {
    font-size: 6px;
  }

  .hrms-dashboard-body {
    padding: 14px;
  }

  .hrms-dashboard-welcome h3 {
    font-size: 15px;
  }

  .hrms-dashboard-stats {
    grid-template-columns: 1fr;
  }

  .hrms-mini-stat {
    padding: 9px;
  }

  .hrms-dashboard-footer {
    padding: 10px 13px;
  }

  /* =====================================================
     FEATURES
  ===================================================== */

  .hrms-feature-grid {
    grid-template-columns: 1fr;
  }

  .hrms-feature-card {
    min-height: auto;
    padding: 28px;
  }

  /* =====================================================
     ECOSYSTEM - SMALL MOBILE
  ===================================================== */

  .hrms-ecosystem-visual {
    --eco-node-width: 110px;
    --eco-orbit-small: 220px;
    --eco-orbit-large: 300px;

    min-height: 400px;

    width: 100%;
  }

  .hrms-ecosystem-visual::before {
    width: 245px;
    height: 245px;
  }

  .hrms-ecosystem-visual::after {
    width: 200px;
    height: 200px;
  }

  .hrms-ecosystem-center {
    width: 120px;
    height: 120px;
  }

  .hrms-ecosystem-center::before {
    inset: 7px;
  }

  .hrms-ecosystem-center span {
    font-size: 32px;
  }

  .hrms-ecosystem-center strong {
    margin-top: 6px;
    font-size: 9px;
  }

  .hrms-ecosystem-center small {
    margin-top: 3px;
    font-size: 6px;
  }

  .hrms-ecosystem-node {
    width: var(--eco-node-width);
    min-height: 43px;

    padding: 6px 7px;

    gap: 5px;

    border-radius: 9px;
  }

  .hrms-ecosystem-node span {
    width: 24px;
    height: 24px;

    flex-basis: 24px;

    font-size: 12px;

    border-radius: 6px;
  }

  .hrms-ecosystem-node strong {
    font-size: 7px;
  }

  /*
    Keep 100% of each card inside the ecosystem area.
  */

  .hrms-node-recruitment {
    top: 22px;
    left: 2px;

    transform: none;
  }

  .hrms-node-recruitment:hover {
    transform: translateY(-4px);
  }

  .hrms-node-employee {
    top: 22px;
    right: 2px;

    transform: none;
  }

  .hrms-node-employee:hover {
    transform: translateY(-4px);
  }

  .hrms-node-admin {
    bottom: 22px;
    left: 2px;

    transform: none;
  }

  .hrms-node-admin:hover {
    transform: translateY(-4px);
  }

  .hrms-node-manager {
    bottom: 22px;
    right: 2px;

    transform: none;
  }

  .hrms-node-manager:hover {
    transform: translateY(-4px);
  }

  /* =====================================================
     BENEFITS
  ===================================================== */

  .hrms-benefits-grid {
    grid-template-columns: 1fr;
  }

  .hrms-benefit-card {
    min-height: auto;
  }

  /* =====================================================
     MODULES
  ===================================================== */

  .hrms-module-grid {
    grid-template-columns: 1fr;
  }

  .hrms-module-card {
    min-height: auto;
  }

  /* =====================================================
     WORKFLOW
  ===================================================== */

  .hrms-workflow {
    padding: 80px 0;
  }

  .hrms-workflow-step {
    grid-template-columns: 35px 1fr;
    gap: 12px;
  }

  .hrms-workflow-step h3 {
    font-size: 17px;
  }

  .hrms-workflow-step p {
    font-size: 13px;
  }

  /* =====================================================
     CTA
  ===================================================== */

  .hrms-cta {
    padding: 75px 0;
  }

  .hrms-cta-actions {
    align-items: stretch;
  }

  .hrms-cta-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   35. EXTRA SMALL
========================================================= */

@media (max-width: 380px) {
  .hrms-hero-container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .hrms-hero-meta {
    gap: 7px;
  }

  .hrms-hero-meta strong {
    font-size: 9px;
  }

  .hrms-hero-meta span {
    font-size: 7px;
  }

  /* =====================================================
     ECOSYSTEM - EXTRA SMALL
  ===================================================== */

  .hrms-ecosystem-visual {
    --eco-node-width: 95px;
    --eco-orbit-small: 195px;
    --eco-orbit-large: 260px;

    min-height: 350px;

    width: 100%;
  }

  .hrms-ecosystem-visual::before {
    width: 210px;
    height: 210px;
  }

  .hrms-ecosystem-visual::after {
    width: 175px;
    height: 175px;
  }

  .hrms-ecosystem-center {
    width: 105px;
    height: 105px;
  }

  .hrms-ecosystem-center span {
    font-size: 28px;
  }

  .hrms-ecosystem-center strong {
    font-size: 8px;
  }

  .hrms-ecosystem-center small {
    font-size: 5px;
  }

  .hrms-ecosystem-node {
    width: var(--eco-node-width);
    min-height: 39px;

    padding: 5px 6px;

    gap: 4px;
  }

  .hrms-ecosystem-node span {
    width: 21px;
    height: 21px;

    flex-basis: 21px;

    font-size: 10px;
  }

  .hrms-ecosystem-node strong {
    font-size: 6px;
  }

  .hrms-node-recruitment {
    top: 14px;
    left: 0;

    transform: none;
  }

  .hrms-node-recruitment:hover {
    transform: translateY(-3px);
  }

  .hrms-node-employee {
    top: 14px;
    right: 0;

    transform: none;
  }

  .hrms-node-employee:hover {
    transform: translateY(-3px);
  }

  .hrms-node-admin {
    bottom: 14px;
    left: 0;

    transform: none;
  }

  .hrms-node-admin:hover {
    transform: translateY(-3px);
  }

  .hrms-node-manager {
    bottom: 14px;
    right: 0;

    transform: none;
  }

  .hrms-node-manager:hover {
    transform: translateY(-3px);
  }
}

/* =========================================================
   36. VERY NARROW PHONES
========================================================= */

@media (max-width: 340px) {
  .hrms-ecosystem-visual {
    --eco-node-width: 88px;
    --eco-orbit-small: 180px;
    --eco-orbit-large: 235px;

    min-height: 325px;
  }

  .hrms-ecosystem-node {
    min-height: 36px;
    padding: 4px 5px;
    gap: 3px;
  }

  .hrms-ecosystem-node span {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
    font-size: 9px;
  }

  .hrms-ecosystem-node strong {
    font-size: 5.5px;
  }

  .hrms-ecosystem-center {
    width: 96px;
    height: 96px;
  }

  .hrms-ecosystem-center span {
    font-size: 25px;
  }

  .hrms-ecosystem-center strong {
    font-size: 7px;
  }

  .hrms-ecosystem-center small {
    font-size: 4.5px;
  }
}

/* =========================================================
   37. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .hrms-page *,
  .hrms-page *::before,
  .hrms-page *::after {
    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;
  }

  .hrms-page .reveal {
    opacity: 1;
    transform: none;
  }
}

/* REQUEST DEMO PAGE */

/* =========================================================
   REQUEST DEMO PAGE
========================================================= */

.request-demo-page {
  background: #f7f9fc;
  color: #081a33;
}

/* =========================================================
   HERO
========================================================= */

.demo-hero {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(
      circle at 80% 30%,
      rgba(47, 111, 235, 0.15),
      transparent 35%
    ),
    linear-gradient(135deg, #06152d 0%, #081a33 55%, #0d284b 100%);
  color: #fff;
}

.demo-hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: linear-gradient(to right, black, transparent 80%);
}

.demo-hero-content {
  position: relative;
  z-index: 2;
  max-width: 850px;
  padding: 110px 0 100px;
}

.demo-product-mark {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 25px;
  font-weight: 800;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}

.demo-hero .eyebrow {
  display: block;
  margin-bottom: 18px;
  color: #75a7ff;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 800;
}

.demo-hero h1 {
  max-width: 820px;
  margin: 0 0 25px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.demo-hero h1 span {
  display: block;
  color: #74a5ff;
}

.demo-hero p {
  max-width: 690px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 18px;
  line-height: 1.8;
}

.demo-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 45px;
}

.demo-hero-points div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.demo-hero-points span {
  color: #74a5ff;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.demo-hero-points strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}

/* =========================================================
   REQUEST SECTION
========================================================= */

.demo-request-section {
  position: relative;
  padding: 110px 0;
  background: #f7f9fc;
}

.demo-request-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 90px;
  align-items: start;
}

.demo-request-info {
  position: sticky;
  top: 120px;
}

.demo-request-info .eyebrow {
  color: #3974d9;
}

.demo-request-info h2 {
  margin: 15px 0 22px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.demo-request-info h2 span {
  display: block;
  color: #3974d9;
}

.demo-request-info > p {
  max-width: 540px;
  color: #66758a;
  line-height: 1.8;
}

/* =========================================================
   PRODUCT SELECTOR
========================================================= */

.demo-product-selector {
  margin-top: 42px;
}

.demo-selector-label {
  display: block;
  margin-bottom: 15px;
  color: #8490a1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.demo-product-option {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 0;
  border-bottom: 1px solid #e1e7ef;
}

.demo-option-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 19px;
}

.demo-option-icon.blue {
  background: #eaf2ff;
}

.demo-option-icon.green {
  background: #e9f9f1;
}

.demo-option-icon.purple {
  background: #f1edff;
  color: #7556dc;
  font-size: 22px;
  font-weight: 700;
}

.demo-product-option strong {
  display: block;
  margin-bottom: 4px;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
}

.demo-product-option small {
  color: #7c8898;
  font-size: 12px;
}

.demo-direct-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 35px;
  padding-top: 25px;
  border-top: 1px solid #e1e7ef;
}

.demo-direct-contact span {
  color: #788496;
  font-size: 13px;
}

.demo-direct-contact a {
  color: #2167d5;
  font-size: 13px;
  font-weight: 700;
}

/* =========================================================
   FORM
========================================================= */

.demo-form-wrapper {
  overflow: hidden;
  border: 1px solid #e1e7ef;
  background: #fff;
  box-shadow: 0 30px 80px rgba(8, 26, 51, 0.08);
}

.demo-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 34px;
  background: #081a33;
  color: #fff;
}

.demo-form-header > div:first-child span {
  display: block;
  margin-bottom: 5px;
  color: #7da9ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.demo-form-header h3 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: 22px;
}

.demo-form-number {
  color: rgba(255, 255, 255, 0.25);
  font-family: "Manrope", sans-serif;
  font-size: 38px;
  font-weight: 800;
}

.demo-form {
  padding: 35px;
}

.demo-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field {
  margin-bottom: 22px;
}

.form-field label {
  display: block;
  margin-bottom: 9px;
  color: #26364b;
  font-size: 12px;
  font-weight: 700;
}

.form-field label span {
  color: #e15454;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid #dce3ec;
  border-radius: 5px;
  outline: none;
  background: #fbfcfe;
  color: #081a33;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.form-field input,
.form-field select {
  height: 52px;
  padding: 0 15px;
}

.form-field textarea {
  min-height: 125px;
  padding: 14px 15px;
  resize: vertical;
  line-height: 1.6;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #a4afbd;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: #4b82e4;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(75, 130, 228, 0.09);
}

/* =========================================================
   CONSENT
========================================================= */

.demo-consent {
  margin: 5px 0 22px;
}

.demo-consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.demo-consent input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: #2167d5;
}

.demo-consent span {
  color: #7c8796;
  font-size: 11px;
  line-height: 1.6;
}

.demo-submit-button {
  width: 100%;
  justify-content: center;
  border: none;
  cursor: pointer;
}

.demo-submit-button.loading {
  opacity: 0.7;
  pointer-events: none;
}

.demo-form-note {
  margin: 15px 0 0;
  color: #98a3b0;
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

/* =========================================================
   PROCESS
========================================================= */

.demo-process {
  background: #fff;
}

.demo-process .section-heading {
  max-width: 760px;
  margin-bottom: 60px;
}

.demo-process .section-heading h2 {
  margin-top: 14px;
}

.demo-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid #e3e8ef;
  background: #e3e8ef;
}

.demo-process-card {
  position: relative;
  min-height: 300px;
  padding: 35px 30px;
  background: #fff;
}

.demo-process-number {
  color: #b9c3d0;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.demo-process-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 45px 0 25px;
  border-radius: 12px;
  background: #edf3ff;
  color: #3974d9;
  font-size: 18px;
  font-weight: 800;
}

.demo-process-card h3 {
  margin: 0 0 12px;
  font-family: "Manrope", sans-serif;
  font-size: 18px;
}

.demo-process-card p {
  margin: 0;
  color: #748195;
  font-size: 13px;
  line-height: 1.7;
}

/* =========================================================
   PRODUCTS
========================================================= */

.demo-products {
  background: #f5f7fb;
}

.demo-products-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
  align-items: center;
}

.demo-products-heading .eyebrow {
  color: #3974d9;
}

.demo-products-heading h2 {
  margin: 15px 0 20px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.demo-products-heading h2 span {
  display: block;
  color: #3974d9;
}

.demo-products-heading p {
  max-width: 470px;
  margin-bottom: 30px;
  color: #748195;
  line-height: 1.8;
}

.demo-product-card {
  display: grid;
  grid-template-columns: 58px 1fr 25px;
  gap: 20px;
  align-items: center;
  padding: 25px;
  border: 1px solid #dfe5ed;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.demo-product-card + .demo-product-card {
  border-top: none;
}

.demo-product-card:hover {
  position: relative;
  z-index: 2;
  transform: translateX(7px);
  border-color: #9bb9eb;
  box-shadow: 0 15px 35px rgba(8, 26, 51, 0.08);
}

.demo-product-card-icon {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  font-size: 23px;
}

.demo-product-card-icon.blue {
  background: #eaf2ff;
}

.demo-product-card-icon.green {
  background: #e8f8f0;
}

.demo-product-card-icon.dark {
  background: #081a33;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
}

.demo-product-card span {
  display: block;
  margin-bottom: 5px;
  color: #3974d9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.demo-product-card h3 {
  margin: 0 0 7px;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
}

.demo-product-card p {
  margin: 0;
  color: #7c8898;
  font-size: 12px;
  line-height: 1.6;
}

.demo-product-card > strong {
  color: #3974d9;
  font-size: 20px;
}

/* =========================================================
   BENEFITS
========================================================= */

.demo-benefits {
  background: #fff;
}

.demo-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #dfe5ed;
  border-left: 1px solid #dfe5ed;
}

.demo-benefit-card {
  min-height: 260px;
  padding: 30px;
  border-right: 1px solid #dfe5ed;
  border-bottom: 1px solid #dfe5ed;
}

.demo-benefit-card > span {
  display: block;
  margin-bottom: 70px;
  color: #3974d9;
  font-size: 11px;
  font-weight: 800;
}

.demo-benefit-card h3 {
  margin: 0 0 12px;
  font-family: "Manrope", sans-serif;
  font-size: 17px;
}

.demo-benefit-card p {
  margin: 0;
  color: #778496;
  font-size: 13px;
  line-height: 1.7;
}

/* =========================================================
   FINAL CTA
========================================================= */

.demo-final-cta {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background:
    radial-gradient(
      circle at 75% 50%,
      rgba(68, 126, 222, 0.25),
      transparent 35%
    ),
    #081a33;
  color: #fff;
}

.demo-final-grid {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 50px 50px;
}

.demo-final-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
  text-align: center;
  margin: auto;
}

.demo-final-mark {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-weight: 800;
}

.demo-final-content .eyebrow {
  color: #74a5ff;
}

.demo-final-content h2 {
  margin: 15px 0 20px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.demo-final-content h2 span {
  display: block;
  color: #74a5ff;
}

.demo-final-content p {
  max-width: 650px;
  margin: 0 auto 35px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.8;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
  .demo-request-grid {
    gap: 50px;
  }

  .demo-products-grid {
    gap: 50px;
  }

  .demo-process-grid,
  .demo-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 850px) {
  .demo-hero-content {
    padding: 85px 0;
  }

  .demo-request-grid,
  .demo-products-grid {
    grid-template-columns: 1fr;
  }

  .demo-request-info {
    position: static;
  }

  .demo-products-heading {
    max-width: 650px;
  }

  .demo-product-option {
    max-width: 600px;
  }
}

@media (max-width: 650px) {
  .demo-hero {
    min-height: auto;
  }

  .demo-hero-content {
    padding: 70px 0;
  }

  .demo-hero h1 {
    font-size: 42px;
  }

  .demo-hero p {
    font-size: 15px;
  }

  .demo-hero-points {
    display: grid;
    gap: 16px;
    margin-top: 30px;
  }

  .demo-request-section,
  .demo-final-cta {
    padding: 75px 0;
  }

  .demo-form {
    padding: 24px;
  }

  .demo-form-header {
    padding: 22px 24px;
  }

  .demo-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .demo-process-grid,
  .demo-benefits-grid {
    grid-template-columns: 1fr;
  }

  .demo-process-card {
    min-height: auto;
  }

  .demo-benefit-card {
    min-height: auto;
  }

  .demo-benefit-card > span {
    margin-bottom: 35px;
  }

  .demo-product-card {
    grid-template-columns: 48px 1fr 20px;
    padding: 18px;
    gap: 14px;
  }

  .demo-product-card-icon {
    width: 48px;
    height: 48px;
  }

  .demo-final-content h2 {
    font-size: 40px;
  }
}

/* SOLUTION PAGE */
/* EDUCATION SOLUTION PAGE */
/* =========================================================
   KAMAL FOR EDUCATION
   MAIN SECTION CSS ONLY
========================================================= */

:root {
  --education-navy: #081a33;
  --education-navy-light: #102a4d;
  --education-blue: #2563eb;
  --education-blue-dark: #1d4ed8;
  --education-purple: #7c3aed;
  --education-green: #16a34a;
  --education-orange: #f97316;
  --education-cyan: #0891b2;

  --education-white: #ffffff;
  --education-bg: #f7f9fc;
  --education-bg-soft: #eef4fb;
  --education-border: #dfe7f1;

  --education-text: #0b1f3a;
  --education-text-soft: #52627a;
  --education-muted: #7b8798;

  --education-shadow: 0 20px 60px rgba(8, 26, 51, 0.1);

  --education-shadow-lg: 0 35px 90px rgba(8, 26, 51, 0.16);

  --education-radius: 22px;
  --education-radius-lg: 30px;

  --education-container: 1240px;
}

/* =========================================================
   MAIN GLOBAL
========================================================= */

.education-solution-page main {
  overflow: hidden;
  background: var(--education-white);
  color: var(--education-text);
}

.education-solution-page main *,
.education-solution-page main *::before,
.education-solution-page main *::after {
  box-sizing: border-box;
}

.education-solution-page main .container {
  width: min(calc(100% - 48px), var(--education-container));

  margin-inline: auto;
}

.education-solution-page main .section {
  padding: 110px 0;
}

.education-solution-page main .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 18px;

  color: var(--education-blue);

  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.3;

  text-transform: uppercase;
}

.education-solution-page main .eyebrow::before {
  content: "";

  width: 28px;
  height: 2px;

  background: currentColor;
}

.education-solution-page main h1,
.education-solution-page main h2,
.education-solution-page main h3,
.education-solution-page main p {
  margin-top: 0;
}

.education-solution-page main h1,
.education-solution-page main h2,
.education-solution-page main h3 {
  font-family: "Manrope", sans-serif;
}

.education-solution-page main p {
  font-family: "Inter", sans-serif;
}

.education-solution-page main a {
  text-decoration: none;
}

/* =========================================================
   BUTTONS
========================================================= */

.education-solution-page main .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-height: 52px;
  padding: 0 24px;

  border: 1px solid transparent;
  border-radius: 10px;

  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.education-solution-page main .btn span {
  font-size: 18px;
  line-height: 1;
}

.education-solution-page main .btn:hover {
  transform: translateY(-2px);
}

.education-solution-page main .btn-primary {
  background: var(--education-blue);
  color: #fff;

  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.24);
}

.education-solution-page main .btn-primary:hover {
  background: var(--education-blue-dark);

  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.3);
}

.education-solution-page main .btn-secondary {
  border-color: var(--education-border);
  background: #fff;
  color: var(--education-navy);
}

.education-solution-page main .btn-secondary:hover {
  border-color: var(--education-blue);
  color: var(--education-blue);
}

.education-solution-page main .btn-light {
  background: #fff;
  color: var(--education-navy);

  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.16);
}

.education-solution-page main .btn-light:hover {
  background: #f4f7fb;
}

.education-solution-page main .btn-large {
  min-height: 58px;
  padding-inline: 28px;
}

/* =========================================================
   HERO
========================================================= */

.education-hero {
  position: relative;

  min-height: 760px;

  display: flex;
  align-items: center;

  padding: 100px 0 90px;

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(37, 99, 235, 0.14),
      transparent 30%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(124, 58, 237, 0.08),
      transparent 30%
    ),
    #f7faff;

  overflow: hidden;
}

.education-hero-grid,
.education-cta-grid {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(8, 26, 51, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 26, 51, 0.035) 1px, transparent 1px);

  background-size: 55px 55px;

  mask-image: linear-gradient(to bottom, black 0%, transparent 90%);
}

.education-hero-container {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr);

  align-items: center;

  gap: 70px;
}

.education-hero-content {
  max-width: 640px;
}

.education-solution-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 24px;

  color: var(--education-navy);

  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.education-solution-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  border-radius: 9px;

  background: var(--education-navy);
  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 800;

  box-shadow: 0 8px 20px rgba(8, 26, 51, 0.18);
}

.education-hero-content h1 {
  max-width: 680px;

  margin-bottom: 24px;

  color: var(--education-navy);

  font-size: clamp(46px, 5vw, 74px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.education-hero-content h1 span {
  display: block;
  color: var(--education-blue);
}

.education-hero-content > p {
  max-width: 610px;

  margin-bottom: 32px;

  color: var(--education-text-soft);

  font-size: 17px;
  line-height: 1.8;
}

.education-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 12px;

  margin-bottom: 40px;
}

.education-hero-meta {
  display: flex;
  flex-wrap: wrap;

  gap: 0;
}

.education-hero-meta > div {
  position: relative;

  display: flex;
  flex-direction: column;

  padding: 0 22px;
}

.education-hero-meta > div:first-child {
  padding-left: 0;
}

.education-hero-meta > div + div::before {
  content: "";

  position: absolute;
  left: 0;
  top: 50%;

  width: 1px;
  height: 32px;

  background: var(--education-border);

  transform: translateY(-50%);
}

.education-hero-meta strong {
  margin-bottom: 3px;

  color: var(--education-navy);

  font-family: "Manrope", sans-serif;
  font-size: 14px;
}

.education-hero-meta span {
  color: var(--education-muted);

  font-family: "Inter", sans-serif;
  font-size: 12px;
}

/* =========================================================
   HERO DASHBOARD
========================================================= */

.education-hero-visual {
  position: relative;

  min-width: 0;
}

.education-visual-glow {
  position: absolute;

  width: 480px;
  height: 480px;

  right: 0;
  top: 50%;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.24),
    rgba(37, 99, 235, 0)
  );

  filter: blur(10px);

  transform: translateY(-50%);
}

.education-dashboard {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 670px;

  margin-left: auto;

  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;

  background: rgba(255, 255, 255, 0.94);

  box-shadow:
    0 40px 100px rgba(8, 26, 51, 0.16),
    0 10px 30px rgba(37, 99, 235, 0.08);

  overflow: hidden;

  transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
}

.education-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 18px 22px;

  background: var(--education-navy);
  color: #fff;
}

.education-dashboard-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.education-dashboard-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border-radius: 10px;

  background: var(--education-blue);

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 800;
}

.education-dashboard-brand small {
  display: block;

  margin-bottom: 2px;

  color: rgba(255, 255, 255, 0.58);

  font-family: "Inter", sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.education-dashboard-brand strong {
  display: block;

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.education-dashboard-status {
  color: #6ee7b7;

  font-family: "Inter", sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.education-dashboard-body {
  padding: 25px;
}

.education-dashboard-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 22px;
}

.education-dashboard-welcome small {
  display: block;

  margin-bottom: 5px;

  color: var(--education-muted);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.education-dashboard-welcome h3 {
  margin-bottom: 0;

  color: var(--education-navy);

  font-size: 19px;
  font-weight: 800;
}

.education-dashboard-welcome h3 span {
  color: var(--education-blue);
}

.education-date-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 58px;

  border: 1px solid var(--education-border);
  border-radius: 12px;

  background: #f8fafc;
}

.education-date-box span {
  color: var(--education-muted);

  font-size: 8px;
  font-weight: 800;
}

.education-date-box strong {
  color: var(--education-navy);

  font-family: "Manrope", sans-serif;
  font-size: 20px;
}

.education-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

  margin-bottom: 12px;
}

.education-mini-stat {
  display: flex;
  align-items: center;

  gap: 9px;

  padding: 13px;

  border: 1px solid var(--education-border);
  border-radius: 13px;

  background: #fff;
}

.education-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 34px;

  width: 34px;
  height: 34px;

  border-radius: 9px;

  font-size: 15px;
}

.education-mini-icon.blue {
  background: #e8f0ff;
}

.education-mini-icon.purple {
  background: #f1eaff;
}

.education-mini-icon.green {
  background: #e9f9ef;
}

.education-mini-stat strong {
  display: block;

  margin-bottom: 2px;

  color: var(--education-navy);

  font-family: "Manrope", sans-serif;
  font-size: 10px;
}

.education-mini-stat small {
  display: block;

  color: var(--education-muted);

  font-size: 7px;
  line-height: 1.3;
}

.education-dashboard-panels {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;

  gap: 12px;
}

.education-dashboard-panel,
.education-notification-panel {
  border: 1px solid var(--education-border);
  border-radius: 14px;

  background: #fff;
}

.education-dashboard-panel {
  padding: 17px;
}

.education-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 18px;
}

.education-panel-heading strong {
  color: var(--education-navy);

  font-family: "Manrope", sans-serif;
  font-size: 11px;
}

.education-panel-heading span {
  color: var(--education-blue);

  font-size: 8px;
  font-weight: 700;
}

.education-progress-row {
  margin-bottom: 15px;
}

.education-progress-row:last-child {
  margin-bottom: 0;
}

.education-progress-row > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 7px;
}

.education-progress-row span {
  color: var(--education-text-soft);

  font-size: 8px;
}

.education-progress-row strong {
  color: var(--education-green);

  font-size: 7px;
}

.education-progress {
  width: 100%;
  height: 5px;

  border-radius: 100px;

  background: #edf2f7;

  overflow: hidden;
}

.education-progress > span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background: linear-gradient(90deg, var(--education-blue), #60a5fa);
}

.education-notification-panel {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  padding: 17px;

  background: linear-gradient(145deg, #f4f8ff, #ffffff);
}

.education-notification-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 30px;

  width: 30px;
  height: 30px;

  border-radius: 9px;

  background: #e7efff;

  color: var(--education-blue);
}

.education-notification-panel strong {
  display: block;

  margin-bottom: 5px;

  color: var(--education-navy);

  font-family: "Manrope", sans-serif;
  font-size: 10px;
}

.education-notification-panel small {
  display: block;

  color: var(--education-text-soft);

  font-size: 8px;
  line-height: 1.5;
}

.education-dashboard-footer {
  display: flex;
  justify-content: space-between;

  padding: 11px 20px;

  border-top: 1px solid var(--education-border);

  color: var(--education-muted);

  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

/* =========================================================
   SECTION HEADING
========================================================= */

.education-solution-page main .section-heading {
  max-width: 760px;

  margin: 0 auto 55px;

  text-align: center;
}

.education-solution-page main .section-heading h2 {
  margin-bottom: 18px;

  color: var(--education-navy);

  font-size: clamp(34px, 4vw, 54px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.education-solution-page main .section-heading h2 span {
  color: var(--education-blue);
}

.education-solution-page main .section-heading p {
  max-width: 680px;

  margin: 0 auto;

  color: var(--education-text-soft);

  font-size: 16px;
  line-height: 1.8;
}

/* =========================================================
   INTRO
========================================================= */

.education-intro {
  background: #fff;
}

.education-intro-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;

  gap: 100px;

  align-items: start;
}

.education-intro-heading h2 {
  max-width: 540px;

  margin-bottom: 0;

  color: var(--education-navy);

  font-size: clamp(35px, 4vw, 54px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.06;
}

.education-intro-heading h2 span {
  display: block;

  color: var(--education-blue);
}

.education-intro-content {
  padding-top: 35px;
}

.education-intro-content p {
  max-width: 650px;

  margin-bottom: 22px;

  color: var(--education-text-soft);

  font-size: 16px;
  line-height: 1.9;
}

.education-intro-content p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   SOLUTIONS
========================================================= */

.education-solutions {
  background: var(--education-bg);
}

.education-solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 18px;
}

.education-solution-card {
  position: relative;

  min-height: 320px;

  padding: 30px;

  border: 1px solid var(--education-border);
  border-radius: var(--education-radius);

  background: #fff;

  overflow: hidden;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.education-solution-card:hover {
  transform: translateY(-7px);

  border-color: rgba(37, 99, 235, 0.25);

  box-shadow: var(--education-shadow);
}

.education-solution-number {
  position: absolute;

  top: 25px;
  right: 26px;

  color: #dce5f0;

  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.education-solution-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;

  margin-bottom: 30px;

  border-radius: 15px;

  font-size: 24px;
}

.education-solution-icon.blue {
  background: #e9f1ff;
}

.education-solution-icon.purple {
  background: #f0eaff;
}

.education-solution-icon.green {
  background: #e8f8ee;
}

.education-solution-icon.orange {
  background: #fff0e7;
}

.education-solution-icon.cyan {
  background: #e5f8fb;
}

.education-solution-icon.dark {
  background: #e9edf3;
}

.education-solution-card h3 {
  margin-bottom: 13px;

  color: var(--education-navy);

  font-size: 21px;
  font-weight: 800;
}

.education-solution-card p {
  margin-bottom: 25px;

  color: var(--education-text-soft);

  font-size: 14px;
  line-height: 1.75;
}

.education-solution-line {
  position: absolute;

  left: 30px;
  bottom: 0;

  width: 45px;
  height: 3px;

  border-radius: 10px 10px 0 0;

  background: var(--education-blue);

  transition: width 0.3s ease;
}

.education-solution-card:hover .education-solution-line {
  width: 90px;
}

/* =========================================================
   ECOSYSTEM
========================================================= */

.education-ecosystem {
  background: #fff;
}

.education-ecosystem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  align-items: center;

  gap: 100px;
}

.education-ecosystem-visual {
  position: relative;

  min-height: 560px;

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

.education-ecosystem-orbit {
  position: absolute;

  border: 1px dashed rgba(37, 99, 235, 0.23);

  border-radius: 50%;
}

.education-orbit-one {
  width: 350px;
  height: 350px;
}

.education-orbit-two {
  width: 500px;
  height: 500px;

  border-color: rgba(8, 26, 51, 0.1);
}

.education-ecosystem-center {
  position: relative;
  z-index: 4;

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

  width: 170px;
  height: 170px;

  border-radius: 50%;

  background: linear-gradient(145deg, var(--education-navy), #12365f);

  color: #fff;

  box-shadow: 0 25px 60px rgba(8, 26, 51, 0.22);
}

.education-ecosystem-center span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  margin-bottom: 7px;

  border-radius: 12px;

  background: var(--education-blue);

  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.education-ecosystem-center strong {
  font-family: "Manrope", sans-serif;
  font-size: 17px;
}

.education-ecosystem-center small {
  margin-top: 4px;

  color: rgba(255, 255, 255, 0.58);

  font-size: 9px;
}

.education-ecosystem-node {
  position: absolute;
  z-index: 5;

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

  width: 112px;
  height: 112px;

  border: 1px solid var(--education-border);
  border-radius: 20px;

  background: #fff;

  box-shadow: 0 15px 35px rgba(8, 26, 51, 0.1);
}

.education-ecosystem-node span {
  margin-bottom: 7px;

  font-size: 25px;
}

.education-ecosystem-node strong {
  color: var(--education-navy);

  font-family: "Manrope", sans-serif;
  font-size: 11px;
}

.education-node-student {
  top: 18px;
  left: 50%;

  transform: translateX(-50%);
}

.education-node-teacher {
  right: 5px;
  top: 50%;

  transform: translateY(-50%);
}

.education-node-admin {
  bottom: 18px;
  left: 50%;

  transform: translateX(-50%);
}

.education-node-parent {
  left: 5px;
  top: 50%;

  transform: translateY(-50%);
}

.education-ecosystem-content h2 {
  max-width: 600px;

  margin-bottom: 22px;

  color: var(--education-navy);

  font-size: clamp(35px, 4vw, 54px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.06;
}

.education-ecosystem-content h2 span {
  display: block;

  color: var(--education-blue);
}

.education-ecosystem-content > p {
  max-width: 590px;

  margin-bottom: 32px;

  color: var(--education-text-soft);

  font-size: 15px;
  line-height: 1.85;
}

.education-ecosystem-list {
  display: flex;
  flex-direction: column;

  gap: 18px;
}

.education-ecosystem-item {
  display: grid;
  grid-template-columns: 38px 1fr;

  gap: 15px;
}

.education-ecosystem-item > span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border-radius: 10px;

  background: #edf4ff;

  color: var(--education-blue);

  font-family: "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 800;
}

.education-ecosystem-item h3 {
  margin-bottom: 4px;

  color: var(--education-navy);

  font-size: 15px;
}

.education-ecosystem-item p {
  margin: 0;

  color: var(--education-text-soft);

  font-size: 12px;
  line-height: 1.6;
}

/* =========================================================
   INDUSTRIES
========================================================= */

.education-industries {
  background: var(--education-bg);
}

.education-industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 18px;
}

.education-industry-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 340px;

  padding: 30px;

  border: 1px solid var(--education-border);
  border-radius: var(--education-radius);

  background: #fff;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.education-industry-card:hover {
  transform: translateY(-7px);

  border-color: rgba(37, 99, 235, 0.25);

  box-shadow: var(--education-shadow);
}

.education-industry-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  margin-bottom: 30px;
}

.education-industry-top > span {
  color: #c8d3e1;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.education-industry-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;

  border-radius: 15px;

  font-size: 24px;
}

.education-industry-icon.blue {
  background: #e9f1ff;
}

.education-industry-icon.purple {
  background: #f0eaff;
}

.education-industry-icon.green {
  background: #e8f8ee;
}

.education-industry-card h3 {
  margin-bottom: 13px;

  color: var(--education-navy);

  font-size: 23px;
}

.education-industry-card p {
  margin-bottom: 28px;

  color: var(--education-text-soft);

  font-size: 14px;
  line-height: 1.75;
}

.education-industry-link {
  margin-top: auto;

  color: var(--education-blue);

  font-size: 12px;
  font-weight: 800;

  transition: gap 0.2s ease;
}

/* =========================================================
   PRODUCTS
========================================================= */

.education-products {
  background: #fff;
}

.education-products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  align-items: center;

  gap: 100px;
}

.education-products-content {
  max-width: 590px;
}

.education-products-content h2 {
  margin-bottom: 22px;

  color: var(--education-navy);

  font-size: clamp(35px, 4vw, 53px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.06;
}

.education-products-content h2 span {
  display: block;

  color: var(--education-blue);
}

.education-products-content p {
  margin-bottom: 18px;

  color: var(--education-text-soft);

  font-size: 15px;
  line-height: 1.85;
}

.education-products-content .btn {
  margin-top: 15px;
}

.education-product-stack {
  padding: 25px;

  border: 1px solid var(--education-border);
  border-radius: var(--education-radius-lg);

  background: linear-gradient(145deg, #f7faff, #ffffff);

  box-shadow: var(--education-shadow);
}

.education-product-card {
  display: grid;
  grid-template-columns: auto 1fr auto;

  align-items: center;

  gap: 15px;

  padding: 22px;

  border-radius: 17px;

  background: var(--education-navy);

  color: #fff;

  box-shadow: 0 18px 35px rgba(8, 26, 51, 0.15);

  transition: transform 0.25s ease;
}

.education-product-card:hover {
  transform: translateY(-3px);
}

.education-product-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.12);

  font-size: 23px;
}

.education-product-card small {
  display: block;

  margin-bottom: 4px;

  color: rgba(255, 255, 255, 0.48);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.education-product-card strong {
  display: block;

  margin-bottom: 3px;

  font-family: "Manrope", sans-serif;
  font-size: 16px;
}

.education-product-card span {
  display: block;

  color: rgba(255, 255, 255, 0.63);

  font-size: 10px;
}

.education-product-card > span:last-child {
  color: #fff;

  font-size: 22px;
}

.education-product-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

  margin-top: 10px;
}

.education-product-mini {
  padding: 18px;

  border: 1px solid var(--education-border);
  border-radius: 14px;

  background: #fff;
}

.education-product-mini > span {
  display: block;

  margin-bottom: 9px;

  font-size: 19px;
}

.education-product-mini strong {
  display: block;

  margin-bottom: 4px;

  color: var(--education-navy);

  font-family: "Manrope", sans-serif;
  font-size: 12px;
}

.education-product-mini small {
  display: block;

  color: var(--education-muted);

  font-size: 9px;
  line-height: 1.5;
}

/* =========================================================
   BENEFITS
========================================================= */

.education-benefits {
  background: var(--education-bg);
}

.education-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 15px;
}

.education-benefit-card {
  min-height: 250px;

  padding: 28px;

  border: 1px solid var(--education-border);
  border-radius: 20px;

  background: #fff;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.education-benefit-card:hover {
  transform: translateY(-5px);

  box-shadow: var(--education-shadow);
}

.education-benefit-card > span {
  display: block;

  margin-bottom: 55px;

  color: #c5d1df;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.education-benefit-card h3 {
  margin-bottom: 12px;

  color: var(--education-navy);

  font-size: 20px;
}

.education-benefit-card p {
  margin: 0;

  color: var(--education-text-soft);

  font-size: 13px;
  line-height: 1.75;
}

/* =========================================================
   WORKFLOW
========================================================= */

.education-workflow {
  padding: 115px 0;

  background: linear-gradient(135deg, var(--education-navy), #0d2c50);

  color: #fff;
}

.education-workflow-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;

  gap: 100px;

  align-items: start;
}

.education-workflow-content .eyebrow {
  color: #7db1ff;
}

.education-workflow-content h2 {
  max-width: 570px;

  margin-bottom: 22px;

  color: #fff;

  font-size: clamp(35px, 4vw, 53px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.06;
}

.education-workflow-content h2 span {
  display: block;

  color: #6ea8ff;
}

.education-workflow-content > p {
  max-width: 540px;

  color: rgba(255, 255, 255, 0.63);

  font-size: 15px;
  line-height: 1.85;
}

.education-workflow-steps {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.education-workflow-step {
  display: grid;
  grid-template-columns: 55px 1fr;

  gap: 18px;

  padding: 25px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.education-workflow-step > span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;

  color: #7db1ff;

  font-family: "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 800;
}

.education-workflow-step h3 {
  margin-bottom: 7px;

  color: #fff;

  font-size: 18px;
}

.education-workflow-step p {
  margin: 0;

  color: rgba(255, 255, 255, 0.55);

  font-size: 12px;
  line-height: 1.7;
}

/* =========================================================
   FINAL CTA
========================================================= */

.education-cta {
  position: relative;

  padding: 125px 0;

  background:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.32), transparent 35%),
    var(--education-navy);

  color: #fff;

  text-align: center;

  overflow: hidden;
}

.education-cta-grid {
  opacity: 0.7;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);

  mask-image: linear-gradient(to bottom, black, transparent);
}

.education-cta-content {
  position: relative;
  z-index: 2;

  max-width: 820px;

  margin: 0 auto;
}

.education-cta-mark {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;

  margin: 0 auto 25px;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 17px;

  background: rgba(255, 255, 255, 0.08);

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 21px;
  font-weight: 800;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.education-cta-content .eyebrow {
  color: #7db1ff;
}

.education-cta-content h2 {
  margin-bottom: 22px;

  color: #fff;

  font-size: clamp(38px, 5vw, 62px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.04;
}

.education-cta-content h2 span {
  display: block;

  color: #6ea8ff;
}

.education-cta-content > p {
  max-width: 680px;

  margin: 0 auto 35px;

  color: rgba(255, 255, 255, 0.62);

  font-size: 15px;
  line-height: 1.85;
}

.education-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 25px;
}

.education-cta-link {
  color: #fff;

  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;

  transition: color 0.25s ease;
}

.education-cta-link:hover {
  color: #7db1ff;
}

/* =========================================================
   REVEAL ANIMATION
========================================================= */

.education-solution-page main .reveal {
  opacity: 0;

  transform: translateY(25px);

  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.education-solution-page main .reveal.revealed {
  opacity: 1;

  transform: translateY(0);
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

.education-solution-page main a:focus-visible,
.education-solution-page main button:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .education-solution-page main *,
  .education-solution-page main *::before,
  .education-solution-page main *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .education-solution-page main .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .education-solution-page main .section {
    padding: 90px 0;
  }

  .education-hero {
    min-height: auto;

    padding: 90px 0;
  }

  .education-hero-container {
    grid-template-columns: 1fr;

    gap: 60px;
  }

  .education-hero-content {
    max-width: 800px;
  }

  .education-hero-content h1 {
    max-width: 800px;
  }

  .education-hero-visual {
    max-width: 760px;

    width: 100%;

    margin: 0 auto;
  }

  .education-dashboard {
    max-width: 100%;
  }

  .education-intro-grid {
    gap: 50px;
  }

  .education-ecosystem-grid,
  .education-products-grid,
  .education-workflow-grid {
    gap: 60px;
  }

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

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

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .education-solution-page main .container {
    width: min(calc(100% - 32px), var(--education-container));
  }

  .education-solution-page main .section {
    padding: 75px 0;
  }

  /* HERO */

  .education-hero {
    padding: 70px 0 65px;
  }

  .education-hero-container {
    gap: 45px;
  }

  .education-solution-label {
    margin-bottom: 20px;

    font-size: 10px;
  }

  .education-solution-mark {
    width: 29px;
    height: 29px;

    font-size: 12px;
  }

  .education-solution-page main .eyebrow {
    margin-bottom: 14px;

    font-size: 9px;
    letter-spacing: 0.12em;
  }

  .education-solution-page main .eyebrow::before {
    width: 20px;
  }

  .education-hero-content h1 {
    margin-bottom: 20px;

    font-size: clamp(39px, 12vw, 58px);

    line-height: 1;
  }

  .education-hero-content > p {
    margin-bottom: 27px;

    font-size: 14px;
    line-height: 1.75;
  }

  .education-hero-actions {
    flex-direction: column;
    align-items: stretch;

    margin-bottom: 32px;
  }

  .education-hero-actions .btn {
    width: 100%;
  }

  .education-hero-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .education-hero-meta > div {
    padding: 0 10px;
  }

  .education-hero-meta > div:first-child {
    padding-left: 0;
  }

  .education-hero-meta strong {
    font-size: 11px;
  }

  .education-hero-meta span {
    font-size: 9px;
  }

  /* DASHBOARD */

  .education-visual-glow {
    width: 300px;
    height: 300px;
  }

  .education-dashboard {
    border-radius: 18px;

    transform: none;
  }

  .education-dashboard-header {
    padding: 13px 15px;
  }

  .education-dashboard-logo {
    width: 32px;
    height: 32px;
  }

  .education-dashboard-brand small {
    font-size: 6px;
  }

  .education-dashboard-brand strong {
    font-size: 9px;
  }

  .education-dashboard-status {
    font-size: 6px;
  }

  .education-dashboard-body {
    padding: 15px;
  }

  .education-dashboard-welcome {
    margin-bottom: 15px;
  }

  .education-dashboard-welcome h3 {
    font-size: 14px;
  }

  .education-dashboard-stats {
    grid-template-columns: 1fr;

    gap: 7px;
  }

  .education-mini-stat {
    padding: 10px;
  }

  .education-dashboard-panels {
    grid-template-columns: 1fr;
  }

  .education-notification-panel {
    display: none;
  }

  .education-dashboard-footer {
    padding: 9px 13px;

    font-size: 5px;
  }

  /* SECTION HEADINGS */

  .education-solution-page main .section-heading {
    margin-bottom: 35px;
  }

  .education-solution-page main .section-heading h2,
  .education-intro-heading h2,
  .education-ecosystem-content h2,
  .education-products-content h2 {
    font-size: 34px;
    line-height: 1.08;
  }

  .education-solution-page main .section-heading p {
    font-size: 13px;
    line-height: 1.75;
  }

  /* INTRO */

  .education-intro-grid {
    grid-template-columns: 1fr;

    gap: 15px;
  }

  .education-intro-content {
    padding-top: 0;
  }

  .education-intro-content p {
    font-size: 14px;
    line-height: 1.8;
  }

  /* SOLUTIONS */

  .education-solution-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .education-solution-card {
    min-height: 280px;

    padding: 25px;
  }

  .education-solution-icon {
    margin-bottom: 22px;
  }

  .education-solution-card h3 {
    font-size: 19px;
  }

  .education-solution-card p {
    font-size: 13px;
  }

  /* ECOSYSTEM */

  .education-ecosystem-grid {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .education-ecosystem-visual {
    min-height: 390px;
  }

  .education-orbit-one {
    width: 235px;
    height: 235px;
  }

  .education-orbit-two {
    width: 340px;
    height: 340px;
  }

  .education-ecosystem-center {
    width: 120px;
    height: 120px;
  }

  .education-ecosystem-center span {
    width: 31px;
    height: 31px;

    font-size: 14px;
  }

  .education-ecosystem-center strong {
    font-size: 13px;
  }

  .education-ecosystem-center small {
    font-size: 7px;
  }

  .education-ecosystem-node {
    width: 78px;
    height: 78px;

    border-radius: 14px;
  }

  .education-ecosystem-node span {
    margin-bottom: 3px;

    font-size: 18px;
  }

  .education-ecosystem-node strong {
    font-size: 8px;
  }

  .education-node-student {
    top: 0;
  }

  .education-node-admin {
    bottom: 0;
  }

  .education-node-teacher {
    right: 0;
  }

  .education-node-parent {
    left: 0;
  }

  .education-ecosystem-content > p {
    font-size: 14px;
  }

  /* INDUSTRIES */

  .education-industry-grid {
    grid-template-columns: 1fr;
  }

  .education-industry-card {
    min-height: 300px;
  }

  /* PRODUCTS */

  .education-products-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }

  .education-products-content p {
    font-size: 14px;
  }

  .education-product-stack {
    padding: 15px;
  }

  .education-product-card {
    grid-template-columns: auto 1fr auto;

    padding: 16px;

    gap: 10px;
  }

  .education-product-icon {
    width: 43px;
    height: 43px;

    font-size: 19px;
  }

  .education-product-card strong {
    font-size: 13px;
  }

  .education-product-card span {
    font-size: 8px;
  }

  .education-product-mini-grid {
    gap: 7px;
  }

  .education-product-mini {
    padding: 14px;
  }

  .education-product-mini strong {
    font-size: 10px;
  }

  .education-product-mini small {
    font-size: 8px;
  }

  /* BENEFITS */

  .education-benefits-grid {
    grid-template-columns: 1fr;

    gap: 10px;
  }

  .education-benefit-card {
    min-height: auto;

    padding: 24px;
  }

  .education-benefit-card > span {
    margin-bottom: 30px;
  }

  /* WORKFLOW */

  .education-workflow {
    padding: 75px 0;
  }

  .education-workflow-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }

  .education-workflow-content h2 {
    font-size: 34px;
  }

  .education-workflow-content > p {
    font-size: 14px;
  }

  .education-workflow-step {
    grid-template-columns: 45px 1fr;

    gap: 12px;

    padding: 20px 0;
  }

  .education-workflow-step > span {
    width: 36px;
    height: 36px;
  }

  .education-workflow-step h3 {
    font-size: 16px;
  }

  .education-workflow-step p {
    font-size: 11px;
  }

  /* CTA */

  .education-cta {
    padding: 80px 0;
  }

  .education-cta-content h2 {
    font-size: 38px;
  }

  .education-cta-content > p {
    font-size: 13px;
    line-height: 1.8;
  }

  .education-cta-actions {
    flex-direction: column;

    gap: 18px;
  }

  .education-cta-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .education-solution-page main .container {
    width: calc(100% - 28px);
  }

  .education-hero-content h1 {
    font-size: 38px;
  }

  .education-hero-meta {
    gap: 0;
  }

  .education-hero-meta > div {
    padding: 0 7px;
  }

  .education-hero-meta strong {
    font-size: 10px;
  }

  .education-hero-meta span {
    font-size: 8px;
  }

  .education-dashboard-welcome h3 {
    font-size: 12px;
  }

  .education-date-box {
    width: 43px;
    height: 48px;
  }

  .education-date-box strong {
    font-size: 16px;
  }

  .education-ecosystem-visual {
    min-height: 330px;
  }

  .education-orbit-one {
    width: 195px;
    height: 195px;
  }

  .education-orbit-two {
    width: 285px;
    height: 285px;
  }

  .education-ecosystem-center {
    width: 105px;
    height: 105px;
  }

  .education-ecosystem-node {
    width: 65px;
    height: 65px;
  }

  .education-ecosystem-node span {
    font-size: 15px;
  }

  .education-ecosystem-node strong {
    font-size: 7px;
  }

  .education-cta-content h2 {
    font-size: 34px;
  }
}

/* Human Resource Soution Page */
/* =========================================================
   KAMAL FOR HUMAN RESOURCES
   MAIN SECTION CSS ONLY
========================================================= */

/* =========================================================
   GLOBAL HR VARIABLES
========================================================= */

:root {
  --hr-navy: #081a33;
  --hr-navy-2: #0b2344;
  --hr-blue: #1769ff;
  --hr-blue-light: #eaf2ff;
  --hr-purple: #7657e8;
  --hr-purple-light: #f0edff;
  --hr-green: #16a673;
  --hr-green-light: #e9f8f2;
  --hr-orange: #e68a2e;
  --hr-orange-light: #fff3e5;
  --hr-cyan: #159bc0;
  --hr-cyan-light: #e8f8fc;

  --hr-text: #10233f;
  --hr-text-soft: #5e6c7e;
  --hr-text-light: #8793a3;

  --hr-bg: #f7f9fc;
  --hr-white: #ffffff;
  --hr-border: #e6ebf2;

  --hr-shadow-sm: 0 8px 25px rgba(8, 26, 51, 0.06);

  --hr-shadow: 0 20px 60px rgba(8, 26, 51, 0.1);

  --hr-shadow-lg: 0 30px 90px rgba(8, 26, 51, 0.16);

  --hr-radius-sm: 12px;
  --hr-radius: 20px;
  --hr-radius-lg: 30px;

  --hr-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   BASIC MAIN RESET
========================================================= */

.hr-solution-page main {
  position: relative;
  overflow: hidden;
  background: var(--hr-white);
  color: var(--hr-text);
}

.hr-solution-page main section {
  position: relative;
}

.hr-solution-page .container {
  position: relative;
  z-index: 2;
}

.hr-solution-page .section {
  padding: 120px 0;
}

.hr-solution-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 18px;

  color: var(--hr-blue);

  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.16em;
  line-height: 1.4;

  text-transform: uppercase;
}

.hr-solution-page .eyebrow::before {
  content: "";

  width: 25px;
  height: 2px;

  border-radius: 999px;

  background: currentColor;
}

.hr-solution-page h1,
.hr-solution-page h2,
.hr-solution-page h3 {
  font-family: "Manrope", sans-serif;
}

.hr-solution-page p {
  color: var(--hr-text-soft);
}

/* =========================================================
   REVEAL ANIMATION
========================================================= */

.hr-solution-page .reveal {
  opacity: 0;
  transform: translateY(30px);

  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.hr-solution-page .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.hr-solution-page .hr-solution-card:nth-child(2),
.hr-solution-page .hr-benefit-card:nth-child(2),
.hr-solution-page .hr-industry-card:nth-child(2) {
  transition-delay: 0.08s;
}

.hr-solution-page .hr-solution-card:nth-child(3),
.hr-solution-page .hr-benefit-card:nth-child(3),
.hr-solution-page .hr-industry-card:nth-child(3) {
  transition-delay: 0.16s;
}

.hr-solution-page .hr-solution-card:nth-child(4),
.hr-solution-page .hr-benefit-card:nth-child(4) {
  transition-delay: 0.24s;
}

/* =========================================================
   HERO
========================================================= */

.hr-hero {
  position: relative;

  min-height: 760px;

  display: flex;
  align-items: center;

  padding: 145px 0 110px;

  background:
    radial-gradient(
      circle at 78% 45%,
      rgba(31, 105, 255, 0.13),
      transparent 34%
    ),
    radial-gradient(
      circle at 15% 80%,
      rgba(118, 87, 232, 0.08),
      transparent 30%
    ),
    linear-gradient(135deg, #f8fbff 0%, #f4f7fc 55%, #edf3fc 100%);

  overflow: hidden;
}

.hr-hero-grid {
  position: absolute;
  inset: 0;

  opacity: 0.45;

  background-image:
    linear-gradient(rgba(8, 26, 51, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 26, 51, 0.035) 1px, transparent 1px);

  background-size: 55px 55px;

  mask-image: linear-gradient(to bottom, black, transparent 90%);

  pointer-events: none;
}

.hr-hero-grid::after {
  content: "";

  position: absolute;

  width: 600px;
  height: 600px;

  right: -220px;
  top: -180px;

  border-radius: 50%;

  border: 1px solid rgba(23, 105, 255, 0.1);
  box-shadow:
    0 0 0 70px rgba(23, 105, 255, 0.025),
    0 0 0 140px rgba(23, 105, 255, 0.018);
}

.hr-hero-container {
  display: grid;

  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(520px, 1.08fr);

  align-items: center;

  gap: 75px;
}

/* =========================================================
   HERO CONTENT
========================================================= */

.hr-hero-content {
  position: relative;
  z-index: 3;
}

.hr-solution-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;

  margin-bottom: 25px;

  color: var(--hr-navy);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hr-solution-mark {
  width: 34px;
  height: 34px;

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

  border-radius: 10px;

  background: var(--hr-navy);
  color: #ffffff;

  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 800;

  box-shadow: 0 8px 20px rgba(8, 26, 51, 0.16);
}

.hr-hero-content h1 {
  max-width: 760px;

  margin: 0 0 25px;

  color: var(--hr-navy);

  font-size: clamp(48px, 5vw, 76px);
  font-weight: 800;

  line-height: 1.02;
  letter-spacing: -0.045em;
}

.hr-hero-content h1 span {
  display: block;

  color: var(--hr-blue);
}

.hr-hero-content > p {
  max-width: 680px;

  margin: 0 0 35px;

  font-size: 17px;
  line-height: 1.8;
}

.hr-hero-actions {
  display: flex;
  align-items: center;
  gap: 13px;

  margin-bottom: 42px;
}

.hr-hero-actions .btn {
  min-height: 54px;
}

.hr-hero-meta {
  display: flex;
  align-items: center;
  gap: 0;
}

.hr-hero-meta > div {
  min-width: 135px;

  padding: 0 25px;

  border-right: 1px solid var(--hr-border);
}

.hr-hero-meta > div:first-child {
  padding-left: 0;
}

.hr-hero-meta > div:last-child {
  border-right: 0;
}

.hr-hero-meta strong {
  display: block;

  margin-bottom: 4px;

  color: var(--hr-navy);

  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 800;
}

.hr-hero-meta span {
  color: var(--hr-text-light);

  font-size: 12px;
  font-weight: 600;
}

/* =========================================================
   HERO DASHBOARD VISUAL
========================================================= */

.hr-hero-visual {
  position: relative;

  min-height: 580px;

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

.hr-visual-glow {
  position: absolute;

  width: 500px;
  height: 500px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(23, 105, 255, 0.16),
    rgba(118, 87, 232, 0.06) 45%,
    transparent 70%
  );

  filter: blur(5px);
}

.hr-dashboard {
  position: relative;

  width: min(100%, 620px);

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;

  background: rgba(255, 255, 255, 0.94);

  box-shadow:
    0 35px 90px rgba(8, 26, 51, 0.15),
    0 8px 25px rgba(8, 26, 51, 0.06);

  transform: perspective(1300px) rotateY(-4deg) rotateX(2deg);

  transition: transform 0.5s ease;
}

.hr-dashboard:hover {
  transform: perspective(1300px) rotateY(0deg) rotateX(0deg) translateY(-6px);
}

.hr-dashboard-header {
  min-height: 76px;

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

  padding: 15px 20px;

  background: var(--hr-navy);

  color: #ffffff;
}

.hr-dashboard-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.hr-dashboard-logo {
  width: 39px;
  height: 39px;

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

  border-radius: 11px;

  background: linear-gradient(135deg, #2c83ff, #7358eb);

  color: #ffffff;

  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.hr-dashboard-brand small {
  display: block;

  margin-bottom: 3px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.12em;
}

.hr-dashboard-brand strong {
  display: block;

  color: #ffffff;

  font-size: 11px;
  font-weight: 700;
}

.hr-dashboard-status {
  color: #63e6b2;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.08em;
  white-space: nowrap;
}

.hr-dashboard-body {
  padding: 25px;
}

.hr-dashboard-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 24px;
}

.hr-dashboard-welcome small {
  display: block;

  margin-bottom: 6px;

  color: var(--hr-text-light);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.12em;
}

.hr-dashboard-welcome h3 {
  margin: 0;

  color: var(--hr-navy);

  font-size: 20px;
  font-weight: 800;
}

.hr-dashboard-welcome h3 span {
  color: var(--hr-blue);
}

.hr-date-box {
  width: 48px;

  padding: 7px 4px;

  text-align: center;

  border: 1px solid var(--hr-border);
  border-radius: 10px;

  background: #f8faff;
}

.hr-date-box span {
  display: block;

  color: var(--hr-text-light);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.08em;
}

.hr-date-box strong {
  display: block;

  margin-top: 2px;

  color: var(--hr-navy);

  font-family: "Manrope", sans-serif;
  font-size: 17px;
}

/* =========================================================
   DASHBOARD STATS
========================================================= */

.hr-dashboard-stats {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

  margin-bottom: 14px;
}

.hr-mini-stat {
  display: flex;
  align-items: center;
  gap: 9px;

  min-height: 68px;

  padding: 10px;

  border: 1px solid var(--hr-border);
  border-radius: 13px;

  background: #ffffff;
}

.hr-mini-icon {
  width: 32px;
  height: 32px;

  flex: 0 0 auto;

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

  border-radius: 9px;

  font-size: 14px;
}

.hr-mini-icon.blue {
  background: var(--hr-blue-light);
}

.hr-mini-icon.purple {
  background: var(--hr-purple-light);
}

.hr-mini-icon.green {
  background: var(--hr-green-light);
}

.hr-mini-stat strong {
  display: block;

  margin-bottom: 3px;

  color: var(--hr-navy);

  font-size: 10px;
  font-weight: 800;
}

.hr-mini-stat small {
  display: block;

  color: var(--hr-text-light);

  font-size: 7px;
  line-height: 1.3;
}

/* =========================================================
   DASHBOARD PANELS
========================================================= */

.hr-dashboard-panels {
  display: grid;

  grid-template-columns: 1.35fr 0.65fr;

  gap: 12px;
}

.hr-dashboard-panel,
.hr-notification-panel {
  border: 1px solid var(--hr-border);
  border-radius: 14px;

  background: #ffffff;
}

.hr-dashboard-panel {
  padding: 15px;
}

.hr-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 17px;
}

.hr-panel-heading strong {
  color: var(--hr-navy);

  font-size: 10px;
  font-weight: 800;
}

.hr-panel-heading span {
  color: var(--hr-blue);

  font-size: 8px;
  font-weight: 700;
}

.hr-progress-row {
  margin-bottom: 13px;
}

.hr-progress-row:last-child {
  margin-bottom: 0;
}

.hr-progress-row > div:first-child {
  display: flex;
  justify-content: space-between;

  margin-bottom: 6px;
}

.hr-progress-row span {
  color: var(--hr-text-soft);

  font-size: 8px;
  font-weight: 600;
}

.hr-progress-row strong {
  color: var(--hr-navy);

  font-size: 7px;
  font-weight: 800;
}

.hr-progress {
  width: 100%;
  height: 5px;

  overflow: hidden;

  border-radius: 99px;

  background: #edf1f6;
}

.hr-progress > span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background: linear-gradient(90deg, var(--hr-blue), var(--hr-purple));
}

.hr-notification-panel {
  min-height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 16px;

  background: linear-gradient(145deg, #f4f8ff, #f9f7ff);
}

.hr-notification-icon {
  width: 35px;
  height: 35px;

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

  margin-bottom: 12px;

  border-radius: 10px;

  background: var(--hr-purple-light);

  color: var(--hr-purple);

  font-size: 14px;
}

.hr-notification-panel strong {
  display: block;

  margin-bottom: 7px;

  color: var(--hr-navy);

  font-size: 10px;
  font-weight: 800;
}

.hr-notification-panel small {
  display: block;

  color: var(--hr-text-soft);

  font-size: 8px;
  line-height: 1.55;
}

.hr-dashboard-footer {
  display: flex;
  justify-content: space-between;

  padding: 11px 20px;

  border-top: 1px solid var(--hr-border);

  background: #fafbfd;

  color: var(--hr-text-light);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.12em;
}

/* =========================================================
   INTRO
========================================================= */

.hr-intro {
  background: #ffffff;
}

.hr-intro-grid {
  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  gap: 100px;

  align-items: start;
}

.hr-intro-heading h2 {
  max-width: 580px;

  margin: 0;

  color: var(--hr-navy);

  font-size: clamp(38px, 4vw, 58px);
  font-weight: 800;

  line-height: 1.08;
  letter-spacing: -0.04em;
}

.hr-intro-heading h2 span {
  display: block;

  color: var(--hr-blue);
}

.hr-intro-content {
  padding-top: 34px;
}

.hr-intro-content p {
  max-width: 700px;

  margin: 0 0 20px;

  font-size: 16px;
  line-height: 1.85;
}

.hr-intro-content p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   SECTION HEADING
========================================================= */

.hr-solutions .section-heading,
.hr-industries .section-heading,
.hr-benefits .section-heading {
  max-width: 760px;

  margin: 0 auto 60px;

  text-align: center;
}

.hr-solutions .section-heading .eyebrow,
.hr-industries .section-heading .eyebrow,
.hr-benefits .section-heading .eyebrow {
  justify-content: center;
}

.hr-solutions .section-heading h2,
.hr-industries .section-heading h2,
.hr-benefits .section-heading h2 {
  margin: 0 0 18px;

  color: var(--hr-navy);

  font-size: clamp(38px, 4vw, 55px);
  font-weight: 800;

  line-height: 1.08;
  letter-spacing: -0.04em;
}

.hr-solutions .section-heading h2 span,
.hr-industries .section-heading h2 span,
.hr-benefits .section-heading h2 span {
  color: var(--hr-blue);
}

.hr-solutions .section-heading p,
.hr-industries .section-heading p,
.hr-benefits .section-heading p {
  max-width: 680px;

  margin: 0 auto;

  font-size: 15px;
  line-height: 1.8;
}

/* =========================================================
   HR SOLUTIONS
========================================================= */

.hr-solutions {
  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
}

.hr-solution-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;
}

.hr-solution-card {
  position: relative;

  min-height: 330px;

  display: flex;
  flex-direction: column;

  padding: 30px;

  overflow: hidden;

  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius);

  background: #ffffff;

  box-shadow: var(--hr-shadow-sm);

  transition:
    transform var(--hr-transition),
    box-shadow var(--hr-transition),
    border-color var(--hr-transition);
}

.hr-solution-card::before {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  right: -90px;
  bottom: -100px;

  border-radius: 50%;

  background: rgba(23, 105, 255, 0.04);

  transition: transform 0.5s ease;
}

.hr-solution-card:hover {
  transform: translateY(-8px);

  border-color: rgba(23, 105, 255, 0.18);

  box-shadow: var(--hr-shadow);
}

.hr-solution-card:hover::before {
  transform: scale(1.7);
}

.hr-solution-number {
  display: block;

  margin-bottom: 25px;

  color: var(--hr-text-light);

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.08em;
}

.hr-solution-icon {
  width: 52px;
  height: 52px;

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

  margin-bottom: 24px;

  border-radius: 15px;

  font-size: 22px;
}

.hr-solution-icon.blue {
  background: var(--hr-blue-light);
}

.hr-solution-icon.purple {
  background: var(--hr-purple-light);
}

.hr-solution-icon.green {
  background: var(--hr-green-light);
}

.hr-solution-icon.orange {
  background: var(--hr-orange-light);
}

.hr-solution-icon.cyan {
  background: var(--hr-cyan-light);
}

.hr-solution-icon.dark {
  background: #edf0f4;
}

.hr-solution-card h3 {
  margin: 0 0 12px;

  color: var(--hr-navy);

  font-size: 20px;
  font-weight: 800;
}

.hr-solution-card p {
  margin: 0;

  font-size: 13px;
  line-height: 1.75;
}

.hr-solution-line {
  width: 45px;
  height: 3px;

  margin-top: auto;
  padding-top: 20px;

  border-radius: 999px;

  background: var(--hr-blue);
}

/* =========================================================
   ECOSYSTEM
========================================================= */

.hr-ecosystem {
  background: var(--hr-navy);
  color: #ffffff;
}

.hr-ecosystem::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 20% 50%,
      rgba(23, 105, 255, 0.16),
      transparent 35%
    ),
    radial-gradient(
      circle at 90% 20%,
      rgba(118, 87, 232, 0.15),
      transparent 30%
    );
}

.hr-ecosystem-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: center;

  gap: 100px;
}

/* =========================================================
   ECOSYSTEM VISUAL
========================================================= */

.hr-ecosystem-visual {
  position: relative;

  width: min(100%, 560px);
  aspect-ratio: 1 / 1;

  margin: 0 auto;
}

.hr-ecosystem-orbit {
  position: absolute;

  top: 50%;
  left: 50%;

  border: 1px solid rgba(255, 255, 255, 0.11);

  border-radius: 50%;

  transform: translate(-50%, -50%);
}

.hr-orbit-one {
  width: 66%;
  height: 66%;
}

.hr-orbit-two {
  width: 90%;
  height: 90%;

  border-style: dashed;

  animation: hrOrbit 22s linear infinite;
}

@keyframes hrOrbit {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.hr-ecosystem-center {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 155px;
  height: 155px;

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

  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;

  background: radial-gradient(
    circle at 30% 20%,
    rgba(23, 105, 255, 0.8),
    rgba(10, 38, 73, 0.98)
  );

  box-shadow: 0 0 70px rgba(23, 105, 255, 0.24);

  transform: translate(-50%, -50%);
}

.hr-ecosystem-center span {
  margin-bottom: 3px;

  color: #ffffff;

  font-family: "Manrope", sans-serif;
  font-size: 27px;
  font-weight: 800;
}

.hr-ecosystem-center strong {
  color: #ffffff;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 0.13em;
}

.hr-ecosystem-center small {
  margin-top: 4px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 9px;
}

.hr-ecosystem-node {
  position: absolute;

  min-width: 120px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;

  padding: 12px 15px;

  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 14px;

  background: rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(12px);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.14);
}

.hr-ecosystem-node span {
  font-size: 19px;
}

.hr-ecosystem-node strong {
  color: #ffffff;

  font-size: 10px;
  font-weight: 800;
}

.hr-node-employee {
  top: 5%;
  left: 50%;

  transform: translateX(-50%);
}

.hr-node-hr {
  top: 50%;
  right: 0;

  transform: translateY(-50%);
}

.hr-node-manager {
  bottom: 5%;
  left: 50%;

  transform: translateX(-50%);
}

.hr-node-payroll {
  top: 50%;
  left: 0;

  transform: translateY(-50%);
}

/* =========================================================
   ECOSYSTEM CONTENT
========================================================= */

.hr-ecosystem-content .eyebrow {
  color: #6ca2ff;
}

.hr-ecosystem-content h2 {
  max-width: 600px;

  margin: 0 0 22px;

  color: #ffffff;

  font-size: clamp(38px, 4vw, 54px);
  font-weight: 800;

  line-height: 1.08;
  letter-spacing: -0.04em;
}

.hr-ecosystem-content h2 span {
  display: block;

  color: #6da3ff;
}

.hr-ecosystem-content > p {
  max-width: 620px;

  margin: 0 0 35px;

  color: rgba(255, 255, 255, 0.67);

  font-size: 15px;
  line-height: 1.8;
}

.hr-ecosystem-list {
  display: grid;

  gap: 0;
}

.hr-ecosystem-item {
  display: grid;

  grid-template-columns: 38px 1fr;

  gap: 15px;

  padding: 18px 0;

  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hr-ecosystem-item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hr-ecosystem-item > span {
  color: #639bff;

  font-size: 10px;
  font-weight: 800;
}

.hr-ecosystem-item h3 {
  margin: 0 0 5px;

  color: #ffffff;

  font-size: 14px;
  font-weight: 800;
}

.hr-ecosystem-item p {
  margin: 0;

  color: rgba(255, 255, 255, 0.52);

  font-size: 12px;
  line-height: 1.6;
}

/* =========================================================
   INDUSTRIES
========================================================= */

.hr-industries {
  background: #f8fafc;
}

.hr-industry-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;
}

.hr-industry-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 320px;

  padding: 30px;

  overflow: hidden;

  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius);

  background: #ffffff;

  text-decoration: none;

  box-shadow: var(--hr-shadow-sm);

  transition:
    transform var(--hr-transition),
    box-shadow var(--hr-transition);
}

.hr-industry-card:hover {
  transform: translateY(-8px);

  box-shadow: var(--hr-shadow);
}

.hr-industry-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  margin-bottom: 38px;
}

.hr-industry-top > span {
  color: var(--hr-text-light);

  font-size: 10px;
  font-weight: 800;
}

.hr-industry-icon {
  width: 52px;
  height: 52px;

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

  border-radius: 15px;

  font-size: 22px;
}

.hr-industry-icon.blue {
  background: var(--hr-blue-light);
}

.hr-industry-icon.purple {
  background: var(--hr-purple-light);
}

.hr-industry-icon.green {
  background: var(--hr-green-light);
}

.hr-industry-card h3 {
  margin: 0 0 12px;

  color: var(--hr-navy);

  font-size: 21px;
  font-weight: 800;
}

.hr-industry-card p {
  margin: 0;

  font-size: 13px;
  line-height: 1.75;
}

.hr-industry-link {
  margin-top: auto;
  padding-top: 28px;

  color: var(--hr-blue);

  font-size: 11px;
  font-weight: 800;
}

/* =========================================================
   PRODUCT CONNECTION
========================================================= */

.hr-products {
  background: #ffffff;
}

.hr-products-grid {
  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  gap: 90px;

  align-items: center;
}

.hr-products-content h2 {
  max-width: 600px;

  margin: 0 0 23px;

  color: var(--hr-navy);

  font-size: clamp(38px, 4vw, 54px);
  font-weight: 800;

  line-height: 1.08;
  letter-spacing: -0.04em;
}

.hr-products-content h2 span {
  display: block;

  color: var(--hr-blue);
}

.hr-products-content > p {
  max-width: 600px;

  margin: 0 0 18px;

  font-size: 15px;
  line-height: 1.8;
}

.hr-products-content .btn {
  margin-top: 18px;
}

/* =========================================================
   PRODUCT STACK
========================================================= */

.hr-product-stack {
  padding: 12px;
}

.hr-product-card {
  display: flex;
  align-items: center;
  gap: 18px;

  padding: 25px;

  border-radius: 22px;

  background: linear-gradient(135deg, var(--hr-navy), #102e57);

  color: #ffffff;

  text-decoration: none;

  box-shadow: 0 25px 55px rgba(8, 26, 51, 0.18);

  transition:
    transform var(--hr-transition),
    box-shadow var(--hr-transition);
}

.hr-product-card:hover {
  transform: translateY(-5px);

  box-shadow: 0 32px 70px rgba(8, 26, 51, 0.23);
}

.hr-product-icon {
  width: 58px;
  height: 58px;

  flex: 0 0 auto;

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

  border-radius: 16px;

  font-size: 23px;
}

.hr-product-icon.purple {
  background: rgba(118, 87, 232, 0.22);
}

.hr-product-card > div:nth-child(2) {
  flex: 1;
}

.hr-product-card small {
  display: block;

  margin-bottom: 5px;

  color: rgba(255, 255, 255, 0.48);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.13em;
}

.hr-product-card strong {
  display: block;

  margin-bottom: 4px;

  color: #ffffff;

  font-size: 19px;
  font-weight: 800;
}

.hr-product-card div span {
  display: block;

  color: rgba(255, 255, 255, 0.6);

  font-size: 11px;
}

.hr-product-card > span:last-child {
  color: #6ca2ff;

  font-size: 20px;
}

.hr-product-mini-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 12px;

  margin-top: 12px;
}

.hr-product-mini {
  min-height: 130px;

  padding: 20px;

  border: 1px solid var(--hr-border);
  border-radius: 17px;

  background: #ffffff;

  box-shadow: var(--hr-shadow-sm);

  transition:
    transform var(--hr-transition),
    box-shadow var(--hr-transition);
}

.hr-product-mini:hover {
  transform: translateY(-5px);

  box-shadow: var(--hr-shadow);
}

.hr-product-mini > span {
  display: block;

  margin-bottom: 12px;

  font-size: 18px;
}

.hr-product-mini strong {
  display: block;

  margin-bottom: 5px;

  color: var(--hr-navy);

  font-size: 12px;
  font-weight: 800;
}

.hr-product-mini small {
  display: block;

  color: var(--hr-text-light);

  font-size: 9px;
  line-height: 1.5;
}

/* =========================================================
   BENEFITS
========================================================= */

.hr-benefits {
  background: linear-gradient(180deg, #f7f9fc, #ffffff);
}

.hr-benefits-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 15px;
}

.hr-benefit-card {
  position: relative;

  min-height: 260px;

  padding: 28px;

  border: 1px solid var(--hr-border);
  border-radius: 20px;

  background: #ffffff;

  box-shadow: var(--hr-shadow-sm);

  transition:
    transform var(--hr-transition),
    box-shadow var(--hr-transition);
}

.hr-benefit-card:hover {
  transform: translateY(-7px);

  box-shadow: var(--hr-shadow);
}

.hr-benefit-card > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 35px;
  height: 35px;

  margin-bottom: 35px;

  border-radius: 10px;

  background: var(--hr-blue-light);

  color: var(--hr-blue);

  font-size: 9px;
  font-weight: 800;
}

.hr-benefit-card h3 {
  margin: 0 0 12px;

  color: var(--hr-navy);

  font-size: 20px;
  font-weight: 800;
}

.hr-benefit-card p {
  margin: 0;

  font-size: 12px;
  line-height: 1.75;
}

/* =========================================================
   WORKFLOW
========================================================= */

.hr-workflow {
  padding: 120px 0;

  background: var(--hr-navy);

  color: #ffffff;
}

.hr-workflow-grid {
  display: grid;

  grid-template-columns: 0.85fr 1.15fr;

  gap: 100px;

  align-items: start;
}

.hr-workflow-content {
  position: sticky;
  top: 120px;
}

.hr-workflow-content .eyebrow {
  color: #6ca2ff;
}

.hr-workflow-content h2 {
  max-width: 560px;

  margin: 0 0 22px;

  color: #ffffff;

  font-size: clamp(38px, 4vw, 54px);
  font-weight: 800;

  line-height: 1.08;
  letter-spacing: -0.04em;
}

.hr-workflow-content h2 span {
  display: block;

  color: #6da3ff;
}

.hr-workflow-content p {
  max-width: 530px;

  margin: 0;

  color: rgba(255, 255, 255, 0.62);

  font-size: 15px;
  line-height: 1.8;
}

.hr-workflow-steps {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hr-workflow-step {
  display: grid;

  grid-template-columns: 55px 1fr;

  gap: 20px;

  padding: 28px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  transition: padding-left var(--hr-transition);
}

.hr-workflow-step:hover {
  padding-left: 10px;
}

.hr-workflow-step > span {
  color: #609cff;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.hr-workflow-step h3 {
  margin: 0 0 8px;

  color: #ffffff;

  font-size: 20px;
  font-weight: 800;
}

.hr-workflow-step p {
  max-width: 600px;

  margin: 0;

  color: rgba(255, 255, 255, 0.55);

  font-size: 12px;
  line-height: 1.75;
}

/* =========================================================
   FINAL CTA
========================================================= */

.hr-cta {
  position: relative;

  padding: 125px 0;

  overflow: hidden;

  background: linear-gradient(135deg, #1769ff 0%, #3157d5 50%, #6949cf 100%);

  color: #ffffff;
}

.hr-cta-grid {
  position: absolute;
  inset: 0;

  opacity: 0.14;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);

  background-size: 55px 55px;
}

.hr-cta::before,
.hr-cta::after {
  content: "";

  position: absolute;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.15);
}

.hr-cta::before {
  width: 550px;
  height: 550px;

  right: -230px;
  top: -280px;
}

.hr-cta::after {
  width: 350px;
  height: 350px;

  left: -180px;
  bottom: -220px;
}

.hr-cta-content {
  position: relative;

  max-width: 850px;

  margin: 0 auto;

  text-align: center;
}

.hr-cta-mark {
  width: 58px;
  height: 58px;

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

  margin: 0 auto 25px;

  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 17px;

  background: rgba(255, 255, 255, 0.1);

  color: #ffffff;

  font-family: "Manrope", sans-serif;
  font-size: 21px;
  font-weight: 800;

  backdrop-filter: blur(12px);
}

.hr-cta-content .eyebrow {
  justify-content: center;

  color: rgba(255, 255, 255, 0.72);
}

.hr-cta-content .eyebrow::before {
  background: rgba(255, 255, 255, 0.72);
}

.hr-cta-content h2 {
  margin: 0 0 22px;

  color: #ffffff;

  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;

  line-height: 1.05;
  letter-spacing: -0.045em;
}

.hr-cta-content h2 span {
  display: block;

  color: rgba(255, 255, 255, 0.72);
}

.hr-cta-content > p {
  max-width: 690px;

  margin: 0 auto 35px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 15px;
  line-height: 1.8;
}

.hr-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 22px;
}

.hr-cta-actions .btn-light {
  min-height: 54px;

  color: var(--hr-navy);

  background: #ffffff;

  border-color: #ffffff;
}

.hr-cta-actions .btn-light:hover {
  background: #f2f6ff;

  border-color: #f2f6ff;

  transform: translateY(-2px);
}

.hr-cta-link {
  color: #ffffff;

  font-size: 12px;
  font-weight: 800;

  text-decoration: none;

  transition: opacity 0.25s ease;
}

.hr-cta-link:hover {
  opacity: 0.72;
}

/* =========================================================
   RESPONSIVE — LARGE TABLET
========================================================= */

@media (max-width: 1200px) {
  .hr-hero-container {
    grid-template-columns:
      minmax(0, 0.95fr)
      minmax(450px, 1.05fr);

    gap: 45px;
  }

  .hr-hero-content h1 {
    font-size: 58px;
  }

  .hr-ecosystem-grid,
  .hr-products-grid,
  .hr-workflow-grid {
    gap: 60px;
  }

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

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

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 992px) {
  .hr-solution-page .section {
    padding: 90px 0;
  }

  .hr-hero {
    min-height: auto;

    padding: 125px 0 90px;
  }

  .hr-hero-container {
    grid-template-columns: 1fr;

    gap: 65px;
  }

  .hr-hero-content {
    max-width: 760px;

    margin: 0 auto;

    text-align: center;
  }

  .hr-hero-content .eyebrow {
    justify-content: center;
  }

  .hr-hero-content h1 {
    margin-right: auto;
    margin-left: auto;
  }

  .hr-hero-content > p {
    margin-right: auto;
    margin-left: auto;
  }

  .hr-hero-actions {
    justify-content: center;
  }

  .hr-hero-meta {
    justify-content: center;
  }

  .hr-hero-visual {
    min-height: auto;

    max-width: 680px;

    margin: 0 auto;
  }

  .hr-dashboard {
    transform: none;
  }

  .hr-dashboard:hover {
    transform: translateY(-5px);
  }

  .hr-intro-grid,
  .hr-products-grid,
  .hr-workflow-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }

  .hr-intro-content {
    padding-top: 0;
  }

  .hr-ecosystem-grid {
    grid-template-columns: 1fr;

    gap: 70px;
  }

  .hr-ecosystem-visual {
    max-width: 500px;
  }

  .hr-ecosystem-content {
    max-width: 700px;

    margin: 0 auto;
  }

  .hr-workflow-content {
    position: static;
  }

  .hr-workflow-grid {
    gap: 55px;
  }

  .hr-workflow-content {
    text-align: center;
  }

  .hr-workflow-content h2,
  .hr-workflow-content p {
    margin-right: auto;
    margin-left: auto;
  }

  .hr-products-content {
    max-width: 700px;
  }

  .hr-product-stack {
    max-width: 700px;

    width: 100%;

    margin: 0 auto;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE LARGE
========================================================= */

@media (max-width: 768px) {
  .hr-solution-page .section {
    padding: 75px 0;
  }

  .hr-hero {
    padding: 110px 0 70px;
  }

  .hr-hero-content h1 {
    font-size: clamp(42px, 10vw, 58px);

    line-height: 1.04;
  }

  .hr-hero-content > p {
    font-size: 14px;

    line-height: 1.75;
  }

  .hr-hero-actions {
    flex-direction: column;

    align-items: stretch;

    max-width: 340px;

    margin-right: auto;
    margin-left: auto;
  }

  .hr-hero-actions .btn {
    width: 100%;

    justify-content: center;
  }

  .hr-hero-meta {
    flex-wrap: wrap;
  }

  .hr-hero-meta > div {
    min-width: auto;

    flex: 1;

    padding: 0 14px;
  }

  .hr-dashboard-header {
    padding: 13px 15px;
  }

  .hr-dashboard-body {
    padding: 18px;
  }

  .hr-dashboard-stats {
    grid-template-columns: 1fr;
  }

  .hr-dashboard-panels {
    grid-template-columns: 1fr;
  }

  .hr-notification-panel {
    min-height: 110px;
  }

  .hr-dashboard-footer {
    padding: 10px 15px;
  }

  .hr-intro-grid {
    gap: 30px;
  }

  .hr-intro-heading h2,
  .hr-solutions .section-heading h2,
  .hr-industries .section-heading h2,
  .hr-benefits .section-heading h2,
  .hr-ecosystem-content h2,
  .hr-products-content h2,
  .hr-workflow-content h2 {
    font-size: 38px;
  }

  .hr-solution-grid,
  .hr-industry-grid,
  .hr-benefits-grid {
    grid-template-columns: 1fr;
  }

  .hr-solution-card {
    min-height: 290px;
  }

  .hr-ecosystem-visual {
    max-width: 430px;
  }

  .hr-ecosystem-node {
    min-width: 100px;

    padding: 9px 11px;
  }

  .hr-ecosystem-center {
    width: 125px;
    height: 125px;
  }

  .hr-node-payroll {
    left: -5px;
  }

  .hr-node-hr {
    right: -5px;
  }

  .hr-product-mini-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hr-workflow {
    padding: 80px 0;
  }

  .hr-cta {
    padding: 90px 0;
  }

  .hr-cta-content h2 {
    font-size: 42px;
  }

  .hr-cta-actions {
    flex-direction: column;

    gap: 18px;
  }

  .hr-cta-actions .btn-light {
    width: 100%;

    max-width: 320px;

    justify-content: center;
  }
}

/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================= */

@media (max-width: 520px) {
  .hr-solution-page .section {
    padding: 65px 0;
  }

  .hr-hero {
    padding: 100px 0 60px;
  }

  .hr-solution-label {
    font-size: 9px;
  }

  .hr-solution-mark {
    width: 30px;
    height: 30px;

    border-radius: 8px;
  }

  .hr-hero-content h1 {
    font-size: 39px;
  }

  .hr-hero-meta {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    width: 100%;
  }

  .hr-hero-meta > div {
    padding: 0 8px;
  }

  .hr-hero-meta strong {
    font-size: 13px;
  }

  .hr-hero-meta span {
    font-size: 9px;
  }

  .hr-dashboard {
    border-radius: 18px;
  }

  .hr-dashboard-brand strong {
    font-size: 9px;
  }

  .hr-dashboard-status {
    display: none;
  }

  .hr-dashboard-welcome h3 {
    font-size: 16px;
  }

  .hr-date-box {
    width: 42px;
  }

  .hr-mini-stat {
    min-height: 58px;
  }

  .hr-solution-card,
  .hr-industry-card,
  .hr-benefit-card {
    padding: 25px;
  }

  .hr-solution-card {
    min-height: 275px;
  }

  .hr-intro-heading h2,
  .hr-solutions .section-heading h2,
  .hr-industries .section-heading h2,
  .hr-benefits .section-heading h2,
  .hr-ecosystem-content h2,
  .hr-products-content h2,
  .hr-workflow-content h2 {
    font-size: 34px;
  }

  .hr-ecosystem-visual {
    max-width: 340px;
  }

  .hr-ecosystem-center {
    width: 105px;
    height: 105px;
  }

  .hr-ecosystem-center span {
    font-size: 20px;
  }

  .hr-ecosystem-center strong {
    font-size: 9px;
  }

  .hr-ecosystem-center small {
    font-size: 7px;
  }

  .hr-ecosystem-node {
    min-width: 82px;

    padding: 7px;

    border-radius: 10px;
  }

  .hr-ecosystem-node span {
    font-size: 14px;
  }

  .hr-ecosystem-node strong {
    font-size: 7px;
  }

  .hr-node-employee {
    top: 7%;
  }

  .hr-node-manager {
    bottom: 7%;
  }

  .hr-product-card {
    padding: 18px;

    gap: 12px;
  }

  .hr-product-icon {
    width: 46px;
    height: 46px;

    border-radius: 12px;
  }

  .hr-product-card strong {
    font-size: 15px;
  }

  .hr-product-card div span {
    font-size: 9px;
  }

  .hr-product-mini {
    min-height: 120px;

    padding: 15px;
  }

  .hr-workflow-step {
    grid-template-columns: 35px 1fr;

    gap: 12px;
  }

  .hr-workflow-step h3 {
    font-size: 17px;
  }

  .hr-cta-content h2 {
    font-size: 35px;
  }

  .hr-cta-content > p {
    font-size: 13px;
  }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {
  .hr-hero-content h1 {
    font-size: 35px;
  }

  .hr-hero-meta {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .hr-hero-meta > div {
    padding: 0;

    border-right: 0;
  }

  .hr-ecosystem-visual {
    max-width: 300px;
  }

  .hr-ecosystem-node {
    min-width: 72px;
  }

  .hr-product-mini-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .hr-solution-page .reveal {
    opacity: 1;
    transform: none;

    transition: none;
  }

  .hr-orbit-two {
    animation: none;
  }

  .hr-dashboard,
  .hr-dashboard:hover,
  .hr-solution-card,
  .hr-solution-card:hover,
  .hr-industry-card,
  .hr-industry-card:hover,
  .hr-benefit-card,
  .hr-benefit-card:hover,
  .hr-product-card,
  .hr-product-card:hover,
  .hr-product-mini,
  .hr-product-mini:hover,
  .hr-workflow-step {
    transition: none;
    transform: none;
  }
}

/* =========================================================
   PRINT
========================================================= */

@media print {
  .hr-hero,
  .hr-ecosystem,
  .hr-workflow,
  .hr-cta {
    color: #000;
    background: #ffffff;
  }

  .hr-hero-grid,
  .hr-visual-glow,
  .hr-cta-grid,
  .hr-cta::before,
  .hr-cta::after {
    display: none;
  }

  .hr-dashboard {
    transform: none;
    box-shadow: none;
  }

  .hr-solution-page .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Business Operations Solution Page */
/* =========================================================
   KAMAL GROUP OF CORPORATE
   BUSINESS OPERATIONS — COMPLETE PAGE CSS
========================================================= */

/* =========================================================
   01. ROOT / DESIGN TOKENS
========================================================= */

:root {
  --navy-950: #061326;
  --navy-900: #081a33;
  --navy-850: #0b2343;
  --navy-800: #102c4f;
  --navy-700: #173a63;

  --blue: #1769ff;
  --blue-dark: #0d4ed8;
  --blue-light: #eaf2ff;

  --purple: #7c3aed;
  --purple-light: #f1ebff;

  --green: #10b981;
  --green-dark: #059669;
  --green-light: #e8faf3;

  --cyan: #06b6d4;
  --cyan-light: #e8fbff;

  --orange: #f59e0b;
  --orange-light: #fff6df;

  --red: #ef4444;

  --white: #ffffff;
  --off-white: #f8fafc;
  --surface: #f4f7fb;
  --surface-2: #eef3f9;

  --text: #102033;
  --text-soft: #536274;
  --text-muted: #748196;

  --border: #e2e8f0;
  --border-dark: #cbd5e1;

  --shadow-sm: 0 4px 14px rgba(8, 26, 51, 0.06);

  --shadow-md: 0 14px 40px rgba(8, 26, 51, 0.09);

  --shadow-lg: 0 25px 70px rgba(8, 26, 51, 0.14);

  --shadow-blue: 0 20px 55px rgba(23, 105, 255, 0.16);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --container: 1240px;

  --header-height: 78px;

  --transition-fast: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);

  --transition: 300ms cubic-bezier(0.2, 0.7, 0.2, 1);

  --transition-slow: 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* =========================================================
   12. BUSINESS HERO
========================================================= */

.business-hero {
  position: relative;

  min-height: 760px;

  display: flex;
  align-items: center;

  padding: calc(var(--header-height) + 80px) 0 90px;

  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(23, 105, 255, 0.1),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 70%,
      rgba(16, 185, 129, 0.08),
      transparent 28%
    ),
    linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);

  overflow: hidden;
}

.business-hero-grid {
  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.42;

  background-image:
    linear-gradient(rgba(23, 105, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 105, 255, 0.045) 1px, transparent 1px);

  background-size: 54px 54px;

  mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.business-hero-container {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap: 65px;

  align-items: center;
}

.business-hero-content {
  max-width: 620px;
}

.business-solution-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 20px;

  color: var(--navy-900);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.12em;
}

.business-solution-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;

  color: var(--white);

  background: var(--navy-900);

  border-radius: 8px;

  font-family: "Manrope", sans-serif;

  font-size: 14px;
  font-weight: 800;
}

.business-hero h1 {
  margin-bottom: 24px;

  font-size: clamp(42px, 5vw, 68px);

  line-height: 1.04;
}

.business-hero h1 span {
  display: inline;
}

.business-hero-content > p {
  max-width: 590px;

  margin-bottom: 30px;

  color: var(--text-soft);

  font-size: 17px;

  line-height: 1.75;
}

.business-hero-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 38px;
}

.business-hero-meta {
  display: flex;
  align-items: center;

  gap: 0;
}

.business-hero-meta-item {
  min-width: 125px;

  padding-right: 25px;
  margin-right: 25px;

  border-right: 1px solid var(--border);
}

.business-hero-meta-item:last-child {
  padding-right: 0;
  margin-right: 0;

  border-right: 0;
}

.business-hero-meta-item strong {
  display: block;

  margin-bottom: 1px;

  color: var(--navy-900);

  font-size: 14px;
}

.business-hero-meta-item span {
  color: var(--text-muted);

  font-size: 11px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.06em;
}

/* =========================================================
   13. HERO DASHBOARD
========================================================= */

.business-hero-visual {
  position: relative;

  min-width: 0;
}

.business-visual-glow {
  position: absolute;

  width: 420px;
  height: 420px;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  background: radial-gradient(
    circle,
    rgba(23, 105, 255, 0.18),
    rgba(16, 185, 129, 0.08) 40%,
    transparent 70%
  );

  filter: blur(15px);

  pointer-events: none;
}

.business-dashboard {
  position: relative;

  width: 100%;

  max-width: 650px;

  margin-left: auto;

  background: var(--white);

  border: 1px solid rgba(203, 213, 225, 0.8);

  border-radius: 22px;

  box-shadow:
    0 30px 90px rgba(8, 26, 51, 0.14),
    0 8px 25px rgba(8, 26, 51, 0.05);

  overflow: hidden;

  transform: perspective(1300px) rotateY(-4deg) rotateX(2deg);

  transition:
    transform var(--transition-slow),
    box-shadow var(--transition);
}

.business-dashboard:hover {
  transform: perspective(1300px) rotateY(0) rotateX(0) translateY(-5px);

  box-shadow: 0 40px 100px rgba(8, 26, 51, 0.17);
}

.business-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding: 17px 20px;

  color: var(--white);

  background: var(--navy-900);
}

.business-dashboard-brand {
  display: flex;
  align-items: center;

  gap: 11px;
}

.business-dashboard-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 35px;
  height: 35px;

  flex: 0 0 35px;

  color: var(--navy-900);

  background: var(--white);

  border-radius: 9px;

  font-family: "Manrope", sans-serif;

  font-size: 15px;
  font-weight: 800;
}

.business-dashboard-brand small {
  display: block;

  margin-bottom: 2px;

  color: #8fa4bd;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 0.11em;
}

.business-dashboard-brand strong {
  display: block;

  color: var(--white);

  font-family: "Manrope", sans-serif;

  font-size: 12px;
}

.business-dashboard-status {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding: 7px 9px;

  color: #86efac;

  background: rgba(16, 185, 129, 0.1);

  border: 1px solid rgba(134, 239, 172, 0.14);

  border-radius: 20px;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 0.08em;

  white-space: nowrap;
}

.business-dashboard-status > span {
  font-size: 8px;
}

.business-dashboard-body {
  padding: 22px;
}

.business-dashboard-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 20px;
}

.business-dashboard-welcome small {
  display: block;

  margin-bottom: 5px;

  color: var(--blue);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 0.13em;
}

.business-dashboard-welcome h3 {
  margin: 0;

  font-size: 19px;

  letter-spacing: -0.025em;
}

.business-dashboard-welcome h3 span {
  color: var(--blue);
}

.business-date-box {
  display: flex;
  flex-direction: column;

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

  width: 52px;
  height: 52px;

  flex: 0 0 52px;

  background: var(--blue-light);

  border-radius: 11px;
}

.business-date-box span {
  color: var(--blue);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 0.08em;
}

.business-date-box strong {
  color: var(--navy-900);

  font-size: 19px;

  line-height: 1;
}

/* STATS */

.business-dashboard-stats {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

  margin-bottom: 13px;
}

.business-mini-stat {
  display: flex;
  align-items: center;

  gap: 9px;

  min-width: 0;

  padding: 12px;

  background: #fafcff;

  border: 1px solid var(--border);

  border-radius: 11px;
}

.business-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;

  flex: 0 0 31px;

  border-radius: 8px;

  font-size: 12px;
  font-weight: 800;
}

.business-mini-icon.blue {
  color: var(--blue);
  background: var(--blue-light);
}

.business-mini-icon.purple {
  color: var(--purple);
  background: var(--purple-light);
}

.business-mini-icon.green {
  color: var(--green-dark);
  background: var(--green-light);
}

.business-mini-stat strong {
  display: block;

  color: var(--navy-900);

  font-size: 11px;
}

.business-mini-stat small {
  display: block;

  color: var(--text-muted);

  font-size: 8px;

  white-space: nowrap;
}

/* DASHBOARD PANELS */

.business-dashboard-panels {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    190px;

  gap: 12px;
}

.business-dashboard-panel,
.business-notification-panel {
  border: 1px solid var(--border);

  border-radius: 12px;
}

.business-dashboard-panel {
  padding: 15px;
}

.business-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 14px;
}

.business-panel-heading strong {
  color: var(--navy-900);

  font-size: 11px;
}

.business-panel-heading span {
  color: var(--blue);

  font-size: 9px;

  font-weight: 700;
}

.business-progress-row {
  margin-bottom: 13px;
}

.business-progress-row:last-child {
  margin-bottom: 0;
}

.business-progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 6px;
}

.business-progress-label span {
  color: var(--text-soft);

  font-size: 9px;
}

.business-progress-label strong {
  color: var(--green-dark);

  font-size: 8px;

  font-weight: 800;
}

.business-progress {
  width: 100%;
  height: 5px;

  background: #e9eef5;

  border-radius: 10px;

  overflow: hidden;
}

.business-progress span {
  display: block;

  height: 100%;

  background: linear-gradient(90deg, var(--blue), #5b9cff);

  border-radius: inherit;
}

.business-notification-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 10px;

  padding: 15px;

  background: linear-gradient(145deg, #f3f8ff, #f3fcf8);
}

.business-notification-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  color: var(--blue);

  background: var(--white);

  border-radius: 9px;

  box-shadow: var(--shadow-sm);

  font-size: 13px;
}

.business-notification-panel strong {
  display: block;

  margin-bottom: 5px;

  color: var(--navy-900);

  font-size: 10px;
}

.business-notification-panel small {
  display: block;

  color: var(--text-soft);

  font-size: 8px;

  line-height: 1.55;
}

.business-dashboard-footer {
  display: flex;
  justify-content: space-between;

  padding: 9px 20px;

  color: #8493a8;

  background: #f8fafc;

  border-top: 1px solid var(--border);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 0.12em;
}

/* =========================================================
   14. INTRO
========================================================= */

.business-intro {
  background: var(--white);
}

.business-intro-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.85fr)
    minmax(0, 1fr);

  gap: 90px;

  align-items: start;
}

.business-intro-heading h2 {
  max-width: 530px;

  margin-bottom: 0;

  font-size: clamp(35px, 4vw, 52px);
}

.business-intro-content {
  padding-top: 5px;
}

.business-intro-content p {
  margin-bottom: 20px;

  color: var(--text-soft);

  font-size: 16px;

  line-height: 1.8;
}

.business-intro-content p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   15. BUSINESS SOLUTIONS
========================================================= */

.business-solutions {
  background: var(--surface);
}

.business-solution-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;
}

.business-solution-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 290px;

  padding: 24px;

  background: var(--white);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  overflow: hidden;

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.business-solution-card:hover {
  transform: translateY(-7px);

  border-color: rgba(23, 105, 255, 0.2);

  box-shadow: var(--shadow-md);
}

.business-solution-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 35px;
}

.business-solution-number {
  color: #a4b0c0;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.08em;
}

.business-solution-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  border-radius: 12px;

  font-size: 18px;

  transition: transform var(--transition);
}

.business-solution-card:hover .business-solution-icon {
  transform: rotate(-5deg) scale(1.05);
}

.business-solution-icon.blue {
  color: var(--blue);
  background: var(--blue-light);
}

.business-solution-icon.purple {
  color: var(--purple);
  background: var(--purple-light);
}

.business-solution-icon.green {
  color: var(--green-dark);
  background: var(--green-light);
}

.business-solution-icon.orange {
  color: #d97706;
  background: var(--orange-light);
}

.business-solution-icon.cyan {
  color: #0891b2;
  background: var(--cyan-light);
}

.business-solution-icon.dark {
  color: var(--navy-900);
  background: var(--surface-2);
}

.business-solution-card-content h3 {
  margin-bottom: 11px;

  font-size: 21px;
}

.business-solution-card-content p {
  color: var(--text-soft);

  font-size: 13px;

  line-height: 1.75;
}

.business-solution-line {
  position: absolute;

  bottom: 0;
  left: 0;

  width: 0;
  height: 3px;

  background: linear-gradient(90deg, var(--blue), var(--green));

  transition: width var(--transition);
}

.business-solution-card:hover .business-solution-line {
  width: 100%;
}

/* =========================================================
   16. BUSINESS ECOSYSTEM
========================================================= */

.business-ecosystem {
  background: var(--white);
}

.business-ecosystem-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 0.95fr);

  gap: 90px;

  align-items: center;
}

/* VISUAL */

.business-ecosystem-visual {
  position: relative;

  width: min(100%, 520px);

  aspect-ratio: 1 / 1;

  margin-inline: auto;
}

.business-ecosystem-orbit {
  position: absolute;

  top: 50%;
  left: 50%;

  border: 1px dashed rgba(23, 105, 255, 0.2);

  border-radius: 50%;

  transform: translate(-50%, -50%);
}

.business-orbit-one {
  width: 76%;
  height: 76%;

  animation: ecosystemRotate 30s linear infinite;
}

.business-orbit-two {
  width: 53%;
  height: 53%;

  border-color: rgba(16, 185, 129, 0.2);

  animation: ecosystemRotateReverse 24s linear infinite;
}

.business-ecosystem-center {
  position: absolute;

  top: 50%;
  left: 50%;

  z-index: 2;

  width: 155px;
  height: 155px;

  display: flex;
  flex-direction: column;

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

  gap: 3px;

  color: var(--white);

  background: radial-gradient(circle at 30% 20%, #153c6c, var(--navy-900));

  border: 8px solid #edf3fa;

  border-radius: 50%;

  transform: translate(-50%, -50%);

  box-shadow: 0 20px 55px rgba(8, 26, 51, 0.2);
}

.business-ecosystem-center span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  margin-bottom: 2px;

  background: rgba(255, 255, 255, 0.12);

  border-radius: 8px;

  font-family: "Manrope", sans-serif;

  font-size: 15px;
  font-weight: 800;
}

.business-ecosystem-center strong {
  font-family: "Manrope", sans-serif;

  font-size: 16px;
}

.business-ecosystem-center small {
  color: #9db1c8;

  font-size: 8px;

  font-weight: 600;

  letter-spacing: 0.05em;
}

/* NODES */

.business-ecosystem-node {
  position: absolute;

  z-index: 4;

  display: flex;
  align-items: center;

  gap: 8px;

  padding: 10px 13px;

  background: var(--white);

  border: 1px solid var(--border);

  border-radius: 12px;

  box-shadow: var(--shadow-sm);

  font-size: 11px;
  font-weight: 800;

  white-space: nowrap;
}

.business-ecosystem-node span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;

  border-radius: 7px;

  background: var(--blue-light);

  color: var(--blue);

  font-size: 12px;
}

.business-node-team {
  top: 14%;
  left: 8%;
}

.business-node-workflow {
  top: 13%;
  right: 6%;
}

.business-node-tasks {
  bottom: 13%;
  left: 10%;
}

.business-node-reports {
  right: 7%;
  bottom: 14%;
}

.business-node-workflow span {
  color: var(--purple);
  background: var(--purple-light);
}

.business-node-tasks span {
  color: var(--green-dark);
  background: var(--green-light);
}

.business-node-reports span {
  color: #0891b2;
  background: var(--cyan-light);
}

/* CONTENT */

.business-ecosystem-content {
  max-width: 570px;
}

.business-ecosystem-content h2 {
  margin-bottom: 20px;

  font-size: clamp(34px, 4vw, 50px);
}

.business-ecosystem-content > p {
  margin-bottom: 32px;

  color: var(--text-soft);

  font-size: 15px;

  line-height: 1.8;
}

.business-ecosystem-list {
  display: grid;

  gap: 0;
}

.business-ecosystem-item {
  display: grid;

  grid-template-columns: 36px 1fr;

  gap: 15px;

  padding: 17px 0;

  border-top: 1px solid var(--border);
}

.business-ecosystem-item:last-child {
  border-bottom: 1px solid var(--border);
}

.business-ecosystem-item > span {
  color: var(--blue);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.05em;
}

.business-ecosystem-item h3 {
  margin-bottom: 5px;

  font-size: 15px;
}

.business-ecosystem-item p {
  color: var(--text-soft);

  font-size: 12px;

  line-height: 1.65;
}

@keyframes ecosystemRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes ecosystemRotateReverse {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

/* =========================================================
   17. INDUSTRIES
========================================================= */

.business-industries {
  background: var(--surface);
}

.business-industry-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;
}

.business-industry-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 350px;

  padding: 25px;

  background: var(--white);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  overflow: hidden;

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.business-industry-card:hover {
  transform: translateY(-7px);

  border-color: rgba(23, 105, 255, 0.2);

  box-shadow: var(--shadow-md);
}

.business-industry-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 55px;
}

.business-industry-top > span {
  color: #a4b0c0;

  font-size: 11px;

  font-weight: 800;
}

.business-industry-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  border-radius: 12px;

  font-size: 19px;
}

.business-industry-icon.blue {
  color: var(--blue);
  background: var(--blue-light);
}

.business-industry-icon.purple {
  color: var(--purple);
  background: var(--purple-light);
}

.business-industry-icon.green {
  color: var(--green-dark);
  background: var(--green-light);
}

.business-industry-content {
  margin-bottom: 25px;
}

.business-industry-content h3 {
  margin-bottom: 11px;

  font-size: 22px;
}

.business-industry-content p {
  color: var(--text-soft);

  font-size: 13px;

  line-height: 1.75;
}

.business-industry-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-top: auto;

  color: var(--blue);

  font-size: 11px;

  font-weight: 800;
}

.business-industry-link > span {
  transition: transform var(--transition-fast);
}

.business-industry-card:hover .business-industry-link > span {
  transform: translateX(4px);
}

/* =========================================================
   18. PRODUCT CONNECTION
========================================================= */

.business-products {
  background: var(--white);
}

.business-products-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap: 90px;

  align-items: center;
}

.business-products-content {
  max-width: 560px;
}

.business-products-content h2 {
  margin-bottom: 20px;

  font-size: clamp(35px, 4vw, 51px);
}

.business-products-content p {
  margin-bottom: 18px;

  color: var(--text-soft);

  font-size: 15px;

  line-height: 1.8;
}

.business-products-content .btn {
  margin-top: 14px;
}

/* PRODUCT STACK */

.business-product-stack {
  position: relative;

  padding: 25px;

  background: linear-gradient(145deg, #f8fbff, #f4faf8);

  border: 1px solid var(--border);

  border-radius: 22px;

  box-shadow: var(--shadow-sm);
}

.business-product-card {
  display: flex;
  align-items: center;

  gap: 15px;

  padding: 18px;

  background: var(--white);

  border: 1px solid var(--border);

  border-radius: 15px;

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.business-product-card:hover {
  transform: translateY(-4px);

  box-shadow: var(--shadow-md);
}

.business-product-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  flex: 0 0 48px;

  color: var(--green-dark);

  background: var(--green-light);

  border-radius: 12px;
}

.business-product-card-content {
  min-width: 0;
}

.business-product-card-content small {
  display: block;

  margin-bottom: 3px;

  color: var(--blue);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 0.1em;
}

.business-product-card-content strong {
  display: block;

  margin-bottom: 3px;

  color: var(--navy-900);

  font-family: "Manrope", sans-serif;

  font-size: 16px;
}

.business-product-card-content span {
  color: var(--text-muted);

  font-size: 10px;
}

.business-product-arrow {
  margin-left: auto;

  color: var(--blue);

  font-size: 18px;
}

.business-product-mini-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

  margin-top: 10px;
}

.business-product-mini {
  display: grid;

  grid-template-columns: 30px 1fr;

  column-gap: 9px;

  padding: 13px;

  background: rgba(255, 255, 255, 0.75);

  border: 1px solid var(--border);

  border-radius: 12px;
}

.business-product-mini > span {
  grid-row: span 2;

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

  width: 30px;
  height: 30px;

  color: var(--blue);

  background: var(--blue-light);

  border-radius: 8px;

  font-size: 11px;
}

.business-product-mini strong {
  align-self: end;

  color: var(--navy-900);

  font-size: 11px;
}

.business-product-mini small {
  align-self: start;

  color: var(--text-muted);

  font-size: 8px;

  line-height: 1.4;
}

.business-product-mini:nth-child(2) > span {
  color: var(--purple);
  background: var(--purple-light);
}

.business-product-mini:nth-child(3) > span {
  color: var(--green-dark);
  background: var(--green-light);
}

.business-product-mini:nth-child(4) > span {
  color: #0891b2;
  background: var(--cyan-light);
}

/* =========================================================
   19. BENEFITS
========================================================= */

.business-benefits {
  background: var(--surface);
}

.business-benefits-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 15px;
}

.business-benefit-card {
  display: flex;
  flex-direction: column;

  min-height: 250px;

  padding: 23px;

  background: var(--white);

  border: 1px solid var(--border);

  border-radius: 16px;

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.business-benefit-card:hover {
  transform: translateY(-5px);

  box-shadow: var(--shadow-sm);
}

.business-benefit-card > span {
  margin-bottom: auto;

  color: #a4b0c0;

  font-size: 10px;

  font-weight: 800;
}

.business-benefit-card h3 {
  margin-bottom: 8px;

  font-size: 19px;
}

.business-benefit-card p {
  color: var(--text-soft);

  font-size: 12px;

  line-height: 1.7;
}

/* =========================================================
   20. WORKFLOW
========================================================= */

.business-workflow {
  position: relative;

  padding: 105px 0;

  color: var(--white);

  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(23, 105, 255, 0.25),
      transparent 28%
    ),
    radial-gradient(
      circle at 15% 80%,
      rgba(16, 185, 129, 0.12),
      transparent 25%
    ),
    var(--navy-900);

  overflow: hidden;
}

.business-workflow::before {
  content: "";

  position: absolute;

  inset: 0;

  opacity: 0.15;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);

  background-size: 55px 55px;
}

.business-workflow .container {
  position: relative;

  z-index: 2;
}

.business-workflow-grid {
  display: grid;

  grid-template-columns:
    0.85fr
    1.15fr;

  gap: 90px;

  align-items: start;
}

.business-workflow-content {
  position: sticky;

  top: 120px;
}

.business-workflow .eyebrow {
  color: #72a4ff;
}

.business-workflow-content h2 {
  margin-bottom: 20px;

  color: var(--white);

  font-size: clamp(36px, 4vw, 52px);
}

.business-workflow-content h2 span {
  color: #67a0ff;
}

.business-workflow-content p {
  max-width: 500px;

  color: #9fb0c5;

  font-size: 15px;

  line-height: 1.8;
}

.business-workflow-steps {
  display: grid;

  gap: 0;
}

.business-workflow-step {
  display: grid;

  grid-template-columns: 52px 1fr;

  gap: 20px;

  padding: 25px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.business-workflow-step:first-child {
  padding-top: 0;
}

.business-workflow-step:last-child {
  border-bottom: 0;
}

.business-workflow-step > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  color: #80a9ff;

  background: rgba(23, 105, 255, 0.12);

  border: 1px solid rgba(23, 105, 255, 0.25);

  border-radius: 10px;

  font-size: 10px;

  font-weight: 800;
}

.business-workflow-step h3 {
  margin-bottom: 6px;

  color: var(--white);

  font-size: 20px;
}

.business-workflow-step p {
  margin: 0;

  color: #91a3b8;

  font-size: 12px;

  line-height: 1.7;
}

/* =========================================================
   21. FINAL CTA
========================================================= */

.business-cta {
  position: relative;

  padding: 120px 0;

  color: var(--white);

  background:
    radial-gradient(circle at 50% 0%, rgba(23, 105, 255, 0.4), transparent 35%),
    linear-gradient(145deg, #07182f, #0b2850);

  text-align: center;

  overflow: hidden;
}

.business-cta-grid {
  position: absolute;

  inset: 0;

  opacity: 0.16;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);

  background-size: 55px 55px;

  mask-image: radial-gradient(ellipse at center, black, transparent 75%);
}

.business-cta .container {
  position: relative;

  z-index: 2;
}

.business-cta-content {
  max-width: 820px;

  margin-inline: auto;
}

.business-cta-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;

  margin-bottom: 25px;

  color: var(--navy-900);

  background: var(--white);

  border-radius: 13px;

  font-family: "Manrope", sans-serif;

  font-size: 21px;
  font-weight: 800;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}

.business-cta .eyebrow {
  color: #78a8ff;

  justify-content: center;
}

.business-cta h2 {
  margin-bottom: 20px;

  color: var(--white);

  font-size: clamp(40px, 5vw, 62px);
}

.business-cta h2 span {
  color: #6ea4ff;
}

.business-cta-content > p {
  max-width: 680px;

  margin: 0 auto 32px;

  color: #a7b8cc;

  font-size: 16px;

  line-height: 1.8;
}

.business-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 22px;
}

.business-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: var(--white);

  font-size: 14px;

  font-weight: 700;
}

.business-cta-link span {
  color: #72a4ff;

  transition: transform var(--transition-fast);
}

.business-cta-link:hover span {
  transform: translateX(4px);
}

/* =========================================================
   22. FOOTER
========================================================= */

.footer-grid {
  display: grid;

  grid-template-columns:
    1.7fr
    repeat(5, 1fr);

  gap: 40px;

  padding-bottom: 55px;
}

.footer-brand {
  max-width: 300px;
}

.footer-brand img {
  width: 180px;

  margin-bottom: 20px;
}

.footer-brand p {
  color: #8494a9;

  font-size: 12px;

  line-height: 1.75;
}

.footer-social {
  margin-top: 25px;
}

.footer-social-label {
  display: block;

  margin-bottom: 10px;

  color: #6f8197;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.12em;
}

.footer-social-links {
  display: flex;

  gap: 8px;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  color: #a8b7c9;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 9px;

  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    transform var(--transition-fast);
}

.footer-social-link:hover {
  color: var(--white);

  transform: translateY(-3px);
}

.footer-social-link.linkedin:hover {
  background: #0a66c2;
}

.footer-social-link.instagram:hover {
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
}

.footer-social-link.whatsapp:hover {
  background: #25d366;
}

.footer-social-link.youtube:hover {
  background: #ff0000;
}

.footer-column h3 {
  margin-bottom: 18px;

  color: var(--white);

  font-family: "Manrope", sans-serif;

  font-size: 13px;

  letter-spacing: -0.01em;
}

.footer-column a {
  display: block;

  margin-bottom: 10px;

  color: #8494a9;

  font-size: 11px;

  line-height: 1.5;

  transition: color var(--transition-fast);
}

.footer-column a:hover {
  color: var(--white);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 20px 0 22px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom p {
  margin: 0;

  color: #64758b;

  font-size: 10px;
}

.footer-bottom > div {
  display: flex;

  gap: 20px;
}

.footer-bottom a {
  color: #718198;

  font-size: 10px;

  transition: color var(--transition-fast);
}

.footer-bottom a:hover {
  color: var(--white);
}

/* =========================================================
   23. SCROLL REVEAL
========================================================= */

.reveal {
  opacity: 0;

  transform: translateY(28px);

  transition:
    opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.revealed {
  opacity: 1;

  transform: translateY(0);
}

/* =========================================================
   24. STAGGERED CARD REVEALS
========================================================= */

.business-solution-card:nth-child(2),
.business-industry-card:nth-child(2),
.business-benefit-card:nth-child(2),
.business-product-mini:nth-child(2) {
  transition-delay: 80ms;
}

.business-solution-card:nth-child(3),
.business-industry-card:nth-child(3),
.business-benefit-card:nth-child(3),
.business-product-mini:nth-child(3) {
  transition-delay: 160ms;
}

.business-solution-card:nth-child(4),
.business-benefit-card:nth-child(4),
.business-product-mini:nth-child(4) {
  transition-delay: 240ms;
}

.business-solution-card:nth-child(5) {
  transition-delay: 320ms;
}

.business-solution-card:nth-child(6) {
  transition-delay: 400ms;
}

/* =========================================================
   25. RESPONSIVE — LARGE LAPTOP
========================================================= */

@media (max-width: 1200px) {
  :root {
    --container: 1120px;
  }

  .main-navigation {
    gap: 0;
  }

  .nav-link {
    padding-inline: 9px;

    font-size: 12px;
  }

  .header-inner {
    gap: 18px;
  }

  .business-hero-container {
    gap: 40px;
  }

  .business-ecosystem-grid,
  .business-products-grid {
    gap: 60px;
  }

  .footer-grid {
    grid-template-columns:
      1.5fr
      repeat(5, 1fr);

    gap: 25px;
  }
}

/* =========================================================
   26. RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1024px) {
  :root {
    --header-height: 72px;
  }

  .container {
    width: min(calc(100% - 40px), 900px);
  }

  .main-navigation,
  .header-actions {
    display: none;
  }

  .mobile-menu-button {
    display: flex;

    margin-left: auto;
  }

  .mobile-navigation {
    display: block;

    position: fixed;

    top: var(--header-height);
    left: 0;

    width: 100%;
    height: calc(100vh - var(--header-height));

    padding: 20px;

    background: var(--white);

    border-top: 1px solid var(--border);

    overflow-y: auto;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-10px);

    transition:
      opacity var(--transition),
      visibility var(--transition),
      transform var(--transition);
  }

  .mobile-navigation.active {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
  }

  .mobile-navigation > a,
  .mobile-nav-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 15px 4px;

    color: var(--navy-900);

    background: transparent;

    border-bottom: 1px solid var(--border);

    font-size: 14px;

    font-weight: 700;

    text-align: left;

    cursor: pointer;
  }

  .mobile-nav-trigger span {
    color: var(--blue);

    font-size: 20px;

    line-height: 1;

    transition: transform var(--transition-fast);
  }

  .mobile-nav-group.open .mobile-nav-trigger span {
    transform: rotate(45deg);
  }

  .mobile-submenu {
    max-height: 0;

    overflow: hidden;

    transition: max-height var(--transition);
  }

  .mobile-submenu a {
    display: block;

    padding: 11px 12px;

    color: var(--text-soft);

    border-bottom: 1px solid #edf1f5;

    font-size: 13px;
  }

  .mobile-submenu a:hover {
    color: var(--blue);

    background: var(--surface);
  }

  .mobile-demo-button {
    justify-content: center !important;

    margin-top: 18px;

    padding: 14px !important;

    color: var(--white) !important;

    background: var(--blue) !important;

    border: 0 !important;

    border-radius: 10px;

    text-align: center !important;
  }

  .business-hero {
    min-height: auto;

    padding-top: calc(var(--header-height) + 70px);
  }

  .business-hero-container {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .business-hero-content {
    max-width: 750px;
  }

  .business-dashboard {
    margin-inline: auto;

    transform: none;
  }

  .business-dashboard:hover {
    transform: translateY(-4px);
  }

  .business-intro-grid,
  .business-ecosystem-grid,
  .business-products-grid {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .business-ecosystem-content,
  .business-products-content {
    max-width: 760px;
  }

  .business-ecosystem-visual {
    width: min(100%, 480px);
  }

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

  .business-industry-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .business-workflow-grid {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .business-workflow-content {
    position: static;

    max-width: 700px;
  }

  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-brand {
    grid-column: 1 / -1;

    max-width: 500px;
  }
}

/* =========================================================
   27. RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 767px) {
  :root {
    --header-height: 66px;
  }

  .container {
    width: calc(100% - 32px);
  }

  .section {
    padding: 78px 0;
  }

  .brand img {
    width: 155px;
  }

  .business-hero {
    padding: calc(var(--header-height) + 55px) 0 65px;
  }

  .business-hero-container {
    gap: 40px;
  }

  .business-solution-label {
    margin-bottom: 16px;

    font-size: 9px;

    letter-spacing: 0.09em;
  }

  .business-solution-mark {
    width: 27px;
    height: 27px;

    border-radius: 7px;

    font-size: 12px;
  }

  .eyebrow {
    margin-bottom: 13px;

    font-size: 9px;

    letter-spacing: 0.12em;
  }

  .eyebrow::before {
    width: 18px;
  }

  .business-hero h1 {
    margin-bottom: 19px;

    font-size: clamp(37px, 11vw, 52px);

    line-height: 1.04;
  }

  .business-hero-content > p {
    margin-bottom: 25px;

    font-size: 14px;

    line-height: 1.75;
  }

  .business-hero-actions {
    flex-direction: column;

    align-items: stretch;

    margin-bottom: 30px;
  }

  .business-hero-actions .btn {
    width: 100%;
  }

  .business-hero-meta {
    justify-content: space-between;
  }

  .business-hero-meta-item {
    min-width: auto;

    flex: 1;

    padding-right: 10px;
    margin-right: 10px;
  }

  .business-hero-meta-item strong {
    font-size: 12px;
  }

  .business-hero-meta-item span {
    font-size: 8px;
  }

  .business-dashboard {
    border-radius: 17px;
  }

  .business-dashboard-header {
    padding: 13px 14px;
  }

  .business-dashboard-brand {
    gap: 8px;
  }

  .business-dashboard-logo {
    width: 29px;
    height: 29px;

    flex-basis: 29px;

    font-size: 12px;
  }

  .business-dashboard-brand small {
    font-size: 6px;
  }

  .business-dashboard-brand strong {
    font-size: 9px;
  }

  .business-dashboard-status {
    padding: 5px 7px;

    font-size: 6px;
  }

  .business-dashboard-body {
    padding: 15px;
  }

  .business-dashboard-welcome {
    margin-bottom: 15px;
  }

  .business-dashboard-welcome h3 {
    font-size: 15px;
  }

  .business-date-box {
    width: 43px;
    height: 43px;

    flex-basis: 43px;
  }

  .business-date-box strong {
    font-size: 15px;
  }

  .business-dashboard-stats {
    gap: 6px;
  }

  .business-mini-stat {
    flex-direction: column;

    align-items: flex-start;

    padding: 9px;
  }

  .business-mini-icon {
    width: 27px;
    height: 27px;

    flex-basis: 27px;
  }

  .business-mini-stat strong {
    font-size: 9px;
  }

  .business-mini-stat small {
    display: none;
  }

  .business-dashboard-panels {
    grid-template-columns: 1fr;
  }

  .business-notification-panel {
    display: none;
  }

  .business-dashboard-footer {
    padding-inline: 15px;

    font-size: 5px;
  }

  .section-heading {
    margin-bottom: 38px;
  }

  .section-heading h2 {
    font-size: clamp(32px, 9vw, 43px);
  }

  .section-heading p {
    font-size: 14px;
  }

  .business-intro-grid {
    gap: 30px;
  }

  .business-intro-heading h2,
  .business-products-content h2,
  .business-ecosystem-content h2 {
    font-size: clamp(32px, 9vw, 43px);
  }

  .business-intro-content p {
    font-size: 14px;
  }

  .business-solution-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .business-solution-card {
    min-height: 250px;

    padding: 20px;
  }

  .business-solution-card-top {
    margin-bottom: 28px;
  }

  .business-solution-card-content h3 {
    font-size: 19px;
  }

  .business-solution-card-content p {
    font-size: 12px;
  }

  .business-ecosystem-grid {
    gap: 40px;
  }

  .business-ecosystem-visual {
    width: min(100%, 370px);
  }

  .business-ecosystem-center {
    width: 120px;
    height: 120px;

    border-width: 6px;
  }

  .business-ecosystem-center strong {
    font-size: 13px;
  }

  .business-ecosystem-center small {
    font-size: 6px;
  }

  .business-ecosystem-node {
    gap: 6px;

    padding: 7px 9px;

    border-radius: 9px;

    font-size: 8px;
  }

  .business-ecosystem-node span {
    width: 21px;
    height: 21px;

    border-radius: 6px;

    font-size: 9px;
  }

  .business-node-team {
    left: 0;
  }

  .business-node-workflow {
    right: 0;
  }

  .business-node-tasks {
    left: 0;
  }

  .business-node-reports {
    right: 0;
  }

  .business-ecosystem-content > p {
    font-size: 14px;
  }

  .business-ecosystem-item {
    grid-template-columns: 30px 1fr;

    gap: 10px;

    padding: 15px 0;
  }

  .business-ecosystem-item h3 {
    font-size: 14px;
  }

  .business-ecosystem-item p {
    font-size: 11px;
  }

  .business-industry-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .business-industry-card {
    min-height: 290px;

    padding: 21px;
  }

  .business-industry-top {
    margin-bottom: 40px;
  }

  .business-industry-content h3 {
    font-size: 20px;
  }

  .business-industry-content p {
    font-size: 12px;
  }

  .business-products-grid {
    gap: 35px;
  }

  .business-products-content p {
    font-size: 14px;
  }

  .business-product-stack {
    padding: 14px;

    border-radius: 16px;
  }

  .business-product-card {
    padding: 13px;

    gap: 10px;
  }

  .business-product-icon {
    width: 40px;
    height: 40px;

    flex-basis: 40px;
  }

  .business-product-card-content strong {
    font-size: 13px;
  }

  .business-product-card-content span {
    font-size: 8px;
  }

  .business-product-arrow {
    font-size: 15px;
  }

  .business-product-mini-grid {
    grid-template-columns: 1fr;
  }

  .business-product-mini {
    padding: 10px;
  }

  .business-benefits-grid {
    grid-template-columns: 1fr;

    gap: 10px;
  }

  .business-benefit-card {
    min-height: 205px;

    padding: 20px;
  }

  .business-benefit-card h3 {
    font-size: 18px;
  }

  .business-benefit-card p {
    font-size: 11px;
  }

  .business-workflow {
    padding: 78px 0;
  }

  .business-workflow-grid {
    gap: 40px;
  }

  .business-workflow-content h2 {
    font-size: clamp(34px, 9vw, 44px);
  }

  .business-workflow-content p {
    font-size: 14px;
  }

  .business-workflow-step {
    grid-template-columns: 42px 1fr;

    gap: 13px;

    padding: 21px 0;
  }

  .business-workflow-step > span {
    width: 36px;
    height: 36px;
  }

  .business-workflow-step h3 {
    font-size: 18px;
  }

  .business-workflow-step p {
    font-size: 11px;
  }

  .business-cta {
    padding: 85px 0;
  }

  .business-cta h2 {
    font-size: clamp(37px, 10vw, 50px);
  }

  .business-cta-content > p {
    font-size: 14px;
  }

  .business-cta-actions {
    flex-direction: column;

    gap: 17px;
  }

  .business-cta-actions .btn {
    width: 100%;
  }

  .site-footer {
    padding-top: 55px;
  }

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

    gap: 35px 22px;

    padding-bottom: 40px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-column h3 {
    margin-bottom: 13px;

    font-size: 12px;
  }

  .footer-column a {
    margin-bottom: 8px;

    font-size: 10px;
  }

  .footer-bottom {
    flex-direction: column;

    align-items: flex-start;

    gap: 10px;
  }
}

/* =========================================================
   28. SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .container {
    width: calc(100% - 26px);
  }

  .brand img {
    width: 140px;
  }

  .business-hero {
    padding-top: calc(var(--header-height) + 42px);
  }

  .business-hero h1 {
    font-size: 36px;
  }

  .business-dashboard-welcome h3 {
    font-size: 13px;
  }

  .business-dashboard-status {
    display: none;
  }

  .business-dashboard-stats {
    grid-template-columns: 1fr;
  }

  .business-mini-stat {
    flex-direction: row;

    align-items: center;
  }

  .business-mini-stat small {
    display: block;
  }

  .business-dashboard-panel {
    padding: 12px;
  }

  .business-ecosystem-visual {
    width: 100%;

    min-height: 310px;
  }

  .business-ecosystem-center {
    width: 105px;
    height: 105px;
  }

  .business-ecosystem-center span {
    width: 25px;
    height: 25px;
  }

  .business-ecosystem-node {
    font-size: 7px;
  }

  .business-product-card-content small {
    font-size: 6px;
  }

  .business-product-card-content strong {
    font-size: 11px;
  }

  .business-product-card-content span {
    display: none;
  }

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

/* =========================================================
   29. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;

    transform: none;
  }

  .business-dashboard {
    transform: none;
  }
}

/* =========================================================
   30. PRINT
========================================================= */

/* Industries School */

/* =========================================================
   KAMAL GROUP OF CORPORATE
   INDUSTRIES / SCHOOLS PAGE
   Complete Page Stylesheet
========================================================= */

/* =========================================================
   01. ROOT / VARIABLES
========================================================= */

:root {
  --kgc-navy: #081a33;
  --kgc-navy-2: #0b2345;
  --kgc-blue: #1264d8;
  --kgc-blue-dark: #0b4fae;
  --kgc-blue-light: #eaf3ff;

  --kgc-purple: #7257d9;
  --kgc-purple-light: #f0edff;

  --kgc-green: #159b68;
  --kgc-green-light: #eaf9f3;

  --kgc-cyan: #089bb5;
  --kgc-cyan-light: #e9f9fc;

  --kgc-orange: #ef8b28;
  --kgc-orange-light: #fff4e8;

  --kgc-red: #dc4d5c;

  --kgc-white: #ffffff;
  --kgc-black: #07111f;

  --kgc-text: #18263a;
  --kgc-text-soft: #5d6b7e;
  --kgc-text-light: #8290a2;

  --kgc-border: #e3e9f1;
  --kgc-border-dark: rgba(255, 255, 255, 0.12);

  --kgc-bg: #ffffff;
  --kgc-bg-soft: #f6f9fc;
  --kgc-bg-blue: #f3f8ff;

  --kgc-shadow-sm: 0 8px 25px rgba(8, 26, 51, 0.06);
  --kgc-shadow-md: 0 18px 45px rgba(8, 26, 51, 0.09);
  --kgc-shadow-lg: 0 30px 80px rgba(8, 26, 51, 0.14);

  --kgc-radius-sm: 10px;
  --kgc-radius-md: 16px;
  --kgc-radius-lg: 24px;
  --kgc-radius-xl: 32px;

  --kgc-container: 1240px;

  --kgc-transition: 0.3s ease;
  --kgc-transition-slow: 0.6s ease;
}

/* =========================================================
   03. CONTAINER / GLOBAL UTILITIES
========================================================= */

.schools-page .container {
  width: min(calc(100% - 48px), var(--kgc-container));
  margin-inline: auto;
}

.schools-page .section {
  position: relative;
  padding: 110px 0;
}

.schools-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--kgc-blue);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.schools-page .eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
}

.schools-page .section-heading {
  max-width: 760px;
  margin: 0 auto 60px;
  text-align: center;
}

.schools-page .section-heading h2 {
  margin-bottom: 20px;
  font-size: clamp(34px, 4vw, 56px);
}

.schools-page .section-heading h2 span {
  color: var(--kgc-blue);
}

.schools-page .section-heading p {
  max-width: 680px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.8;
}

/* =========================================================
   04. BUTTONS
========================================================= */

.schools-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform var(--kgc-transition),
    background var(--kgc-transition),
    border-color var(--kgc-transition),
    color var(--kgc-transition),
    box-shadow var(--kgc-transition);
}

.schools-page .btn:hover {
  transform: translateY(-2px);
}

.schools-page .btn-primary {
  color: #ffffff;
  background: var(--kgc-blue);
  box-shadow: 0 12px 30px rgba(18, 100, 216, 0.2);
}

.schools-page .btn-primary:hover {
  background: var(--kgc-blue-dark);
  box-shadow: 0 16px 35px rgba(18, 100, 216, 0.28);
}

.schools-page .btn-secondary {
  color: var(--kgc-navy);
  background: #ffffff;
  border-color: var(--kgc-border);
}

.schools-page .btn-secondary:hover {
  border-color: var(--kgc-blue);
  color: var(--kgc-blue);
}

.schools-page .btn-large {
  min-height: 56px;
  padding: 16px 25px;
  border-radius: 12px;
  font-size: 15px;
}

.schools-page .btn-light {
  color: var(--kgc-navy);
  background: #ffffff;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
}

.schools-page .btn-light:hover {
  background: #f1f6fb;
}

/* =========================================================
   05. HEADER
========================================================= */

.schools-page .site-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(227, 233, 241, 0.8);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    box-shadow var(--kgc-transition),
    background var(--kgc-transition);
}

.schools-page .site-header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 30px rgba(8, 26, 51, 0.08);
}

.schools-page .header-inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 82px;
  gap: 28px;
}

.schools-page .brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.schools-page .brand img {
  width: 180px;
  height: 50px;
  object-fit: contain;
}

/* =========================================================
   06. DESKTOP NAVIGATION
========================================================= */

.schools-page .main-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-left: auto;
}

.schools-page .nav-item {
  position: static;
}

.schools-page .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  color: #27364a;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  transition:
    color var(--kgc-transition),
    background var(--kgc-transition);
}

.schools-page .nav-link:hover,
.schools-page .mega-parent.active > .nav-link {
  color: var(--kgc-blue);
}

.schools-page .mega-trigger svg {
  transition: transform var(--kgc-transition);
}

.schools-page .mega-parent.active .mega-trigger svg {
  transform: rotate(180deg);
}

/* =========================================================
   07. MEGA MENUS
========================================================= */

.schools-page .mega-menu {
  position: absolute;
  z-index: 100;
  top: calc(100% + 1px);
  left: 50%;
  width: min(1160px, calc(100vw - 40px));
  padding: 0;
  border: 1px solid var(--kgc-border);
  border-radius: 0 0 22px 22px;
  background: #ffffff;
  box-shadow: var(--kgc-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;
  pointer-events: none;
}

.schools-page .mega-parent:hover .mega-menu,
.schools-page .mega-parent.active .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.schools-page .mega-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 45px;
  padding: 34px;
}

.schools-page .mega-intro {
  padding-right: 24px;
  border-right: 1px solid var(--kgc-border);
}

.schools-page .mega-label {
  display: block;
  margin-bottom: 12px;
  color: var(--kgc-blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.schools-page .mega-intro h3 {
  margin-bottom: 12px;
  font-size: 21px;
  line-height: 1.25;
}

.schools-page .mega-intro p {
  margin-bottom: 18px;
  font-size: 12px;
  line-height: 1.7;
}

.schools-page .mega-view-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--kgc-blue);
  font-size: 12px;
  font-weight: 700;
}

.schools-page .mega-view-all span {
  transition: transform var(--kgc-transition);
}

.schools-page .mega-view-all:hover span {
  transform: translateX(4px);
}

.schools-page .mega-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.schools-page .mega-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.schools-page .mega-product,
.schools-page .mega-solution,
.schools-page .industry-menu-card,
.schools-page .resource-menu-card,
.schools-page .company-menu-links a {
  transition:
    background var(--kgc-transition),
    transform var(--kgc-transition),
    border-color var(--kgc-transition);
}

.schools-page .mega-product {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
}

.schools-page .mega-product:hover {
  background: var(--kgc-bg-soft);
  transform: translateX(3px);
}

.schools-page .mega-product > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.schools-page .mega-product strong,
.schools-page .mega-solution strong {
  color: var(--kgc-navy);
  font-size: 13px;
}

.schools-page .mega-product small,
.schools-page .mega-solution small {
  color: var(--kgc-text-light);
  font-size: 11px;
}

.schools-page .mega-icon,
.schools-page .solution-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  font-size: 18px;
}

.schools-page .mega-icon.blue,
.schools-page .solution-icon.blue {
  background: var(--kgc-blue-light);
  color: var(--kgc-blue);
}

.schools-page .mega-icon.green,
.schools-page .solution-icon.green {
  background: var(--kgc-green-light);
  color: var(--kgc-green);
}

.schools-page .mega-icon.dark {
  color: #ffffff;
  background: var(--kgc-navy);
}

.schools-page .mega-solution-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.schools-page .mega-solution {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px;
  border: 1px solid transparent;
  border-radius: 14px;
}

.schools-page .mega-solution:hover {
  background: var(--kgc-bg-soft);
  border-color: var(--kgc-border);
  transform: translateY(-2px);
}

.schools-page .mega-solution > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.schools-page .solution-icon.purple {
  color: var(--kgc-purple);
  background: var(--kgc-purple-light);
}

/* Industries */

.schools-page .mega-industry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.schools-page .industry-menu-card {
  display: flex;
  flex-direction: column;
  min-height: 120px;
  padding: 18px;
  border: 1px solid var(--kgc-border);
  border-radius: 15px;
}

.schools-page .industry-menu-card:hover {
  border-color: rgba(18, 100, 216, 0.3);
  background: var(--kgc-bg-blue);
  transform: translateY(-2px);
}

.schools-page .industry-menu-card > span {
  margin-bottom: auto;
  color: var(--kgc-blue);
  font-size: 10px;
  font-weight: 800;
}

.schools-page .industry-menu-card strong {
  margin-bottom: 3px;
  color: var(--kgc-navy);
  font-size: 13px;
}

.schools-page .industry-menu-card small {
  color: var(--kgc-text-light);
  font-size: 10px;
}

/* Resources */

.schools-page .resource-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.schools-page .resource-menu-card {
  display: flex;
  flex-direction: column;
  padding: 15px;
  border-radius: 13px;
}

.schools-page .resource-menu-card:hover {
  background: var(--kgc-bg-soft);
  transform: translateY(-2px);
}

.schools-page .resource-menu-card > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  border-radius: 9px;
  color: var(--kgc-blue);
  background: var(--kgc-blue-light);
  font-weight: 800;
}

.schools-page .resource-menu-card strong {
  color: var(--kgc-navy);
  font-size: 13px;
}

.schools-page .resource-menu-card small {
  margin-top: 4px;
  color: var(--kgc-text-light);
  font-size: 10px;
}

/* Company */

.schools-page .company-menu-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.schools-page .company-menu-links a {
  display: flex;
  flex-direction: column;
  padding: 15px;
  border-radius: 13px;
}

.schools-page .company-menu-links a:hover {
  background: var(--kgc-bg-soft);
  transform: translateY(-2px);
}

.schools-page .company-menu-links strong {
  color: var(--kgc-navy);
  font-size: 13px;
}

.schools-page .company-menu-links small {
  margin-top: 4px;
  color: var(--kgc-text-light);
  font-size: 10px;
}

/* =========================================================
   08. HEADER ACTIONS
========================================================= */

.schools-page .header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: 10px;
}

.schools-page .header-contact {
  color: var(--kgc-navy);
  font-size: 13px;
  font-weight: 600;
}

.schools-page .header-contact:hover {
  color: var(--kgc-blue);
}

.schools-page .header-demo {
  min-height: 43px;
  padding: 11px 17px;
  font-size: 12px;
}

/* =========================================================
   09. MOBILE HEADER
========================================================= */

.schools-page .mobile-menu-button {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 8px;
  border: 0;
  background: transparent;
}

.schools-page .mobile-menu-button span {
  display: block;
  width: 24px;
  height: 2px;
  margin-left: auto;
  border-radius: 10px;
  background: var(--kgc-navy);
  transition: transform var(--kgc-transition);
}

.schools-page .mobile-menu-button[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.schools-page .mobile-menu-button[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.schools-page .mobile-menu-button[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.schools-page .mobile-navigation {
  display: none;
}

/* =========================================================
   10. SCHOOL HERO
========================================================= */

.schools-page .school-hero {
  position: relative;
  min-height: 780px;
  padding: 160px 0 90px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(18, 100, 216, 0.11),
      transparent 30%
    ),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, #eef6ff 100%);
}

.schools-page .school-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(18, 100, 216, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 100, 216, 0.055) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, 0.35) 70%,
    transparent 100%
  );
}

.schools-page .school-hero-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(500px, 0.92fr);
  align-items: center;
  gap: 70px;
}

.schools-page .school-hero-content {
  max-width: 650px;
}

.schools-page .school-solution-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--kgc-navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.schools-page .school-solution-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border-radius: 9px;
  color: #ffffff;
  background: var(--kgc-blue);
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(18, 100, 216, 0.22);
}

.schools-page .school-hero-content .eyebrow {
  margin-bottom: 18px;
}

.schools-page .school-hero-content h1 {
  max-width: 700px;
  margin-bottom: 24px;
  font-size: clamp(46px, 5.2vw, 76px);
  letter-spacing: -0.055em;
}

.schools-page .school-hero-content h1 span {
  display: block;
  color: var(--kgc-blue);
}

.schools-page .school-hero-content > p {
  max-width: 620px;
  margin-bottom: 30px;
  font-size: 17px;
  line-height: 1.85;
}

.schools-page .school-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 38px;
}

.schools-page .school-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.schools-page .school-hero-meta-item {
  display: flex;
  flex-direction: column;
  min-width: 130px;
  padding-right: 28px;
  margin-right: 28px;
  border-right: 1px solid var(--kgc-border);
}

.schools-page .school-hero-meta-item:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: 0;
}

.schools-page .school-hero-meta-item strong {
  color: var(--kgc-navy);
  font-family: "Manrope", sans-serif;
  font-size: 15px;
}

.schools-page .school-hero-meta-item span {
  color: var(--kgc-text-light);
  font-size: 11px;
}

/* =========================================================
   11. SCHOOL HERO VISUAL / DASHBOARD
========================================================= */

.schools-page .school-hero-visual {
  position: relative;
  min-height: 560px;
}

.schools-page .school-visual-glow {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(18, 100, 216, 0.12);
  filter: blur(70px);
  transform: translate(-50%, -50%);
}

.schools-page .school-dashboard {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(18, 100, 216, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 40px 90px rgba(8, 26, 51, 0.17),
    0 10px 30px rgba(18, 100, 216, 0.08);
  transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
}

.schools-page .school-dashboard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--kgc-blue), #4a8ee9, var(--kgc-cyan));
}

.schools-page .school-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--kgc-border);
}

.schools-page .school-dashboard-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.schools-page .school-dashboard-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: #ffffff;
  background: var(--kgc-navy);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.schools-page .school-dashboard-brand div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.schools-page .school-dashboard-brand small {
  color: var(--kgc-blue);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.schools-page .school-dashboard-brand strong {
  color: var(--kgc-navy);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
}

.schools-page .school-dashboard-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 99px;
  color: var(--kgc-green);
  background: var(--kgc-green-light);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.schools-page .school-dashboard-status span {
  font-size: 8px;
}

.schools-page .school-dashboard-body {
  padding: 25px;
}

.schools-page .school-dashboard-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.schools-page .school-dashboard-welcome small {
  color: var(--kgc-text-light);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.schools-page .school-dashboard-welcome h3 {
  margin: 5px 0 0;
  font-size: 19px;
}

.schools-page .school-dashboard-welcome h3 span {
  color: var(--kgc-blue);
}

.schools-page .school-date-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 65px;
  border: 1px solid var(--kgc-border);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--kgc-shadow-sm);
}

.schools-page .school-date-box span {
  color: var(--kgc-blue);
  font-size: 8px;
  font-weight: 800;
}

.schools-page .school-date-box strong {
  color: var(--kgc-navy);
  font-family: "Manrope", sans-serif;
  font-size: 21px;
  line-height: 1;
}

/* Dashboard statistics */

.schools-page .school-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 15px;
}

.schools-page .school-mini-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 75px;
  padding: 12px;
  border: 1px solid var(--kgc-border);
  border-radius: 13px;
  background: #ffffff;
}

.schools-page .school-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 800;
}

.schools-page .school-mini-icon.blue {
  color: var(--kgc-blue);
  background: var(--kgc-blue-light);
}

.schools-page .school-mini-icon.purple {
  color: var(--kgc-purple);
  background: var(--kgc-purple-light);
}

.schools-page .school-mini-icon.green {
  color: var(--kgc-green);
  background: var(--kgc-green-light);
}

.schools-page .school-mini-stat div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.schools-page .school-mini-stat strong {
  color: var(--kgc-navy);
  font-family: "Manrope", sans-serif;
  font-size: 11px;
}

.schools-page .school-mini-stat small {
  color: var(--kgc-text-light);
  font-size: 8px;
}

/* Dashboard panels */

.schools-page .school-dashboard-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 12px;
}

.schools-page .school-dashboard-panel {
  padding: 17px;
  border: 1px solid var(--kgc-border);
  border-radius: 14px;
  background: #ffffff;
}

.schools-page .school-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 17px;
}

.schools-page .school-panel-heading strong {
  color: var(--kgc-navy);
  font-family: "Manrope", sans-serif;
  font-size: 11px;
}

.schools-page .school-panel-heading span {
  color: var(--kgc-blue);
  font-size: 8px;
  font-weight: 700;
}

.schools-page .school-progress-row {
  margin-bottom: 14px;
}

.schools-page .school-progress-row:last-child {
  margin-bottom: 0;
}

.schools-page .school-progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.schools-page .school-progress-label span {
  color: var(--kgc-text-soft);
  font-size: 8px;
}

.schools-page .school-progress-label strong {
  color: var(--kgc-green);
  font-size: 8px;
}

.schools-page .school-progress {
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: #edf1f6;
}

.schools-page .school-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--kgc-blue), #56a2ed);
}

.schools-page .school-notification-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(145deg, var(--kgc-navy), #0d3567);
  box-shadow: 0 18px 40px rgba(8, 26, 51, 0.16);
}

.schools-page .school-notification-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border-radius: 9px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.schools-page .school-notification-panel div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.schools-page .school-notification-panel strong {
  font-family: "Manrope", sans-serif;
  font-size: 10px;
}

.schools-page .school-notification-panel small {
  color: rgba(255, 255, 255, 0.65);
  font-size: 8px;
  line-height: 1.5;
}

.schools-page .school-dashboard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 22px;
  color: #8b9aad;
  background: #f8fafc;
  border-top: 1px solid var(--kgc-border);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

/* =========================================================
   12. INTRO SECTION
========================================================= */

.schools-page .school-intro {
  background: #ffffff;
}

.schools-page .school-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 90px;
  align-items: start;
}

.schools-page .school-intro-heading h2 {
  margin: 0;
  font-size: clamp(36px, 4vw, 54px);
}

.schools-page .school-intro-heading h2 span {
  display: block;
  color: var(--kgc-blue);
}

.schools-page .school-intro-content {
  max-width: 650px;
}

.schools-page .school-intro-content p {
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.9;
}

.schools-page .school-intro-content p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   13. SCHOOL SOLUTIONS
========================================================= */

.schools-page .school-solutions {
  background: var(--kgc-bg-soft);
}

.schools-page .school-solution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.schools-page .school-solution-card {
  position: relative;
  min-height: 285px;
  padding: 25px;
  overflow: hidden;
  border: 1px solid var(--kgc-border);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 5px 20px rgba(8, 26, 51, 0.025);
  transition:
    transform var(--kgc-transition),
    box-shadow var(--kgc-transition),
    border-color var(--kgc-transition);
}

.schools-page .school-solution-card:hover {
  border-color: rgba(18, 100, 216, 0.22);
  box-shadow: var(--kgc-shadow-md);
  transform: translateY(-7px);
}

.schools-page .school-solution-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 42px;
}

.schools-page .school-solution-number {
  color: #a4afbd;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.schools-page .school-solution-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  font-size: 19px;
  font-weight: 800;
}

.schools-page .school-solution-icon.blue {
  color: var(--kgc-blue);
  background: var(--kgc-blue-light);
}

.schools-page .school-solution-icon.purple {
  color: var(--kgc-purple);
  background: var(--kgc-purple-light);
}

.schools-page .school-solution-icon.green {
  color: var(--kgc-green);
  background: var(--kgc-green-light);
}

.schools-page .school-solution-icon.orange {
  color: var(--kgc-orange);
  background: var(--kgc-orange-light);
}

.schools-page .school-solution-icon.cyan {
  color: var(--kgc-cyan);
  background: var(--kgc-cyan-light);
}

.schools-page .school-solution-icon.dark {
  color: #ffffff;
  background: var(--kgc-navy);
}

.schools-page .school-solution-card-content h3 {
  margin-bottom: 10px;
  font-size: 21px;
}

.schools-page .school-solution-card-content p {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
}

.schools-page .school-solution-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--kgc-blue);
  transition: width var(--kgc-transition);
}

.schools-page .school-solution-card:hover .school-solution-line {
  width: 100%;
}

/* =========================================================
   14. SCHOOL ECOSYSTEM
========================================================= */

.schools-page .school-ecosystem {
  background: #ffffff;
}

.schools-page .school-ecosystem-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 90px;
}

/* Ecosystem visual */

.schools-page .school-ecosystem-visual {
  position: relative;
  min-height: 570px;
}

.schools-page .school-ecosystem-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px dashed rgba(18, 100, 216, 0.24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.schools-page .school-orbit-one {
  width: 350px;
  height: 350px;
}

.schools-page .school-orbit-two {
  width: 500px;
  height: 500px;
  border-color: rgba(18, 100, 216, 0.13);
}

.schools-page .school-ecosystem-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 175px;
  height: 175px;
  border-radius: 50%;
  color: #ffffff;
  background: radial-gradient(circle at 30% 25%, #17487f, var(--kgc-navy) 65%);
  box-shadow:
    0 25px 60px rgba(8, 26, 51, 0.2),
    0 0 0 12px rgba(18, 100, 216, 0.06);
  transform: translate(-50%, -50%);
}

.schools-page .school-ecosystem-center span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 7px;
  border-radius: 11px;
  color: var(--kgc-navy);
  background: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 19px;
  font-weight: 800;
}

.schools-page .school-ecosystem-center strong {
  font-family: "Manrope", sans-serif;
  font-size: 17px;
  letter-spacing: 0.04em;
}

.schools-page .school-ecosystem-center small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 8px;
  letter-spacing: 0.04em;
}

/* Ecosystem nodes */

.schools-page .school-ecosystem-node {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--kgc-border);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--kgc-shadow-sm);
}

.schools-page .school-ecosystem-node span {
  font-size: 14px;
}

.schools-page .school-ecosystem-node strong {
  color: var(--kgc-navy);
  font-family: "Manrope", sans-serif;
  font-size: 11px;
}

.schools-page .school-node-students {
  top: 12%;
  left: 16%;
}

.schools-page .school-node-academics {
  top: 18%;
  right: 8%;
}

.schools-page .school-node-admin {
  bottom: 16%;
  left: 9%;
}

.schools-page .school-node-parents {
  right: 13%;
  bottom: 12%;
}

.schools-page .school-node-students span {
  color: var(--kgc-blue);
}

.schools-page .school-node-academics span {
  color: var(--kgc-purple);
}

.schools-page .school-node-admin span {
  color: var(--kgc-green);
}

.schools-page .school-node-parents span {
  color: var(--kgc-orange);
}

/* Ecosystem content */

.schools-page .school-ecosystem-content h2 {
  margin-bottom: 20px;
  font-size: clamp(36px, 4vw, 55px);
}

.schools-page .school-ecosystem-content h2 span {
  display: block;
  color: var(--kgc-blue);
}

.schools-page .school-ecosystem-content > p {
  margin-bottom: 32px;
  font-size: 15px;
  line-height: 1.85;
}

.schools-page .school-ecosystem-list {
  display: flex;
  flex-direction: column;
}

.schools-page .school-ecosystem-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 17px;
  padding: 18px 0;
  border-top: 1px solid var(--kgc-border);
}

.schools-page .school-ecosystem-item:last-child {
  border-bottom: 1px solid var(--kgc-border);
}

.schools-page .school-ecosystem-item > span {
  color: var(--kgc-blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.schools-page .school-ecosystem-item h3 {
  margin-bottom: 5px;
  font-size: 16px;
}

.schools-page .school-ecosystem-item p {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
}

/* =========================================================
   15. WHO WE SERVE
========================================================= */

.schools-page .school-industries {
  background: var(--kgc-bg-soft);
}

.schools-page .school-industry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.schools-page .school-industry-card {
  display: flex;
  flex-direction: column;
  min-height: 310px;
  padding: 25px;
  border: 1px solid var(--kgc-border);
  border-radius: 18px;
  background: #ffffff;
  transition:
    transform var(--kgc-transition),
    box-shadow var(--kgc-transition),
    border-color var(--kgc-transition);
}

.schools-page .school-industry-card:hover {
  border-color: rgba(18, 100, 216, 0.25);
  box-shadow: var(--kgc-shadow-md);
  transform: translateY(-7px);
}

.schools-page .school-industry-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 50px;
}

.schools-page .school-industry-top > span {
  color: #a4afbd;
  font-size: 11px;
  font-weight: 800;
}

.schools-page .school-industry-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  font-size: 20px;
}

.schools-page .school-industry-icon.blue {
  color: var(--kgc-blue);
  background: var(--kgc-blue-light);
}

.schools-page .school-industry-icon.purple {
  color: var(--kgc-purple);
  background: var(--kgc-purple-light);
}

.schools-page .school-industry-icon.green {
  color: var(--kgc-green);
  background: var(--kgc-green-light);
}

.schools-page .school-industry-content h3 {
  margin-bottom: 10px;
  font-size: 22px;
}

.schools-page .school-industry-content p {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
}

.schools-page .school-industry-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 28px;
  color: var(--kgc-blue);
  font-size: 12px;
  font-weight: 800;
}

.schools-page .school-industry-link span {
  transition: transform var(--kgc-transition);
}

.schools-page .school-industry-card:hover .school-industry-link span {
  transform: translateX(5px);
}

/* =========================================================
   16. PRODUCT CONNECTION
========================================================= */

.schools-page .school-products {
  background: #ffffff;
}

.schools-page .school-products-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: center;
  gap: 90px;
}

.schools-page .school-products-content {
  max-width: 570px;
}

.schools-page .school-products-content h2 {
  margin-bottom: 20px;
  font-size: clamp(36px, 4vw, 54px);
}

.schools-page .school-products-content h2 span {
  display: block;
  color: var(--kgc-blue);
}

.schools-page .school-products-content p {
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.85;
}

.schools-page .school-products-content .btn {
  margin-top: 14px;
}

.schools-page .school-product-stack {
  position: relative;
  padding: 25px;
  border-radius: 25px;
  background: linear-gradient(145deg, #f7faff, #eef6ff);
  border: 1px solid rgba(18, 100, 216, 0.1);
}

.schools-page .school-product-card {
  display: flex;
  align-items: center;
  gap: 15px;
}

.schools-page .school-product-main {
  position: relative;
  padding: 22px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--kgc-navy), #123c72);
  box-shadow: 0 20px 40px rgba(8, 26, 51, 0.15);
  transition: transform var(--kgc-transition);
}

.schools-page .school-product-main:hover {
  transform: translateY(-4px);
}

.schools-page .school-product-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 13px;
  font-size: 19px;
}

.schools-page .school-product-icon.green {
  color: var(--kgc-green);
  background: rgba(255, 255, 255, 0.1);
}

.schools-page .school-product-card-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.schools-page .school-product-card-content small {
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.schools-page .school-product-card-content strong {
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
}

.schools-page .school-product-card-content span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.63);
  font-size: 10px;
}

.schools-page .school-product-arrow {
  margin-left: auto;
  color: #ffffff;
  font-size: 20px;
  transition: transform var(--kgc-transition);
}

.schools-page .school-product-main:hover .school-product-arrow {
  transform: translateX(5px);
}

.schools-page .school-product-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.schools-page .school-product-mini {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--kgc-border);
  border-radius: 14px;
  background: #ffffff;
}

.schools-page .school-product-mini > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  margin-bottom: 10px;
  border-radius: 8px;
  color: var(--kgc-blue);
  background: var(--kgc-blue-light);
  font-size: 12px;
  font-weight: 800;
}

.schools-page .school-product-mini strong {
  color: var(--kgc-navy);
  font-family: "Manrope", sans-serif;
  font-size: 11px;
}

.schools-page .school-product-mini small {
  margin-top: 3px;
  color: var(--kgc-text-light);
  font-size: 9px;
  line-height: 1.5;
}

/* =========================================================
   17. BENEFITS
========================================================= */

.schools-page .school-benefits {
  background: var(--kgc-bg-soft);
}

.schools-page .school-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.schools-page .school-benefit-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  padding: 26px;
  border: 1px solid var(--kgc-border);
  border-radius: 17px;
  background: #ffffff;
  transition:
    transform var(--kgc-transition),
    box-shadow var(--kgc-transition);
}

.schools-page .school-benefit-card:hover {
  box-shadow: var(--kgc-shadow-md);
  transform: translateY(-4px);
}

.schools-page .school-benefit-card > span {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  color: var(--kgc-blue);
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.schools-page .school-benefit-card h3 {
  margin-bottom: 7px;
  font-size: 19px;
}

.schools-page .school-benefit-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.75;
}

/* =========================================================
   18. SCHOOL WORKFLOW
========================================================= */

.schools-page .school-workflow {
  position: relative;
  padding: 110px 0;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(30, 108, 210, 0.35),
      transparent 35%
    ),
    linear-gradient(135deg, #07172d, #0a2447);
  overflow: hidden;
}

.schools-page .school-workflow::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 55px 55px;
}

.schools-page .school-workflow .container {
  position: relative;
  z-index: 2;
}

.schools-page .school-workflow-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 90px;
  align-items: start;
}

.schools-page .school-workflow-content {
  position: sticky;
  top: 130px;
}

.schools-page .school-workflow-content .eyebrow {
  color: #67b1ff;
}

.schools-page .school-workflow-content h2 {
  margin-bottom: 20px;
  color: #ffffff;
  font-size: clamp(36px, 4vw, 54px);
}

.schools-page .school-workflow-content h2 span {
  display: block;
  color: #62b0ff;
}

.schools-page .school-workflow-content p {
  max-width: 520px;
  margin: 0;
  color: rgba(255, 255, 255, 0.67);
  font-size: 14px;
  line-height: 1.85;
}

.schools-page .school-workflow-steps {
  display: flex;
  flex-direction: column;
}

.schools-page .school-workflow-step {
  display: grid;
  grid-template-columns: 65px 1fr;
  gap: 25px;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.schools-page .school-workflow-step:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.schools-page .school-workflow-step > span {
  color: #60adff;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.schools-page .school-workflow-step h3 {
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 20px;
}

.schools-page .school-workflow-step p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  line-height: 1.75;
}

/* =========================================================
   19. FINAL CTA
========================================================= */

.schools-page .school-cta {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  text-align: center;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(39, 126, 236, 0.4),
      transparent 34%
    ),
    linear-gradient(135deg, #0a2b58, #07172d);
}

.schools-page .school-cta-grid {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 60px 60px;
}

.schools-page .school-cta-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.schools-page .school-cta-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 24px;
  border-radius: 16px;
  color: var(--kgc-navy);
  background: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 25px;
  font-weight: 800;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.schools-page .school-cta-content .eyebrow {
  color: #69b3ff;
}

.schools-page .school-cta-content h2 {
  margin-bottom: 20px;
  color: #ffffff;
  font-size: clamp(38px, 5vw, 64px);
}

.schools-page .school-cta-content h2 span {
  display: block;
  color: #68b4ff;
}

.schools-page .school-cta-content > p {
  max-width: 680px;
  margin: 0 auto 32px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 15px;
  line-height: 1.85;
}

.schools-page .school-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.schools-page .school-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.schools-page .school-cta-link span {
  transition: transform var(--kgc-transition);
}

.schools-page .school-cta-link:hover span {
  transform: translateX(4px);
}

/* =========================================================
   20. FOOTER
========================================================= */

.schools-page .site-footer {
  color: rgba(255, 255, 255, 0.68);
  background: #061327;
}

.schools-page .footer-grid {
  display: grid;
  grid-template-columns: 1.8fr repeat(5, 1fr);
  gap: 40px;
  padding-top: 80px;
  padding-bottom: 65px;
}

.schools-page .footer-brand {
  max-width: 310px;
}

.schools-page .footer-brand img {
  width: 180px;
  height: 50px;
  object-fit: contain;
  margin-bottom: 18px;
}

.schools-page .footer-brand p {
  margin-bottom: 25px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  line-height: 1.75;
}

.schools-page .footer-social-label {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.schools-page .footer-social-links {
  display: flex;
  gap: 8px;
}

.schools-page .footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.04);
  transition:
    color var(--kgc-transition),
    background var(--kgc-transition),
    transform var(--kgc-transition);
}

.schools-page .footer-social-link:hover {
  color: #ffffff;
  background: var(--kgc-blue);
  transform: translateY(-3px);
}

.schools-page .footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.schools-page .footer-column h3 {
  margin-bottom: 17px;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  letter-spacing: 0;
}

.schools-page .footer-column a {
  margin-bottom: 9px;
  color: rgba(255, 255, 255, 0.53);
  font-size: 11px;
  line-height: 1.55;
  transition:
    color var(--kgc-transition),
    transform var(--kgc-transition);
}

.schools-page .footer-column a:hover {
  color: #ffffff;
  transform: translateX(3px);
}

.schools-page .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  min-height: 75px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.schools-page .footer-bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
}

.schools-page .footer-bottom > div {
  display: flex;
  gap: 22px;
}

.schools-page .footer-bottom a {
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  transition: color var(--kgc-transition);
}

.schools-page .footer-bottom a:hover {
  color: #ffffff;
}

/* =========================================================
   21. SCROLL REVEAL
========================================================= */

.schools-page .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.schools-page .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   22. ACCESSIBILITY
========================================================= */

.schools-page a:focus-visible,
.schools-page button:focus-visible {
  outline: 3px solid rgba(18, 100, 216, 0.35);
  outline-offset: 3px;
}

.schools-page .mega-menu a:focus-visible {
  outline-offset: -2px;
}

/* =========================================================
   23. TABLET
========================================================= */

@media (max-width: 1180px) {
  .schools-page .main-navigation {
    gap: 0;
  }

  .schools-page .nav-link {
    padding-inline: 9px;
    font-size: 12px;
  }

  .schools-page .header-actions {
    gap: 9px;
  }

  .schools-page .header-contact {
    display: none;
  }

  .schools-page .school-hero-container {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
    gap: 45px;
  }

  .schools-page .school-hero-content h1 {
    font-size: clamp(44px, 5.5vw, 64px);
  }

  .schools-page .school-ecosystem-grid,
  .schools-page .school-products-grid,
  .schools-page .school-workflow-grid {
    gap: 55px;
  }

  .schools-page .footer-grid {
    grid-template-columns: 1.5fr repeat(3, 1fr);
  }

  .schools-page .footer-brand {
    grid-row: span 2;
  }
}

/* =========================================================
   24. TABLET / MOBILE NAV BREAKPOINT
========================================================= */

@media (max-width: 980px) {
  .schools-page .main-navigation,
  .schools-page .header-actions {
    display: none;
  }

  .schools-page .mobile-menu-button {
    display: flex;
  }

  .schools-page .mobile-navigation {
    display: block;
    position: fixed;
    z-index: 999;
    top: 82px;
    right: 0;
    left: 0;
    height: calc(100vh - 82px);
    padding: 20px 24px 35px;
    overflow-y: auto;
    background: #ffffff;
    border-top: 1px solid var(--kgc-border);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
      opacity var(--kgc-transition),
      visibility var(--kgc-transition),
      transform var(--kgc-transition);
  }

  .schools-page .mobile-navigation.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .schools-page .mobile-navigation > a,
  .schools-page .mobile-nav-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 13px 3px;
    border: 0;
    border-bottom: 1px solid var(--kgc-border);
    color: var(--kgc-navy);
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
  }

  .schools-page .mobile-nav-trigger span {
    color: var(--kgc-blue);
    font-size: 19px;
    font-weight: 400;
    transition: transform var(--kgc-transition);
  }

  .schools-page .mobile-nav-group.open .mobile-nav-trigger span {
    transform: rotate(45deg);
  }

  .schools-page .mobile-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }

  .schools-page .mobile-submenu a {
    display: block;
    padding: 11px 15px;
    color: var(--kgc-text-soft);
    font-size: 13px;
    border-bottom: 1px solid #f0f3f7;
  }

  .schools-page .mobile-submenu a:hover {
    color: var(--kgc-blue);
    background: var(--kgc-bg-soft);
  }

  .schools-page .mobile-demo-button {
    justify-content: center !important;
    margin-top: 20px;
    border: 0 !important;
    border-radius: 10px;
    color: #ffffff !important;
    background: var(--kgc-blue) !important;
  }

  .schools-page .school-hero {
    padding-top: 140px;
  }

  .schools-page .school-hero-container {
    grid-template-columns: 1fr;
  }

  .schools-page .school-hero-content {
    max-width: 800px;
  }

  .schools-page .school-hero-visual {
    max-width: 760px;
    margin: 0 auto;
  }

  .schools-page .school-intro-grid,
  .schools-page .school-products-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .schools-page .school-ecosystem-grid {
    grid-template-columns: 1fr;
  }

  .schools-page .school-ecosystem-visual {
    max-width: 650px;
    width: 100%;
    margin: 0 auto;
  }

  .schools-page .school-ecosystem-content {
    max-width: 760px;
    margin: 0 auto;
  }

  .schools-page .school-workflow-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .schools-page .school-workflow-content {
    position: static;
  }

  .schools-page .school-products-content {
    max-width: 760px;
  }

  .schools-page .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .schools-page .footer-brand {
    grid-column: 1 / -1;
    grid-row: auto;
    max-width: 500px;
  }
}

/* =========================================================
   25. MOBILE
========================================================= */

@media (max-width: 760px) {
  .schools-page .container {
    width: min(calc(100% - 32px), var(--kgc-container));
  }

  .schools-page .section {
    padding: 78px 0;
  }

  .schools-page .site-header {
    height: 72px;
  }

  .schools-page .header-inner {
    min-height: 72px;
  }

  .schools-page .brand img {
    width: 155px;
    height: 44px;
  }

  .schools-page .mobile-navigation {
    top: 72px;
    height: calc(100vh - 72px);
  }

  .schools-page .school-hero {
    min-height: auto;
    padding: 125px 0 70px;
  }

  .schools-page .school-hero-content h1 {
    margin-bottom: 20px;
    font-size: clamp(39px, 12vw, 58px);
  }

  .schools-page .school-hero-content > p {
    font-size: 14px;
    line-height: 1.8;
  }

  .schools-page .school-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .schools-page .school-hero-actions .btn {
    width: 100%;
  }

  .schools-page .school-hero-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .schools-page .school-hero-meta-item {
    min-width: 0;
    padding-right: 10px;
    margin-right: 10px;
  }

  .schools-page .school-hero-meta-item strong {
    font-size: 12px;
  }

  .schools-page .school-hero-meta-item span {
    font-size: 9px;
  }

  .schools-page .school-hero-visual {
    min-height: auto;
  }

  .schools-page .school-dashboard {
    border-radius: 17px;
    transform: none;
  }

  .schools-page .school-dashboard-header {
    padding: 15px;
  }

  .schools-page .school-dashboard-body {
    padding: 15px;
  }

  .schools-page .school-dashboard-brand strong {
    font-size: 10px;
  }

  .schools-page .school-dashboard-status {
    display: none;
  }

  .schools-page .school-dashboard-welcome h3 {
    font-size: 15px;
  }

  .schools-page .school-dashboard-stats {
    grid-template-columns: 1fr;
  }

  .schools-page .school-mini-stat {
    min-height: 55px;
  }

  .schools-page .school-dashboard-panels {
    grid-template-columns: 1fr;
  }

  .schools-page .school-notification-panel {
    min-height: 120px;
  }

  .schools-page .school-dashboard-footer {
    padding-inline: 15px;
  }

  .schools-page .section-heading {
    margin-bottom: 40px;
  }

  .schools-page .section-heading h2 {
    font-size: clamp(33px, 9vw, 46px);
  }

  .schools-page .section-heading p {
    font-size: 14px;
  }

  .schools-page .school-intro-grid {
    gap: 30px;
  }

  .schools-page .school-intro-heading h2 {
    font-size: clamp(34px, 9vw, 46px);
  }

  .schools-page .school-intro-content p {
    font-size: 14px;
  }

  .schools-page .school-solution-grid,
  .schools-page .school-industry-grid {
    grid-template-columns: 1fr;
  }

  .schools-page .school-solution-card,
  .schools-page .school-industry-card {
    min-height: 260px;
  }

  .schools-page .school-ecosystem-visual {
    min-height: 420px;
  }

  .schools-page .school-orbit-one {
    width: 245px;
    height: 245px;
  }

  .schools-page .school-orbit-two {
    width: 340px;
    height: 340px;
  }

  .schools-page .school-ecosystem-center {
    width: 135px;
    height: 135px;
  }

  .schools-page .school-ecosystem-center span {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .schools-page .school-ecosystem-center strong {
    font-size: 14px;
  }

  .schools-page .school-ecosystem-center small {
    font-size: 7px;
  }

  .schools-page .school-ecosystem-node {
    padding: 8px 10px;
  }

  .schools-page .school-ecosystem-node strong {
    font-size: 9px;
  }

  .schools-page .school-node-students {
    top: 6%;
    left: 1%;
  }

  .schools-page .school-node-academics {
    top: 10%;
    right: 0;
  }

  .schools-page .school-node-admin {
    bottom: 8%;
    left: 0;
  }

  .schools-page .school-node-parents {
    right: 1%;
    bottom: 5%;
  }

  .schools-page .school-ecosystem-content h2,
  .schools-page .school-products-content h2,
  .schools-page .school-workflow-content h2 {
    font-size: clamp(34px, 9vw, 46px);
  }

  .schools-page .school-ecosystem-content > p,
  .schools-page .school-products-content p,
  .schools-page .school-workflow-content p {
    font-size: 13px;
  }

  .schools-page .school-products-grid {
    gap: 40px;
  }

  .schools-page .school-product-stack {
    padding: 15px;
  }

  .schools-page .school-product-main {
    padding: 17px;
  }

  .schools-page .school-product-mini-grid {
    grid-template-columns: 1fr;
  }

  .schools-page .school-benefits-grid {
    grid-template-columns: 1fr;
  }

  .schools-page .school-benefit-card {
    grid-template-columns: 38px 1fr;
    padding: 21px;
  }

  .schools-page .school-workflow {
    padding: 78px 0;
  }

  .schools-page .school-workflow-step {
    grid-template-columns: 40px 1fr;
    gap: 15px;
  }

  .schools-page .school-workflow-step h3 {
    font-size: 18px;
  }

  .schools-page .school-cta {
    padding: 85px 0;
  }

  .schools-page .school-cta-content h2 {
    font-size: clamp(36px, 10vw, 52px);
  }

  .schools-page .school-cta-content > p {
    font-size: 13px;
  }

  .schools-page .school-cta-actions {
    flex-direction: column;
  }

  .schools-page .school-cta-actions .btn {
    width: 100%;
  }

  .schools-page .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 35px 25px;
    padding-top: 60px;
    padding-bottom: 45px;
  }

  .schools-page .footer-brand {
    grid-column: 1 / -1;
  }

  .schools-page .footer-column h3 {
    margin-bottom: 13px;
  }

  .schools-page .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    min-height: 100px;
  }
}

/* =========================================================
   26. SMALL MOBILE
========================================================= */

@media (max-width: 430px) {
  .schools-page .container {
    width: min(calc(100% - 28px), var(--kgc-container));
  }

  .schools-page .brand img {
    width: 140px;
  }

  .schools-page .school-solution-card,
  .schools-page .school-industry-card {
    padding: 20px;
  }

  .schools-page .school-solution-card-top {
    margin-bottom: 30px;
  }

  .schools-page .school-hero-meta {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .schools-page .school-hero-meta-item {
    padding-right: 0;
    padding-bottom: 10px;
    margin-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--kgc-border);
  }

  .schools-page .school-hero-meta-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .schools-page .school-dashboard-brand small {
    font-size: 6px;
  }

  .schools-page .school-dashboard-brand strong {
    font-size: 9px;
  }

  .schools-page .school-date-box {
    width: 45px;
    height: 55px;
  }

  .schools-page .school-date-box strong {
    font-size: 17px;
  }

  .schools-page .school-ecosystem-visual {
    min-height: 350px;
  }

  .schools-page .school-orbit-one {
    width: 205px;
    height: 205px;
  }

  .schools-page .school-orbit-two {
    width: 285px;
    height: 285px;
  }

  .schools-page .school-ecosystem-center {
    width: 115px;
    height: 115px;
  }

  .schools-page .school-ecosystem-center strong {
    font-size: 12px;
  }

  .schools-page .school-ecosystem-node {
    padding: 6px 8px;
  }

  .schools-page .school-ecosystem-node span {
    font-size: 11px;
  }

  .schools-page .school-ecosystem-node strong {
    font-size: 8px;
  }

  .schools-page .school-node-students {
    left: 0;
  }

  .schools-page .school-node-academics {
    right: 0;
  }

  .schools-page .school-node-admin {
    left: 0;
  }

  .schools-page .school-node-parents {
    right: 0;
  }

  .schools-page .footer-grid {
    grid-template-columns: 1fr;
  }

  .schools-page .footer-column {
    grid-column: 1;
  }
}

/* =========================================================
   27. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .schools-page *,
  .schools-page *::before,
  .schools-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .schools-page .reveal {
    opacity: 1;
    transform: none;
  }

  .schools-page .school-dashboard {
    transform: none;
  }
}

/* =========================================================
   28. PRINT
========================================================= */

@media print {
  .schools-page .site-header,
  .schools-page .mobile-navigation,
  .schools-page .school-cta,
  .schools-page .site-footer {
    display: none !important;
  }

  .schools-page .school-hero {
    padding-top: 30px;
  }

  .schools-page .section {
    padding: 40px 0;
  }

  .schools-page .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   KAMAL GROUP OF CORPORATE
   COLLEGES INDUSTRY PAGE
   COMPLETE RESPONSIVE CSS
========================================================= */

/* =========================================================
   01. ROOT VARIABLES
========================================================= */

:root {
  --navy: #081a33;
  --navy-2: #0d2748;
  --navy-3: #12365f;

  --blue: #1769ff;
  --blue-dark: #0d4fd4;
  --blue-light: #eaf2ff;

  --purple: #7657f5;
  --purple-light: #f0edff;

  --green: #12a878;
  --green-dark: #087a5a;
  --green-light: #e8f9f3;

  --cyan: #08a9d8;
  --cyan-light: #e8f9fd;

  --orange: #f59a3d;
  --orange-light: #fff3e5;

  --red: #ef5b65;

  --white: #ffffff;
  --black: #07101d;

  --text: #25344a;
  --text-light: #617087;
  --text-muted: #8290a3;

  --surface: #f7f9fc;
  --surface-2: #f1f5fa;
  --border: #e4eaf2;
  --border-dark: #d4deea;

  --shadow-xs: 0 2px 8px rgba(8, 26, 51, 0.04);
  --shadow-sm: 0 8px 25px rgba(8, 26, 51, 0.07);
  --shadow-md: 0 18px 50px rgba(8, 26, 51, 0.1);
  --shadow-lg: 0 30px 80px rgba(8, 26, 51, 0.14);
  --shadow-blue: 0 20px 60px rgba(23, 105, 255, 0.2);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  --container: 1240px;

  --transition-fast: 180ms ease;
  --transition: 280ms ease;
  --transition-slow: 500ms ease;
}

/* =========================================================
   13. COLLEGE HERO
========================================================= */

.industry-hero {
  position: relative;
  isolation: isolate;

  min-height: 760px;

  display: flex;
  align-items: center;

  padding: 105px 0 95px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(23, 105, 255, 0.1),
      transparent 28%
    ),
    linear-gradient(135deg, #f8fbff 0%, #ffffff 58%, #f4f8ff 100%);
}

.industry-hero-grid {
  position: absolute;
  inset: 0;

  z-index: -1;

  opacity: 0.7;

  background-image:
    linear-gradient(rgba(23, 105, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 105, 255, 0.045) 1px, transparent 1px);

  background-size: 55px 55px;

  mask-image: linear-gradient(90deg, black, transparent 75%);
  -webkit-mask-image: linear-gradient(90deg, black, transparent 75%);
}

.industry-hero-container {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(500px, 1.08fr);

  align-items: center;

  gap: 70px;
}

/* =========================================================
   14. HERO CONTENT
========================================================= */

.industry-hero-content {
  position: relative;
  z-index: 2;
}

.industry-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 18px;
  padding: 7px 11px 7px 7px;

  color: var(--navy);

  background: rgba(255, 255, 255, 0.75);

  border: 1px solid var(--border);
  border-radius: 999px;

  box-shadow: var(--shadow-xs);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
}

.industry-label-mark {
  width: 25px;
  height: 25px;

  display: grid;
  place-items: center;

  color: var(--white);
  background: var(--navy);

  border-radius: 50%;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.industry-hero-content h1 {
  max-width: 690px;

  margin-bottom: 23px;

  font-size: clamp(44px, 5vw, 70px);
  letter-spacing: -0.055em;
}

.industry-hero-content h1 span {
  display: inline;
  color: var(--blue);
}

.industry-hero-content > p {
  max-width: 650px;

  margin-bottom: 31px;

  font-size: 17px;
  line-height: 1.8;
}

.industry-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;

  margin-bottom: 42px;
}

.industry-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.industry-hero-meta-item {
  min-width: 125px;
  padding: 0 20px;

  border-left: 1px solid var(--border);
}

.industry-hero-meta-item:first-child {
  padding-left: 0;
  border-left: 0;
}

.industry-hero-meta-item strong {
  display: block;

  margin-bottom: 2px;

  color: var(--navy);

  font-family: "Manrope", sans-serif;
  font-size: 13px;
}

.industry-hero-meta-item span {
  color: var(--text-muted);
  font-size: 11px;
}

/* =========================================================
   15. HERO DASHBOARD
========================================================= */

.industry-hero-visual {
  position: relative;
  z-index: 2;
}

.industry-visual-glow {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 75%;
  aspect-ratio: 1;

  transform: translate(-50%, -50%);

  background: rgba(23, 105, 255, 0.13);

  border-radius: 50%;

  filter: blur(65px);

  z-index: -1;
}

.industry-dashboard {
  position: relative;

  width: 100%;

  overflow: hidden;

  background: rgba(255, 255, 255, 0.96);

  border: 1px solid rgba(213, 223, 237, 0.9);
  border-radius: 23px;

  box-shadow:
    0 40px 90px rgba(8, 26, 51, 0.15),
    0 8px 25px rgba(23, 105, 255, 0.07);

  transform: perspective(1400px) rotateY(-4deg) rotateX(1deg);

  transition: transform 700ms ease;
}

.industry-dashboard:hover {
  transform: perspective(1400px) rotateY(0) rotateX(0) translateY(-4px);
}

/* Dashboard header */

.industry-dashboard-header {
  min-height: 70px;

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

  gap: 15px;

  padding: 13px 18px;

  color: var(--white);
  background: var(--navy);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.industry-dashboard-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.industry-dashboard-logo {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  color: var(--white);
  background: var(--blue);

  border-radius: 9px;

  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 800;
}

.industry-dashboard-brand div {
  display: flex;
  flex-direction: column;
}

.industry-dashboard-brand small {
  margin-bottom: 1px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.industry-dashboard-brand strong {
  color: var(--white);
  font-size: 12px;
}

.industry-dashboard-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  padding: 6px 9px;

  color: #aef3d9;

  background: rgba(18, 168, 120, 0.13);

  border: 1px solid rgba(18, 168, 120, 0.25);
  border-radius: 999px;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.industry-dashboard-status span {
  color: #21d394;
  font-size: 8px;
}

/* Dashboard body */

.industry-dashboard-body {
  padding: 25px;
}

.industry-dashboard-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 22px;
}

.industry-dashboard-welcome small {
  display: block;

  margin-bottom: 4px;

  color: var(--blue);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.industry-dashboard-welcome h3 {
  margin: 0;

  font-size: 20px;
}

.industry-dashboard-welcome h3 span {
  color: var(--blue);
}

.industry-date-box {
  min-width: 48px;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 7px;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: 9px;
}

.industry-date-box span {
  color: var(--text-muted);

  font-size: 7px;
  font-weight: 800;
}

.industry-date-box strong {
  color: var(--navy);

  font-family: "Manrope", sans-serif;
  font-size: 16px;
}

/* Dashboard stats */

.industry-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

  margin-bottom: 15px;
}

.industry-mini-stat {
  display: flex;
  align-items: center;
  gap: 9px;

  min-width: 0;

  padding: 12px;

  background: #fbfcfe;

  border: 1px solid var(--border);
  border-radius: 11px;
}

.industry-mini-icon {
  width: 32px;
  height: 32px;

  flex: 0 0 32px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  font-size: 13px;
}

.industry-mini-icon.blue {
  background: var(--blue-light);
}

.industry-mini-icon.purple {
  background: var(--purple-light);
}

.industry-mini-icon.green {
  background: var(--green-light);
}

.industry-mini-stat div {
  min-width: 0;
}

.industry-mini-stat strong {
  display: block;

  overflow: hidden;

  color: var(--navy);

  font-size: 10px;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.industry-mini-stat small {
  display: block;

  margin-top: 2px;

  color: var(--text-muted);

  font-size: 8px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dashboard panels */

.industry-dashboard-panels {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;

  gap: 12px;
}

.industry-dashboard-panel {
  padding: 15px;

  background: #fbfcfe;

  border: 1px solid var(--border);
  border-radius: 12px;
}

.industry-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 15px;
}

.industry-panel-heading strong {
  color: var(--navy);
  font-size: 10px;
}

.industry-panel-heading span {
  color: var(--blue);
  font-size: 8px;
  font-weight: 700;
}

.industry-progress-row {
  margin-bottom: 13px;
}

.industry-progress-row:last-child {
  margin-bottom: 0;
}

.industry-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 6px;

  font-size: 8px;
}

.industry-progress-label span {
  color: var(--text-muted);
}

.industry-progress-label strong {
  color: var(--navy);
  font-size: 8px;
}

.industry-progress {
  height: 5px;

  overflow: hidden;

  background: #e8edf4;
  border-radius: 999px;
}

.industry-progress span {
  display: block;

  height: 100%;

  background: linear-gradient(90deg, var(--blue), #5c96ff);

  border-radius: inherit;
}

.industry-notification-panel {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  padding: 15px;

  background: linear-gradient(145deg, #eef5ff, #f9fbff);

  border: 1px solid #dbe7fa;
  border-radius: 12px;
}

.industry-notification-icon {
  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  display: grid;
  place-items: center;

  color: var(--blue);
  background: var(--white);

  border-radius: 8px;

  box-shadow: var(--shadow-xs);
}

.industry-notification-panel strong {
  display: block;

  margin-bottom: 5px;

  color: var(--navy);

  font-size: 10px;
}

.industry-notification-panel small {
  display: block;

  color: var(--text-muted);

  font-size: 8px;
  line-height: 1.55;
}

/* Dashboard footer */

.industry-dashboard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 11px 20px;

  border-top: 1px solid var(--border);

  color: var(--text-muted);

  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

/* =========================================================
   16. INTRO SECTION
========================================================= */

.industry-intro {
  background: var(--white);
}

.industry-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);

  gap: 90px;

  align-items: start;
}

.industry-intro-heading h2 {
  margin: 0;

  font-size: clamp(35px, 4vw, 52px);
}

.industry-intro-content {
  padding-top: 8px;
}

.industry-intro-content p {
  margin-bottom: 22px;

  font-size: 16px;
  line-height: 1.85;
}

.industry-intro-content p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   17. SOLUTIONS SECTION
========================================================= */

.industry-solutions {
  background: var(--surface);
}

.industry-solution-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 16px;
}

.industry-solution-card {
  position: relative;

  min-height: 310px;

  display: flex;
  flex-direction: column;

  padding: 25px;

  background: var(--white);

  border: 1px solid var(--border);
  border-radius: var(--radius-md);

  overflow: hidden;

  box-shadow: var(--shadow-xs);

  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.industry-solution-card:hover {
  transform: translateY(-7px);

  border-color: rgba(23, 105, 255, 0.2);

  box-shadow: var(--shadow-md);
}

.industry-solution-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  margin-bottom: 27px;
}

.industry-solution-number {
  color: #a5b0bf;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.industry-solution-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  font-size: 20px;
}

.industry-solution-icon.blue {
  color: var(--blue);
  background: var(--blue-light);
}

.industry-solution-icon.purple {
  color: var(--purple);
  background: var(--purple-light);
}

.industry-solution-icon.green {
  color: var(--green);
  background: var(--green-light);
}

.industry-solution-icon.orange {
  color: var(--orange);
  background: var(--orange-light);
}

.industry-solution-icon.cyan {
  color: var(--cyan);
  background: var(--cyan-light);
}

.industry-solution-icon.dark {
  color: var(--navy);
  background: #eaf0f7;
}

.industry-solution-card-content {
  flex: 1;
}

.industry-solution-card h3 {
  margin-bottom: 11px;

  font-size: 19px;
}

.industry-solution-card p {
  margin: 0;

  font-size: 13px;
  line-height: 1.75;
}

.industry-solution-line {
  display: block;

  width: 32px;
  height: 2px;

  margin-top: 24px;

  background: var(--blue);

  border-radius: 999px;

  transition: width var(--transition);
}

.industry-solution-card:hover .industry-solution-line {
  width: 60px;
}

/* =========================================================
   18. ECOSYSTEM
========================================================= */

.industry-ecosystem {
  background: var(--white);
}

.industry-ecosystem-grid {
  display: grid;
  grid-template-columns: minmax(480px, 0.95fr) minmax(0, 1.05fr);

  align-items: center;

  gap: 90px;
}

/* Ecosystem visual */

.industry-ecosystem-visual {
  position: relative;

  min-height: 560px;

  display: grid;
  place-items: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at center,
      rgba(23, 105, 255, 0.08),
      transparent 44%
    ),
    #f8fbff;

  border: 1px solid var(--border);
  border-radius: 28px;
}

.industry-ecosystem-orbit {
  position: absolute;

  top: 50%;
  left: 50%;

  border: 1px dashed rgba(23, 105, 255, 0.18);

  border-radius: 50%;

  transform: translate(-50%, -50%);
}

.industry-orbit-one {
  width: 300px;
  height: 300px;
}

.industry-orbit-two {
  width: 430px;
  height: 430px;

  border-color: rgba(23, 105, 255, 0.1);
}

.industry-ecosystem-center {
  position: relative;
  z-index: 3;

  width: 145px;
  height: 145px;

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

  background: var(--navy);

  border: 7px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;

  box-shadow:
    0 20px 50px rgba(8, 26, 51, 0.18),
    0 0 0 1px rgba(23, 105, 255, 0.1);
}

.industry-ecosystem-center span {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  margin-bottom: 5px;

  color: var(--white);
  background: var(--blue);

  border-radius: 50%;

  font-family: "Manrope", sans-serif;
  font-weight: 800;
}

.industry-ecosystem-center strong {
  color: var(--white);

  font-family: "Manrope", sans-serif;
  font-size: 16px;
  letter-spacing: 0.03em;
}

.industry-ecosystem-center small {
  color: rgba(255, 255, 255, 0.6);

  font-size: 8px;
}

/* Ecosystem nodes */

.industry-ecosystem-node {
  position: absolute;
  z-index: 4;

  min-width: 108px;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 11px 13px;

  background: rgba(255, 255, 255, 0.96);

  border: 1px solid var(--border);
  border-radius: 13px;

  box-shadow: var(--shadow-sm);

  text-align: center;

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.industry-ecosystem-node:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.industry-ecosystem-node span {
  margin-bottom: 4px;

  font-size: 18px;
}

.industry-ecosystem-node strong {
  color: var(--navy);

  font-size: 10px;
}

.industry-node-students {
  top: 70px;
  left: 75px;
}

.industry-node-academics {
  top: 70px;
  right: 75px;
}

.industry-node-faculty {
  bottom: 70px;
  left: 75px;
}

.industry-node-admin {
  right: 75px;
  bottom: 70px;
}

/* Ecosystem content */

.industry-ecosystem-content h2 {
  margin-bottom: 20px;

  font-size: clamp(36px, 4vw, 54px);
}

.industry-ecosystem-content > p {
  margin-bottom: 35px;

  font-size: 15px;
  line-height: 1.85;
}

.industry-ecosystem-list {
  display: flex;
  flex-direction: column;
}

.industry-ecosystem-item {
  display: grid;
  grid-template-columns: 40px 1fr;

  gap: 14px;

  padding: 17px 0;

  border-top: 1px solid var(--border);
}

.industry-ecosystem-item > span {
  color: var(--blue);

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.industry-ecosystem-item h3 {
  margin-bottom: 4px;

  font-size: 15px;
}

.industry-ecosystem-item p {
  margin: 0;

  font-size: 12px;
  line-height: 1.65;
}

/* =========================================================
   19. COLLEGE TYPES
========================================================= */

.industry-types {
  background: var(--surface);
}

.industry-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;
}

.industry-type-card {
  position: relative;

  min-height: 355px;

  display: flex;
  flex-direction: column;

  padding: 28px;

  background: var(--white);

  border: 1px solid var(--border);
  border-radius: var(--radius-lg);

  overflow: hidden;

  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.industry-type-card:hover {
  transform: translateY(-7px);

  border-color: rgba(23, 105, 255, 0.25);

  box-shadow: var(--shadow-md);
}

.industry-type-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  margin-bottom: 35px;
}

.industry-type-top > span {
  color: #a5b0bf;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.industry-type-icon {
  width: 55px;
  height: 55px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  font-size: 23px;
}

.industry-type-icon.blue {
  background: var(--blue-light);
}

.industry-type-icon.purple {
  background: var(--purple-light);
}

.industry-type-icon.green {
  background: var(--green-light);
}

.industry-type-content {
  flex: 1;
}

.industry-type-content h3 {
  margin-bottom: 12px;

  font-size: 21px;
}

.industry-type-content p {
  margin: 0;

  font-size: 13px;
  line-height: 1.75;
}

.industry-type-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-top: 25px;

  color: var(--blue);

  font-size: 11px;
  font-weight: 800;
}

.industry-type-link span {
  transition: transform var(--transition-fast);
}

.industry-type-card:hover .industry-type-link span {
  transform: translateX(4px);
}

/* =========================================================
   20. PRODUCT CONNECTION
========================================================= */

.industry-products {
  background: var(--white);
}

.industry-products-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(450px, 0.9fr);

  align-items: center;

  gap: 90px;
}

.industry-products-content h2 {
  margin-bottom: 20px;

  font-size: clamp(36px, 4vw, 52px);
}

.industry-products-content > p {
  margin-bottom: 18px;

  font-size: 15px;
  line-height: 1.85;
}

.industry-products-content .btn {
  margin-top: 14px;
}

/* Product stack */

.industry-product-stack {
  padding: 25px;

  background: linear-gradient(145deg, #f7fbff, #f3f7fc);

  border: 1px solid var(--border);
  border-radius: 25px;
}

.industry-product-card {
  display: flex;
  align-items: center;
  gap: 15px;

  padding: 18px;

  background: var(--white);

  border: 1px solid var(--border);
  border-radius: 15px;

  box-shadow: var(--shadow-xs);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.industry-product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(23, 105, 255, 0.25);
  box-shadow: var(--shadow-md);
}

.industry-product-icon {
  width: 52px;
  height: 52px;

  flex: 0 0 52px;

  display: grid;
  place-items: center;

  background: var(--green-light);

  border-radius: 13px;

  font-size: 22px;
}

.industry-product-card-content {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.industry-product-card-content small {
  margin-bottom: 4px;

  color: var(--blue);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.industry-product-card-content strong {
  margin-bottom: 3px;

  color: var(--navy);

  font-family: "Manrope", sans-serif;
  font-size: 15px;
}

.industry-product-card-content span {
  color: var(--text-muted);
  font-size: 11px;
}

.industry-product-arrow {
  margin-left: auto;

  color: var(--blue);

  font-size: 20px;

  transition: transform var(--transition-fast);
}

.industry-product-card:hover .industry-product-arrow {
  transform: translateX(4px);
}

.industry-product-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

  margin-top: 10px;
}

.industry-product-mini {
  display: flex;
  flex-direction: column;

  padding: 15px;

  background: rgba(255, 255, 255, 0.75);

  border: 1px solid var(--border);
  border-radius: 12px;
}

.industry-product-mini > span {
  margin-bottom: 9px;

  font-size: 17px;
}

.industry-product-mini strong {
  margin-bottom: 3px;

  color: var(--navy);

  font-size: 11px;
}

.industry-product-mini small {
  color: var(--text-muted);

  font-size: 9px;
  line-height: 1.5;
}

/* =========================================================
   21. BENEFITS
========================================================= */

.industry-benefits {
  background: var(--surface);
}

.industry-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 15px;
}

.industry-benefit-card {
  display: grid;
  grid-template-columns: 38px 1fr;

  gap: 14px;

  min-height: 185px;

  padding: 23px;

  background: var(--white);

  border: 1px solid var(--border);
  border-radius: 15px;

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.industry-benefit-card:hover {
  transform: translateY(-5px);
  border-color: rgba(23, 105, 255, 0.2);
  box-shadow: var(--shadow-sm);
}

.industry-benefit-card > span {
  color: var(--blue);

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.industry-benefit-card h3 {
  margin-bottom: 8px;

  font-size: 18px;
}

.industry-benefit-card p {
  margin: 0;

  font-size: 12px;
  line-height: 1.7;
}

/* =========================================================
   22. WORKFLOW
========================================================= */

.industry-workflow {
  position: relative;

  padding: 115px 0;

  color: var(--white);
  background: var(--navy);

  overflow: hidden;
}

.industry-workflow::before {
  content: "";

  position: absolute;

  top: -300px;
  right: -200px;

  width: 600px;
  height: 600px;

  background: rgba(23, 105, 255, 0.15);

  border-radius: 50%;

  filter: blur(30px);
}

.industry-workflow-grid {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(500px, 1.2fr);

  gap: 90px;

  align-items: start;
}

.industry-workflow-content .eyebrow {
  color: #7fb0ff;
}

.industry-workflow-content h2 {
  margin-bottom: 22px;

  color: var(--white);

  font-size: clamp(36px, 4vw, 53px);
}

.industry-workflow-content h2 span {
  color: #6fa4ff;
}

.industry-workflow-content p {
  max-width: 520px;

  color: rgba(255, 255, 255, 0.65);

  font-size: 15px;
  line-height: 1.85;
}

.industry-workflow-steps {
  display: flex;
  flex-direction: column;
}

.industry-workflow-step {
  display: grid;
  grid-template-columns: 55px 1fr;

  gap: 18px;

  padding: 22px 0;

  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.industry-workflow-step:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.industry-workflow-step > span {
  color: #5d94f7;

  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.industry-workflow-step h3 {
  margin-bottom: 5px;

  color: var(--white);

  font-size: 18px;
}

.industry-workflow-step p {
  margin: 0;

  color: rgba(255, 255, 255, 0.58);

  font-size: 12px;
  line-height: 1.7;
}

/* =========================================================
   23. FINAL CTA
========================================================= */

.industry-cta {
  position: relative;
  isolation: isolate;

  padding: 125px 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(23, 105, 255, 0.25),
      transparent 40%
    ),
    linear-gradient(135deg, #0b2140, #07182e);
}

.industry-cta-grid {
  position: absolute;
  inset: 0;

  z-index: -1;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);

  background-size: 55px 55px;
}

.industry-cta-content {
  max-width: 820px;

  margin: 0 auto;

  text-align: center;
}

.industry-cta-mark {
  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  margin: 0 auto 23px;

  color: var(--white);
  background: var(--blue);

  border-radius: 14px;

  box-shadow: 0 15px 35px rgba(23, 105, 255, 0.3);

  font-family: "Manrope", sans-serif;
  font-size: 21px;
  font-weight: 800;
}

.industry-cta-content .eyebrow {
  color: #76a7ff;
}

.industry-cta-content h2 {
  margin-bottom: 20px;

  color: var(--white);

  font-size: clamp(40px, 5vw, 60px);
}

.industry-cta-content h2 span {
  color: #6da2ff;
}

.industry-cta-content > p {
  max-width: 700px;

  margin: 0 auto 32px;

  color: rgba(255, 255, 255, 0.64);

  font-size: 15px;
  line-height: 1.85;
}

.industry-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 22px;
}

.industry-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: var(--white);

  font-size: 13px;
  font-weight: 700;
}

.industry-cta-link span {
  transition: transform var(--transition-fast);
}

.industry-cta-link:hover {
  color: #8bb5ff;
}

.industry-cta-link:hover span {
  transform: translateX(4px);
}

/* =========================================================
   24. FOOTER
========================================================= */

.site-footer {
  color: rgba(255, 255, 255, 0.68);

  background: #061426;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(5, 1fr);

  gap: 35px;

  padding-top: 75px;
  padding-bottom: 65px;
}

.footer-brand {
  max-width: 300px;
}

.footer-brand > a {
  display: inline-flex;
  margin-bottom: 20px;
}

.footer-brand img {
  width: 180px;
  height: 50px;
  object-fit: contain;
}

.footer-brand p {
  margin-bottom: 25px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 12px;
  line-height: 1.75;
}

.footer-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-social-label {
  color: rgba(255, 255, 255, 0.35);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-social-link {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  color: rgba(255, 255, 255, 0.7);

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;

  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.footer-social-link:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);

  transform: translateY(-3px);
}

.footer-social-link.linkedin:hover {
  background: #0a66c2;
}

.footer-social-link.instagram:hover {
  background: #d62976;
}

.footer-social-link.whatsapp:hover {
  background: #20bd5a;
}

.footer-social-link.youtube:hover {
  background: #ff0000;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 10px;
}

.footer-column h3 {
  margin-bottom: 8px;

  color: var(--white);

  font-size: 12px;
  letter-spacing: 0;
}

.footer-column a {
  color: rgba(255, 255, 255, 0.52);

  font-size: 11px;
  line-height: 1.5;

  transition: color var(--transition-fast);
}

.footer-column a:hover {
  color: var(--white);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding-top: 20px;
  padding-bottom: 22px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom p {
  margin: 0;

  color: rgba(255, 255, 255, 0.38);

  font-size: 10px;
}

.footer-bottom > div {
  display: flex;
  gap: 18px;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.42);

  font-size: 10px;

  transition: color var(--transition-fast);
}

.footer-bottom a:hover {
  color: var(--white);
}

/* =========================================================
   25. SCROLL REVEAL
========================================================= */

.reveal {
  opacity: 0;

  transform: translateY(28px);

  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   26. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   27. LARGE DESKTOP
========================================================= */

@media (max-width: 1280px) {
  .container {
    width: min(calc(100% - 40px), 1180px);
  }

  .header-inner {
    gap: 18px;
  }

  .nav-link {
    padding-inline: 9px;
  }

  .industry-hero-container {
    gap: 45px;
  }

  .industry-solution-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: 1.5fr repeat(5, 1fr);
    gap: 22px;
  }
}

/* =========================================================
   28. TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 1100px) {
  .main-navigation {
    display: none;
  }

  .header-actions {
    margin-left: auto;
  }

  .mobile-menu-button {
    display: flex;
  }

  .mobile-navigation {
    position: fixed;

    top: 78px;
    left: 0;
    right: 0;

    height: calc(100vh - 78px);

    display: flex;
    flex-direction: column;

    padding: 15px 20px 35px;

    background: rgba(255, 255, 255, 0.98);

    overflow-y: auto;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-10px);

    transition:
      opacity var(--transition),
      visibility var(--transition),
      transform var(--transition);
  }

  .mobile-navigation.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-navigation > a {
    display: flex;
    align-items: center;

    min-height: 52px;

    padding: 0 5px;

    color: var(--navy);

    border-bottom: 1px solid var(--border);

    font-size: 14px;
    font-weight: 700;
  }

  .mobile-nav-group {
    border-bottom: 1px solid var(--border);
  }

  .mobile-nav-trigger {
    width: 100%;
    min-height: 52px;

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

    padding: 0 5px;

    color: var(--navy);
    background: transparent;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
  }

  .mobile-nav-trigger span {
    color: var(--blue);

    font-size: 20px;
    font-weight: 400;

    transition: transform var(--transition-fast);
  }

  .mobile-nav-group.open .mobile-nav-trigger span {
    transform: rotate(45deg);
  }

  .mobile-submenu {
    max-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    transition: max-height 300ms ease;
  }

  .mobile-submenu a {
    min-height: 43px;

    display: flex;
    align-items: center;

    padding: 0 10px 0 22px;

    color: var(--text-light);

    font-size: 12px;

    border-top: 1px solid rgba(228, 234, 242, 0.55);
  }

  .mobile-submenu a:hover {
    color: var(--blue);
  }

  .mobile-demo-button {
    justify-content: center !important;

    margin-top: 18px;

    color: var(--white) !important;
    background: var(--blue);

    border: 0 !important;
    border-radius: 9px;

    box-shadow: var(--shadow-blue);

    text-align: center;

    transition: background-color var(--transition-fast);
  }

  .mobile-demo-button:hover {
    background: var(--blue-dark);
  }

  .industry-hero-container {
    grid-template-columns: 1fr 1fr;
    gap: 35px;
  }

  .industry-hero-content h1 {
    font-size: clamp(42px, 5vw, 60px);
  }

  .industry-solution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .industry-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .industry-ecosystem-grid,
  .industry-products-grid,
  .industry-workflow-grid {
    gap: 55px;
  }

  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-brand {
    grid-column: span 3;
    max-width: 500px;
  }
}

/* =========================================================
   29. TABLET
========================================================= */

@media (max-width: 900px) {
  .section {
    padding: 90px 0;
  }

  .industry-hero {
    min-height: auto;

    padding: 85px 0;
  }

  .industry-hero-container {
    grid-template-columns: 1fr;

    gap: 60px;
  }

  .industry-hero-content {
    max-width: 760px;
    margin-inline: auto;

    text-align: center;
  }

  .industry-label {
    margin-inline: auto;
  }

  .industry-hero-content h1 {
    margin-inline: auto;
  }

  .industry-hero-content > p {
    margin-inline: auto;
  }

  .industry-hero-actions {
    justify-content: center;
  }

  .industry-hero-meta {
    justify-content: center;
  }

  .industry-hero-visual {
    width: min(100%, 700px);
    margin-inline: auto;
  }

  .industry-dashboard {
    transform: none;
  }

  .industry-dashboard:hover {
    transform: translateY(-3px);
  }

  .industry-intro-grid {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .industry-ecosystem-grid {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .industry-ecosystem-visual {
    width: min(100%, 600px);
    margin-inline: auto;
  }

  .industry-products-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }

  .industry-products-content {
    max-width: 750px;
  }

  .industry-workflow-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }

  .industry-workflow-content p {
    max-width: 700px;
  }
}

/* =========================================================
   30. MOBILE
========================================================= */

@media (max-width: 680px) {
  .container {
    width: min(calc(100% - 32px), 100%);
  }

  .site-header {
    position: sticky;
  }

  .header-inner {
    min-height: 68px;
  }

  .brand,
  .brand img {
    width: 150px;
    height: 43px;
  }

  .header-actions {
    display: none;
  }

  .mobile-navigation {
    top: 68px;
    height: calc(100vh - 68px);
  }

  .section {
    padding: 75px 0;
  }

  .section-heading {
    margin-bottom: 42px;
  }

  .section-heading h2 {
    font-size: 34px;
  }

  .section-heading p {
    font-size: 14px;
  }

  /* Hero */

  .industry-hero {
    padding: 70px 0 65px;
  }

  .industry-hero-container {
    gap: 45px;
  }

  .industry-label {
    font-size: 8px;
  }

  .industry-hero-content .eyebrow {
    margin-bottom: 13px;
  }

  .industry-hero-content h1 {
    font-size: clamp(37px, 11vw, 50px);
    line-height: 1.08;
  }

  .industry-hero-content > p {
    font-size: 14px;
    line-height: 1.75;
  }

  .industry-hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .industry-hero-actions .btn {
    width: 100%;
  }

  .industry-hero-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    width: 100%;
  }

  .industry-hero-meta-item {
    min-width: 0;
    padding: 0 9px;
  }

  .industry-hero-meta-item strong {
    font-size: 10px;
  }

  .industry-hero-meta-item span {
    font-size: 9px;
  }

  /* Dashboard */

  .industry-dashboard-header {
    min-height: 62px;
    padding: 11px 13px;
  }

  .industry-dashboard-logo {
    width: 31px;
    height: 31px;
    font-size: 13px;
  }

  .industry-dashboard-brand small {
    font-size: 6px;
  }

  .industry-dashboard-brand strong {
    font-size: 9px;
  }

  .industry-dashboard-status {
    padding: 5px 7px;
    font-size: 6px;
  }

  .industry-dashboard-body {
    padding: 16px;
  }

  .industry-dashboard-welcome h3 {
    font-size: 16px;
  }

  .industry-dashboard-stats {
    grid-template-columns: 1fr;
  }

  .industry-dashboard-panels {
    grid-template-columns: 1fr;
  }

  .industry-notification-panel {
    display: none;
  }

  .industry-dashboard-footer {
    padding: 9px 13px;
    font-size: 6px;
  }

  /* Intro */

  .industry-intro-heading h2,
  .industry-ecosystem-content h2,
  .industry-products-content h2,
  .industry-workflow-content h2 {
    font-size: 35px;
  }

  .industry-intro-content p {
    font-size: 14px;
  }

  /* Solutions */

  .industry-solution-grid {
    grid-template-columns: 1fr;
  }

  .industry-solution-card {
    min-height: 275px;
    padding: 21px;
  }

  /* Ecosystem */

  .industry-ecosystem-visual {
    min-height: 450px;
    border-radius: 20px;
  }

  .industry-orbit-one {
    width: 230px;
    height: 230px;
  }

  .industry-orbit-two {
    width: 340px;
    height: 340px;
  }

  .industry-ecosystem-center {
    width: 115px;
    height: 115px;
  }

  .industry-ecosystem-center span {
    width: 27px;
    height: 27px;
  }

  .industry-ecosystem-center strong {
    font-size: 13px;
  }

  .industry-ecosystem-center small {
    font-size: 7px;
  }

  .industry-ecosystem-node {
    min-width: 82px;
    padding: 8px;
  }

  .industry-ecosystem-node span {
    font-size: 14px;
  }

  .industry-ecosystem-node strong {
    font-size: 8px;
  }

  .industry-node-students {
    top: 43px;
    left: 23px;
  }

  .industry-node-academics {
    top: 43px;
    right: 23px;
  }

  .industry-node-faculty {
    bottom: 43px;
    left: 23px;
  }

  .industry-node-admin {
    right: 23px;
    bottom: 43px;
  }

  .industry-ecosystem-content > p {
    font-size: 14px;
  }

  /* Types */

  .industry-type-grid {
    grid-template-columns: 1fr;
  }

  .industry-type-card {
    min-height: 315px;
  }

  /* Products */

  .industry-product-stack {
    padding: 15px;
  }

  .industry-product-mini-grid {
    grid-template-columns: 1fr;
  }

  /* Benefits */

  .industry-benefits-grid {
    grid-template-columns: 1fr;
  }

  /* Workflow */

  .industry-workflow {
    padding: 80px 0;
  }

  .industry-workflow-step {
    grid-template-columns: 38px 1fr;
  }

  /* CTA */

  .industry-cta {
    padding: 85px 0;
  }

  .industry-cta-content h2 {
    font-size: 38px;
  }

  .industry-cta-content > p {
    font-size: 14px;
  }

  .industry-cta-actions {
    flex-direction: column;
  }

  .industry-cta-actions .btn {
    width: 100%;
  }

  /* Footer */

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

    gap: 35px 25px;

    padding-top: 60px;
    padding-bottom: 50px;
  }

  .footer-brand {
    grid-column: span 2;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   31. SMALL MOBILE
========================================================= */

@media (max-width: 430px) {
  .container {
    width: min(calc(100% - 26px), 100%);
  }

  .brand,
  .brand img {
    width: 135px;
    height: 40px;
  }

  .industry-hero {
    padding-top: 55px;
  }

  .industry-hero-content h1 {
    font-size: 36px;
  }

  .industry-hero-meta-item {
    padding-inline: 5px;
  }

  .industry-hero-meta-item strong {
    font-size: 9px;
  }

  .industry-hero-meta-item span {
    font-size: 8px;
  }

  .industry-dashboard-body {
    padding: 13px;
  }

  .industry-dashboard-welcome {
    margin-bottom: 15px;
  }

  .industry-dashboard-welcome h3 {
    font-size: 14px;
  }

  .industry-date-box {
    min-width: 42px;
  }

  .industry-dashboard-stats {
    gap: 7px;
  }

  .industry-mini-stat {
    padding: 9px;
  }

  .industry-solution-card {
    min-height: auto;
  }

  .industry-solution-card-content h3 {
    font-size: 18px;
  }

  .industry-ecosystem-visual {
    min-height: 390px;
  }

  .industry-orbit-one {
    width: 195px;
    height: 195px;
  }

  .industry-orbit-two {
    width: 290px;
    height: 290px;
  }

  .industry-node-students {
    top: 30px;
    left: 12px;
  }

  .industry-node-academics {
    top: 30px;
    right: 12px;
  }

  .industry-node-faculty {
    bottom: 30px;
    left: 12px;
  }

  .industry-node-admin {
    right: 12px;
    bottom: 30px;
  }

  .industry-type-card {
    padding: 23px;
  }

  .industry-product-card {
    padding: 14px;
  }

  .industry-product-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .industry-product-card-content strong {
    font-size: 13px;
  }

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

  .footer-brand {
    grid-column: auto;
  }

  .footer-bottom > div {
    flex-wrap: wrap;
  }
}

/* =========================================================
   32. VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {
  .industry-hero-content h1 {
    font-size: 33px;
  }

  .industry-hero-meta {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .industry-hero-meta-item {
    padding: 0;

    border-left: 0;
  }

  .industry-dashboard-status {
    display: none;
  }

  .industry-ecosystem-visual {
    min-height: 350px;
  }

  .industry-orbit-one {
    width: 175px;
    height: 175px;
  }

  .industry-orbit-two {
    width: 250px;
    height: 250px;
  }

  .industry-ecosystem-center {
    width: 100px;
    height: 100px;
  }

  .industry-ecosystem-node {
    min-width: 72px;
  }
}

/* =========================================================
   33. PRINT
========================================================= */

/* Industries Enterprise Page */
/* =========================================================
   KAMAL GROUP OF CORPORATE
   ENTERPRISE INDUSTRY PAGE
   GLOBAL + ENTERPRISE PAGE STYLES
========================================================= */

/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {
  --navy-950: #061326;
  --navy-900: #081a33;
  --navy-850: #0b2140;
  --navy-800: #102a4d;
  --navy-700: #17385f;

  --blue-700: #1459d9;
  --blue-600: #1769e8;
  --blue-500: #3182f6;
  --blue-100: #eaf3ff;

  --purple-600: #7256e8;
  --purple-500: #8a6cf0;
  --purple-100: #f0edff;

  --green-600: #0d9b72;
  --green-500: #19b786;
  --green-100: #e8faf4;

  --cyan-500: #0ea5c9;
  --cyan-100: #e8f9fd;

  --orange-500: #f28a38;
  --orange-100: #fff3e7;

  --white: #ffffff;
  --off-white: #f8fafc;
  --surface: #f5f8fc;
  --surface-2: #eef3f9;

  --text-950: #0a1729;
  --text-900: #122039;
  --text-800: #263750;
  --text-700: #43536b;
  --text-600: #5d6b80;
  --text-500: #738096;
  --text-400: #94a0b2;

  --border: #dfe6ef;
  --border-light: #e9eef5;

  --shadow-xs: 0 2px 8px rgba(8, 26, 51, 0.04);

  --shadow-sm: 0 8px 24px rgba(8, 26, 51, 0.07);

  --shadow-md: 0 18px 45px rgba(8, 26, 51, 0.1);

  --shadow-lg: 0 30px 80px rgba(8, 26, 51, 0.14);

  --shadow-blue: 0 20px 60px rgba(23, 105, 232, 0.2);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --container: 1240px;

  --header-height: 82px;

  --transition-fast: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);

  --transition: 300ms cubic-bezier(0.2, 0.7, 0.2, 1);

  --transition-slow: 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* =========================================================
   HERO
========================================================= */

.industry-hero {
  position: relative;

  min-height: 790px;

  display: flex;
  align-items: center;

  padding: calc(var(--header-height) + 75px) 0 90px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 85% 25%,
      rgba(49, 130, 246, 0.12),
      transparent 34%
    ),
    radial-gradient(
      circle at 70% 80%,
      rgba(114, 86, 232, 0.08),
      transparent 30%
    ),
    linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
}

.industry-hero-grid {
  position: absolute;
  inset: 0;

  opacity: 0.45;

  background-image:
    linear-gradient(rgba(23, 105, 232, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 105, 232, 0.055) 1px, transparent 1px);

  background-size: 58px 58px;

  mask-image: linear-gradient(90deg, black, transparent 75%);
}

.industry-hero-container {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  gap: 72px;

  align-items: center;
}

/* =========================================================
   HERO CONTENT
========================================================= */

.industry-hero-content {
  position: relative;
  z-index: 3;
}

.industry-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 22px;

  color: var(--navy-900);

  font-size: 0.7rem;
  font-weight: 800;

  letter-spacing: 0.13em;
}

.industry-label-mark {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  color: var(--white);

  background: linear-gradient(135deg, var(--navy-900), var(--blue-600));

  border-radius: 9px;

  font-family: "Manrope", sans-serif;
  font-size: 0.8rem;
}

.industry-hero h1 {
  max-width: 700px;

  margin-bottom: 24px;

  font-size: clamp(2.8rem, 5vw, 4.65rem);

  line-height: 1.04;

  letter-spacing: -0.055em;
}

.industry-hero h1 span {
  display: inline;

  color: var(--blue-600);
}

.industry-hero-content > p {
  max-width: 620px;

  margin-bottom: 30px;

  color: var(--text-600);

  font-size: clamp(0.98rem, 1.5vw, 1.08rem);

  line-height: 1.8;
}

.industry-hero-actions {
  display: flex;
  align-items: center;
  gap: 13px;

  flex-wrap: wrap;

  margin-bottom: 40px;
}

.industry-hero-meta {
  display: flex;
  align-items: center;
  gap: 0;
}

.industry-hero-meta-item {
  min-width: 120px;

  padding-right: 22px;
  margin-right: 22px;

  border-right: 1px solid var(--border);
}

.industry-hero-meta-item:last-child {
  padding-right: 0;
  margin-right: 0;

  border-right: 0;
}

.industry-hero-meta-item strong {
  display: block;

  margin-bottom: 2px;

  color: var(--text-900);

  font-family: "Manrope", sans-serif;

  font-size: 0.8rem;
}

.industry-hero-meta-item span {
  color: var(--text-500);

  font-size: 0.68rem;
}

/* =========================================================
   HERO DASHBOARD VISUAL
========================================================= */

.industry-hero-visual {
  position: relative;

  min-height: 560px;

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

.industry-visual-glow {
  position: absolute;

  width: 480px;
  height: 480px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(23, 105, 232, 0.16),
    rgba(114, 86, 232, 0.06) 45%,
    transparent 70%
  );

  filter: blur(8px);

  animation: enterpriseGlow 7s ease-in-out infinite;
}

.industry-dashboard {
  position: relative;
  z-index: 2;

  width: min(100%, 610px);

  overflow: hidden;

  background: rgba(255, 255, 255, 0.94);

  border: 1px solid rgba(214, 225, 239, 0.95);

  border-radius: 22px;

  box-shadow:
    0 35px 90px rgba(8, 26, 51, 0.15),
    0 10px 35px rgba(23, 105, 232, 0.08);

  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);

  animation: dashboardFloat 6s ease-in-out infinite;
}

.industry-dashboard-header {
  min-height: 76px;

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

  gap: 20px;

  padding: 14px 18px;

  color: var(--white);

  background: linear-gradient(135deg, #081a33, #123662);
}

.industry-dashboard-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.industry-dashboard-logo {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  color: var(--navy-900);

  background: var(--white);

  border-radius: 10px;

  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  font-weight: 800;
}

.industry-dashboard-brand small {
  display: block;

  margin-bottom: 2px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 0.52rem;
  font-weight: 700;

  letter-spacing: 0.12em;
}

.industry-dashboard-brand strong {
  display: block;

  color: var(--white);

  font-family: "Manrope", sans-serif;

  font-size: 0.75rem;
}

.industry-dashboard-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 9px;

  color: #8ef0ce;

  background: rgba(25, 183, 134, 0.1);

  border: 1px solid rgba(25, 183, 134, 0.2);
  border-radius: var(--radius-pill);

  font-size: 0.52rem;
  font-weight: 800;

  letter-spacing: 0.07em;
}

.industry-dashboard-body {
  padding: 25px;
}

.industry-dashboard-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 22px;
}

.industry-dashboard-welcome small {
  display: block;

  margin-bottom: 4px;

  color: var(--text-400);

  font-size: 0.55rem;
  font-weight: 800;

  letter-spacing: 0.12em;
}

.industry-dashboard-welcome h3 {
  margin: 0;

  font-size: 1rem;
}

.industry-dashboard-welcome h3 span {
  color: var(--blue-600);
}

.industry-date-box {
  width: 48px;
  height: 52px;

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

  color: var(--white);

  background: var(--blue-600);

  border-radius: 10px;

  box-shadow: 0 8px 20px rgba(23, 105, 232, 0.2);
}

.industry-date-box span {
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.industry-date-box strong {
  font-family: "Manrope", sans-serif;
  font-size: 1.15rem;
  line-height: 1;
}

.industry-dashboard-stats {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 10px;

  margin-bottom: 14px;
}

.industry-mini-stat {
  display: flex;
  align-items: center;
  gap: 9px;

  padding: 12px;

  background: var(--surface);

  border: 1px solid var(--border-light);
  border-radius: 12px;
}

.industry-mini-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  flex: 0 0 34px;

  border-radius: 9px;

  font-size: 0.85rem;
}

.industry-mini-icon.blue {
  color: var(--blue-600);
  background: var(--blue-100);
}

.industry-mini-icon.purple {
  color: var(--purple-600);
  background: var(--purple-100);
}

.industry-mini-icon.green {
  color: var(--green-600);
  background: var(--green-100);
}

.industry-mini-stat strong {
  display: block;

  margin-bottom: 1px;

  color: var(--text-900);

  font-size: 0.65rem;
}

.industry-mini-stat small {
  display: block;

  color: var(--text-500);

  font-size: 0.51rem;
  line-height: 1.3;
}

.industry-dashboard-panels {
  display: grid;

  grid-template-columns:
    1.3fr
    0.7fr;

  gap: 12px;
}

.industry-dashboard-panel,
.industry-notification-panel {
  padding: 16px;

  background: var(--white);

  border: 1px solid var(--border);

  border-radius: 13px;
}

.industry-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 16px;
}

.industry-panel-heading strong {
  font-size: 0.68rem;
}

.industry-panel-heading span {
  color: var(--blue-600);

  font-size: 0.55rem;
  font-weight: 700;
}

.industry-progress-row {
  margin-bottom: 13px;
}

.industry-progress-row:last-child {
  margin-bottom: 0;
}

.industry-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;

  margin-bottom: 6px;

  color: var(--text-500);

  font-size: 0.52rem;
}

.industry-progress-label strong {
  color: var(--text-800);

  font-size: 0.52rem;
}

.industry-progress {
  height: 5px;

  overflow: hidden;

  background: #edf2f7;

  border-radius: var(--radius-pill);
}

.industry-progress span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background: linear-gradient(90deg, var(--blue-600), var(--blue-500));
}

.industry-notification-panel {
  display: flex;
  align-items: flex-start;
  gap: 11px;

  background: linear-gradient(145deg, #f7fbff, #f2f0ff);
}

.industry-notification-icon {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  flex: 0 0 32px;

  color: var(--purple-600);

  background: var(--purple-100);

  border-radius: 9px;
}

.industry-notification-panel strong {
  display: block;

  margin-bottom: 5px;

  color: var(--text-900);

  font-size: 0.62rem;
  line-height: 1.4;
}

.industry-notification-panel small {
  display: block;

  color: var(--text-500);

  font-size: 0.53rem;
  line-height: 1.55;
}

.industry-dashboard-footer {
  min-height: 35px;

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

  padding: 0 18px;

  color: var(--text-400);

  background: #fafbfd;

  border-top: 1px solid var(--border-light);

  font-size: 0.48rem;
  font-weight: 800;

  letter-spacing: 0.08em;
}

/* =========================================================
   SECTION GLOBAL
========================================================= */

.section {
  position: relative;

  padding: 110px 0;
}

.section-heading {
  max-width: 780px;

  margin: 0 auto 60px;

  text-align: center;
}

.section-heading h2,
.industry-intro-heading h2,
.industry-ecosystem-content h2,
.industry-products-content h2,
.industry-workflow-content h2 {
  margin-bottom: 18px;

  font-size: clamp(2rem, 4vw, 3.25rem);

  line-height: 1.12;
}

.section-heading h2 span,
.industry-intro-heading h2 span,
.industry-ecosystem-content h2 span,
.industry-products-content h2 span,
.industry-workflow-content h2 span {
  color: var(--blue-600);
}

.section-heading p {
  max-width: 680px;

  margin: 0 auto;

  color: var(--text-600);

  font-size: 0.98rem;
  line-height: 1.8;
}

/* =========================================================
   INTRO
========================================================= */

.industry-intro {
  background: var(--white);
}

.industry-intro-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.85fr)
    minmax(0, 1.15fr);

  gap: 90px;

  align-items: center;
}

.industry-intro-heading h2 {
  margin: 0;

  font-size: clamp(2rem, 4vw, 3.15rem);

  line-height: 1.12;
}

.industry-intro-content {
  padding-left: 35px;

  border-left: 2px solid var(--blue-100);
}

.industry-intro-content p {
  color: var(--text-600);

  font-size: 1rem;
  line-height: 1.9;
}

.industry-intro-content p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   SOLUTIONS
========================================================= */

.industry-solutions {
  background: var(--surface);
}

.industry-solution-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 16px;
}

.industry-solution-card {
  position: relative;

  min-height: 310px;

  display: flex;
  flex-direction: column;

  padding: 24px;

  overflow: hidden;

  background: var(--white);

  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-xs);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.industry-solution-card:hover {
  transform: translateY(-7px);

  border-color: rgba(23, 105, 232, 0.18);

  box-shadow: var(--shadow-md);
}

.industry-solution-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 28px;
}

.industry-solution-number {
  color: var(--text-400);

  font-family: "Manrope", sans-serif;

  font-size: 0.68rem;
  font-weight: 800;
}

.industry-solution-icon {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  font-size: 1rem;
}

.industry-solution-icon.orange {
  color: var(--orange-500);
  background: var(--orange-100);
}

.industry-solution-icon.cyan {
  color: var(--cyan-500);
  background: var(--cyan-100);
}

.industry-solution-card-content {
  flex: 1;
}

.industry-solution-card h3 {
  margin-bottom: 10px;

  font-size: 1.05rem;
  line-height: 1.3;
}

.industry-solution-card p {
  margin-bottom: 0;

  color: var(--text-600);

  font-size: 0.78rem;
  line-height: 1.75;
}

.industry-solution-line {
  width: 36px;
  height: 3px;

  margin-top: 22px;

  border-radius: var(--radius-pill);

  background: linear-gradient(90deg, var(--blue-600), var(--purple-500));

  transition: width var(--transition);
}

.industry-solution-card:hover .industry-solution-line {
  width: 72px;
}

/* =========================================================
   ECOSYSTEM
========================================================= */

.industry-ecosystem {
  background: var(--white);
}

.industry-ecosystem-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 0.9fr);

  gap: 90px;

  align-items: center;
}

.industry-ecosystem-visual {
  position: relative;

  width: min(100%, 560px);
  aspect-ratio: 1 / 1;

  margin-inline: auto;

  display: grid;
  place-items: center;
}

.industry-ecosystem-orbit {
  position: absolute;

  border: 1px dashed rgba(23, 105, 232, 0.22);

  border-radius: 50%;
}

.industry-orbit-one {
  width: 68%;
  height: 68%;

  animation: orbitRotate 22s linear infinite;
}

.industry-orbit-two {
  width: 88%;
  height: 88%;

  border-color: rgba(114, 86, 232, 0.17);

  animation: orbitRotateReverse 28s linear infinite;
}

.industry-ecosystem-center {
  position: relative;
  z-index: 4;

  width: 150px;
  height: 150px;

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

  color: var(--white);

  background: linear-gradient(145deg, var(--navy-900), #153b6d);

  border: 8px solid rgba(23, 105, 232, 0.08);

  outline: 1px solid rgba(23, 105, 232, 0.18);

  border-radius: 50%;

  box-shadow: 0 25px 60px rgba(8, 26, 51, 0.22);
}

.industry-ecosystem-center span {
  margin-bottom: 2px;

  font-family: "Manrope", sans-serif;

  font-size: 1.9rem;
  font-weight: 800;
}

.industry-ecosystem-center strong {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.industry-ecosystem-center small {
  color: rgba(255, 255, 255, 0.55);

  font-size: 0.48rem;
}

.industry-ecosystem-node {
  position: absolute;
  z-index: 5;

  min-width: 112px;

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

  gap: 5px;

  padding: 12px;

  background: rgba(255, 255, 255, 0.96);

  border: 1px solid var(--border);

  border-radius: 14px;

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.industry-ecosystem-node:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.industry-ecosystem-node span {
  font-size: 1.05rem;
}

.industry-ecosystem-node strong {
  color: var(--text-800);

  font-size: 0.62rem;
}

.industry-node-students {
  top: 6%;
  left: 50%;

  transform: translateX(-50%);
}

.industry-node-students:hover {
  transform: translateX(-50%) translateY(-5px);
}

.industry-node-academics {
  right: 4%;
  top: 50%;

  transform: translateY(-50%);
}

.industry-node-academics:hover {
  transform: translateY(-50%) translateY(-5px);
}

.industry-node-faculty {
  bottom: 6%;
  left: 50%;

  transform: translateX(-50%);
}

.industry-node-faculty:hover {
  transform: translateX(-50%) translateY(-5px);
}

.industry-node-admin {
  left: 4%;
  top: 50%;

  transform: translateY(-50%);
}

.industry-node-admin:hover {
  transform: translateY(-50%) translateY(-5px);
}

.industry-ecosystem-content h2 {
  margin-bottom: 20px;
}

.industry-ecosystem-content > p {
  margin-bottom: 30px;

  color: var(--text-600);

  line-height: 1.85;
}

.industry-ecosystem-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.industry-ecosystem-item {
  display: grid;

  grid-template-columns: 40px 1fr;

  gap: 15px;

  padding: 16px 0;

  border-top: 1px solid var(--border-light);
}

.industry-ecosystem-item > span {
  color: var(--blue-600);

  font-family: "Manrope", sans-serif;

  font-size: 0.65rem;
  font-weight: 800;
}

.industry-ecosystem-item h3 {
  margin-bottom: 3px;

  font-size: 0.85rem;
}

.industry-ecosystem-item p {
  margin: 0;

  color: var(--text-500);

  font-size: 0.72rem;
  line-height: 1.6;
}

/* =========================================================
   ENTERPRISE TYPES
========================================================= */

.industry-types {
  background: var(--surface);
}

.industry-type-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;
}

.industry-type-card {
  position: relative;

  min-height: 330px;

  display: flex;
  flex-direction: column;

  padding: 28px;

  background: var(--white);

  border: 1px solid var(--border-light);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-xs);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.industry-type-card:hover {
  transform: translateY(-7px);

  border-color: rgba(23, 105, 232, 0.18);

  box-shadow: var(--shadow-md);
}

.industry-type-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 38px;
}

.industry-type-top > span {
  color: var(--text-400);

  font-family: "Manrope", sans-serif;

  font-size: 0.65rem;
  font-weight: 800;
}

.industry-type-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 13px;
}

.industry-type-icon.blue {
  color: var(--blue-600);
  background: var(--blue-100);
}

.industry-type-icon.purple {
  color: var(--purple-600);
  background: var(--purple-100);
}

.industry-type-icon.green {
  color: var(--green-600);
  background: var(--green-100);
}

.industry-type-content {
  flex: 1;
}

.industry-type-content h3 {
  margin-bottom: 10px;

  font-size: 1.15rem;
}

.industry-type-content p {
  margin-bottom: 0;

  color: var(--text-600);

  font-size: 0.8rem;
  line-height: 1.75;
}

.industry-type-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-top: 25px;

  color: var(--blue-600);

  font-size: 0.7rem;
  font-weight: 800;
}

.industry-type-link span {
  transition: transform var(--transition-fast);
}

.industry-type-card:hover .industry-type-link span {
  transform: translateX(4px);
}

/* =========================================================
   PRODUCTS
========================================================= */

.industry-products {
  background: var(--white);
}

.industry-products-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.85fr)
    minmax(0, 1.15fr);

  gap: 80px;

  align-items: center;
}

.industry-products-content h2 {
  margin-bottom: 20px;
}

.industry-products-content > p {
  color: var(--text-600);

  font-size: 0.9rem;
  line-height: 1.85;
}

.industry-products-content .btn {
  margin-top: 12px;
}

.industry-product-stack {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.industry-product-card {
  display: flex;
  align-items: center;
  gap: 16px;

  padding: 22px;

  background: linear-gradient(135deg, #f8fbff, #ffffff);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.industry-product-card:hover {
  transform: translateY(-5px);

  border-color: rgba(23, 105, 232, 0.2);

  box-shadow: var(--shadow-md);
}

.industry-product-icon {
  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  flex: 0 0 54px;

  border-radius: 14px;

  font-size: 1.2rem;
}

.industry-product-icon.green {
  color: var(--green-600);
  background: var(--green-100);
}

.industry-product-card-content {
  flex: 1;
}

.industry-product-card-content small {
  display: block;

  margin-bottom: 3px;

  color: var(--text-400);

  font-size: 0.52rem;
  font-weight: 800;

  letter-spacing: 0.1em;
}

.industry-product-card-content strong {
  display: block;

  margin-bottom: 4px;

  color: var(--text-950);

  font-family: "Manrope", sans-serif;

  font-size: 1.1rem;
}

.industry-product-card-content span {
  display: block;

  color: var(--text-500);

  font-size: 0.7rem;
}

.industry-product-arrow {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  color: var(--blue-600);

  background: var(--blue-100);

  border-radius: 50%;

  transition: transform var(--transition-fast);
}

.industry-product-card:hover .industry-product-arrow {
  transform: translateX(4px);
}

.industry-product-mini-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;
}

.industry-product-mini {
  padding: 18px;

  background: var(--surface);

  border: 1px solid var(--border-light);

  border-radius: 14px;

  transition:
    transform var(--transition-fast),
    background var(--transition-fast);
}

.industry-product-mini:hover {
  background: var(--white);
  transform: translateY(-3px);
}

.industry-product-mini > span {
  display: block;

  margin-bottom: 10px;

  font-size: 1rem;
}

.industry-product-mini strong {
  display: block;

  margin-bottom: 3px;

  color: var(--text-900);

  font-size: 0.72rem;
}

.industry-product-mini small {
  display: block;

  color: var(--text-500);

  font-size: 0.6rem;
  line-height: 1.5;
}

/* =========================================================
   BENEFITS
========================================================= */

.industry-benefits {
  background: var(--surface);
}

.industry-benefits-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 14px;
}

.industry-benefit-card {
  display: grid;

  grid-template-columns: 38px 1fr;

  gap: 14px;

  padding: 24px;

  background: var(--white);

  border: 1px solid var(--border-light);

  border-radius: 16px;

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.industry-benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-sm);
}

.industry-benefit-card > span {
  color: var(--blue-600);

  font-family: "Manrope", sans-serif;

  font-size: 0.65rem;
  font-weight: 800;
}

.industry-benefit-card h3 {
  margin-bottom: 7px;

  font-size: 0.95rem;
}

.industry-benefit-card p {
  margin: 0;

  color: var(--text-500);

  font-size: 0.7rem;
  line-height: 1.7;
}

/* =========================================================
   WORKFLOW
========================================================= */

.industry-workflow {
  position: relative;

  padding: 115px 0;

  color: var(--white);

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(49, 130, 246, 0.15),
      transparent 35%
    ),
    linear-gradient(135deg, var(--navy-950), var(--navy-900));

  overflow: hidden;
}

.industry-workflow::before {
  content: "";

  position: absolute;

  inset: 0;

  opacity: 0.35;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);

  background-size: 60px 60px;
}

.industry-workflow-grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1.2fr);

  gap: 90px;

  align-items: start;
}

.industry-workflow-content .eyebrow {
  color: #7fb5ff;
}

.industry-workflow-content h2 {
  color: var(--white);
}

.industry-workflow-content h2 span {
  color: #62a0ff;
}

.industry-workflow-content > p {
  max-width: 520px;

  color: rgba(255, 255, 255, 0.62);

  font-size: 0.9rem;
  line-height: 1.85;
}

.industry-workflow-steps {
  position: relative;
}

.industry-workflow-steps::before {
  content: "";

  position: absolute;

  top: 28px;
  bottom: 28px;
  left: 19px;

  width: 1px;

  background: linear-gradient(
    180deg,
    rgba(49, 130, 246, 0.7),
    rgba(255, 255, 255, 0.12)
  );
}

.industry-workflow-step {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns: 40px 1fr;

  gap: 20px;

  padding: 0 0 34px;
}

.industry-workflow-step:last-child {
  padding-bottom: 0;
}

.industry-workflow-step > span {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  color: #83b8ff;

  background: var(--navy-900);

  border: 1px solid rgba(79, 145, 232, 0.55);

  border-radius: 50%;

  font-family: "Manrope", sans-serif;

  font-size: 0.62rem;
  font-weight: 800;
}

.industry-workflow-step h3 {
  margin-bottom: 6px;

  color: var(--white);

  font-size: 0.98rem;
}

.industry-workflow-step p {
  max-width: 620px;

  margin: 0;

  color: rgba(255, 255, 255, 0.58);

  font-size: 0.72rem;
  line-height: 1.75;
}

/* =========================================================
   FINAL CTA
========================================================= */

.industry-cta {
  position: relative;

  padding: 110px 0;

  overflow: hidden;

  background: linear-gradient(135deg, var(--blue-700), #1749a8);

  color: var(--white);
}

.industry-cta-grid {
  position: absolute;
  inset: 0;

  opacity: 0.25;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);

  background-size: 50px 50px;
}

.industry-cta::before,
.industry-cta::after {
  content: "";

  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}

.industry-cta::before {
  width: 420px;
  height: 420px;

  right: -160px;
  top: -180px;

  background: rgba(255, 255, 255, 0.08);
}

.industry-cta::after {
  width: 300px;
  height: 300px;

  left: -150px;
  bottom: -160px;

  background: rgba(7, 29, 64, 0.13);
}

.industry-cta-content {
  position: relative;
  z-index: 2;

  max-width: 820px;

  margin-inline: auto;

  text-align: center;
}

.industry-cta-mark {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  margin: 0 auto 20px;

  color: var(--blue-700);

  background: var(--white);

  border-radius: 15px;

  font-family: "Manrope", sans-serif;

  font-size: 1.3rem;
  font-weight: 800;

  box-shadow: 0 15px 35px rgba(8, 26, 51, 0.16);
}

.industry-cta .eyebrow {
  color: rgba(255, 255, 255, 0.68);
}

.industry-cta h2 {
  margin-bottom: 20px;

  color: var(--white);

  font-size: clamp(2.1rem, 4vw, 3.5rem);

  line-height: 1.1;
}

.industry-cta h2 span {
  color: #b9d5ff;
}

.industry-cta-content > p {
  max-width: 700px;

  margin: 0 auto 30px;

  color: rgba(255, 255, 255, 0.7);

  font-size: 0.95rem;
  line-height: 1.85;
}

.industry-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;

  flex-wrap: wrap;
}

.industry-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: var(--white);

  font-size: 0.8rem;
  font-weight: 700;

  border-bottom: 1px solid rgba(255, 255, 255, 0.4);

  padding-bottom: 3px;
}

.industry-cta-link span {
  transition: transform var(--transition-fast);
}

.industry-cta-link:hover span {
  transform: translateX(4px);
}

/* =========================================================
   FOOTER
========================================================= */

.site-footer {
  color: rgba(255, 255, 255, 0.62);

  background: var(--navy-950);
}

.footer-grid {
  display: grid;

  grid-template-columns:
    1.8fr
    repeat(5, 1fr);

  gap: 35px;

  padding-bottom: 55px;
}

.footer-brand {
  max-width: 300px;
}

.footer-brand img {
  width: 170px;

  margin-bottom: 20px;
}

.footer-brand p {
  margin-bottom: 24px;

  color: rgba(255, 255, 255, 0.52);

  font-size: 0.75rem;
  line-height: 1.8;
}

.footer-column {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

.footer-column h3 {
  margin-bottom: 10px;

  color: var(--white);

  font-size: 0.78rem;

  letter-spacing: 0.01em;
}

.footer-column a {
  color: rgba(255, 255, 255, 0.52);

  font-size: 0.68rem;

  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.footer-column a:hover {
  color: var(--white);
  transform: translateX(3px);
}

/* =========================================================
   FOOTER SOCIAL
========================================================= */

.footer-social-label {
  display: block;

  margin-bottom: 10px;

  color: rgba(255, 255, 255, 0.38);

  font-size: 0.58rem;
  font-weight: 800;

  letter-spacing: 0.12em;
}

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

.footer-social-link {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  color: rgba(255, 255, 255, 0.65);

  background: rgba(255, 255, 255, 0.055);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 9px;

  transition:
    transform var(--transition-fast),
    color var(--transition-fast),
    background var(--transition-fast);
}

.footer-social-link:hover {
  color: var(--white);

  transform: translateY(-3px);
}

.footer-social-link.linkedin:hover {
  background: #0a66c2;
}

.footer-social-link.instagram:hover {
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
}

.footer-social-link.whatsapp:hover {
  background: #25d366;
}

.footer-social-link.youtube:hover {
  background: #ff0000;
}

/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
  min-height: 70px;

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

  gap: 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom p {
  margin: 0;

  color: rgba(255, 255, 255, 0.38);

  font-size: 0.62rem;
}

.footer-bottom > div {
  display: flex;
  gap: 20px;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.42);

  font-size: 0.62rem;

  transition: color var(--transition-fast);
}

.footer-bottom a:hover {
  color: var(--white);
}

/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {
  opacity: 0;

  transform: translateY(28px);

  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.revealed {
  opacity: 1;

  transform: translateY(0);
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes dashboardFloat {
  0%,
  100% {
    transform: perspective(1200px) rotateY(-4deg) rotateX(2deg) translateY(0);
  }

  50% {
    transform: perspective(1200px) rotateY(-4deg) rotateX(2deg)
      translateY(-10px);
  }
}

@keyframes enterpriseGlow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

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

@keyframes orbitRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes orbitRotateReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(49, 130, 246, 0.35);

  outline-offset: 3px;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1150px) {
  :root {
    --header-height: 74px;
  }

  .container {
    width: min(calc(100% - 40px), var(--container));
  }

  .main-navigation {
    gap: 0;
  }

  .nav-link {
    padding-inline: 8px;

    font-size: 0.76rem;
  }

  .header-actions {
    gap: 9px;
  }

  .header-contact {
    display: none;
  }

  .mega-menu {
    width: min(900px, calc(100vw - 30px));
  }

  .industry-hero-container {
    gap: 45px;
  }

  .industry-solution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .industry-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: span 3;

    max-width: 520px;
  }
}

/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {
  .main-navigation,
  .header-actions {
    display: none;
  }

  .mobile-menu-button {
    display: block;
  }

  .mobile-navigation {
    position: fixed;

    z-index: 999;

    top: var(--header-height);
    left: 0;
    right: 0;

    max-height: calc(100vh - var(--header-height));

    padding: 18px 22px 30px;

    overflow-y: auto;

    background: rgba(255, 255, 255, 0.98);

    border-top: 1px solid var(--border-light);

    box-shadow: 0 25px 50px rgba(8, 26, 51, 0.12);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-10px);

    transition:
      opacity var(--transition),
      visibility var(--transition),
      transform var(--transition);
  }

  .mobile-navigation.active {
    display: block;

    opacity: 1;
    visibility: visible;

    transform: translateY(0);
  }

  .mobile-navigation > a,
  .mobile-nav-trigger {
    width: 100%;

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

    min-height: 48px;

    padding: 0;

    color: var(--text-900);

    background: transparent;

    border-bottom: 1px solid var(--border-light);

    font-size: 0.9rem;
    font-weight: 700;

    text-align: left;

    cursor: pointer;
  }

  .mobile-nav-group {
    border-bottom: 1px solid var(--border-light);
  }

  .mobile-nav-group .mobile-nav-trigger {
    border-bottom: 0;
  }

  .mobile-nav-trigger > span {
    color: var(--blue-600);

    font-size: 1.15rem;

    transition: transform var(--transition-fast);
  }

  .mobile-nav-group.open .mobile-nav-trigger > span {
    transform: rotate(45deg);
  }

  .mobile-submenu {
    max-height: 0;

    overflow: hidden;

    transition: max-height var(--transition);
  }

  .mobile-submenu a {
    display: block;

    padding: 8px 0 8px 15px;

    color: var(--text-600);

    font-size: 0.8rem;
  }

  .mobile-submenu a:first-child {
    padding-top: 5px;
  }

  .mobile-submenu a:last-child {
    padding-bottom: 14px;
  }

  .mobile-demo-button {
    display: flex !important;
    align-items: center;
    justify-content: center;

    margin-top: 18px;

    min-height: 48px;

    color: var(--white) !important;

    background: linear-gradient(135deg, var(--blue-600), var(--blue-500));

    border: 0 !important;
    border-radius: var(--radius-pill);
  }

  .industry-hero {
    min-height: auto;

    padding-top: calc(var(--header-height) + 60px);

    padding-bottom: 75px;
  }

  .industry-hero-container {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .industry-hero-content {
    max-width: 760px;
  }

  .industry-hero-visual {
    min-height: 490px;
  }

  .industry-ecosystem-grid,
  .industry-products-grid,
  .industry-workflow-grid,
  .industry-intro-grid {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .industry-intro-content {
    padding-left: 25px;
  }

  .industry-ecosystem-content,
  .industry-products-content {
    max-width: 750px;
  }

  .industry-ecosystem-visual {
    max-width: 500px;
  }

  .industry-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {
  :root {
    --header-height: 68px;
  }

  .container {
    width: calc(100% - 32px);
  }

  .brand img {
    width: 145px;
  }

  .section {
    padding: 78px 0;
  }

  .industry-hero {
    padding-top: calc(var(--header-height) + 48px);

    padding-bottom: 60px;
  }

  .industry-hero h1 {
    font-size: clamp(2.45rem, 12vw, 3.55rem);
  }

  .industry-hero-content > p {
    font-size: 0.9rem;
    line-height: 1.75;
  }

  .industry-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .industry-hero-actions .btn {
    width: 100%;
  }

  .industry-hero-meta {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(3, 1fr);
  }

  .industry-hero-meta-item {
    min-width: 0;

    padding-right: 10px;
    margin-right: 10px;
  }

  .industry-hero-meta-item strong {
    font-size: 0.68rem;
  }

  .industry-hero-meta-item span {
    font-size: 0.59rem;
  }

  .industry-hero-visual {
    min-height: 390px;
  }

  .industry-dashboard {
    width: 100%;

    transform: none;

    animation: dashboardFloatMobile 6s ease-in-out infinite;
  }

  .industry-dashboard-header {
    min-height: 64px;

    padding: 11px 13px;
  }

  .industry-dashboard-brand strong {
    font-size: 0.64rem;
  }

  .industry-dashboard-brand small {
    font-size: 0.43rem;
  }

  .industry-dashboard-logo {
    width: 32px;
    height: 32px;
  }

  .industry-dashboard-status {
    display: none;
  }

  .industry-dashboard-body {
    padding: 17px;
  }

  .industry-dashboard-welcome {
    margin-bottom: 16px;
  }

  .industry-dashboard-welcome h3 {
    font-size: 0.82rem;
  }

  .industry-date-box {
    width: 42px;
    height: 45px;
  }

  .industry-dashboard-stats {
    grid-template-columns: 1fr;
  }

  .industry-mini-stat {
    padding: 9px;
  }

  .industry-dashboard-panels {
    grid-template-columns: 1fr;
  }

  .industry-notification-panel {
    display: none;
  }

  .industry-dashboard-footer {
    min-height: 30px;

    padding-inline: 13px;

    font-size: 0.39rem;
  }

  .section-heading {
    margin-bottom: 40px;
  }

  .section-heading h2,
  .industry-intro-heading h2,
  .industry-ecosystem-content h2,
  .industry-products-content h2,
  .industry-workflow-content h2 {
    font-size: clamp(1.9rem, 9vw, 2.5rem);
  }

  .section-heading p {
    font-size: 0.84rem;
  }

  .industry-intro-grid,
  .industry-ecosystem-grid,
  .industry-products-grid,
  .industry-workflow-grid {
    gap: 40px;
  }

  .industry-intro-content {
    padding-left: 18px;
  }

  .industry-intro-content p {
    font-size: 0.85rem;
  }

  .industry-solution-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .industry-solution-card {
    min-height: auto;

    padding: 21px;
  }

  .industry-solution-card-top {
    margin-bottom: 20px;
  }

  .industry-solution-card h3 {
    font-size: 0.98rem;
  }

  .industry-solution-card p {
    font-size: 0.74rem;
  }

  .industry-ecosystem-visual {
    width: 100%;
  }

  .industry-ecosystem-center {
    width: 118px;
    height: 118px;
  }

  .industry-ecosystem-center span {
    font-size: 1.5rem;
  }

  .industry-ecosystem-center strong {
    font-size: 0.62rem;
  }

  .industry-ecosystem-node {
    min-width: 88px;

    padding: 8px;

    border-radius: 11px;
  }

  .industry-ecosystem-node strong {
    font-size: 0.52rem;
  }

  .industry-ecosystem-node span {
    font-size: 0.85rem;
  }

  .industry-node-students {
    top: 2%;
  }

  .industry-node-academics {
    right: 0;
  }

  .industry-node-faculty {
    bottom: 2%;
  }

  .industry-node-admin {
    left: 0;
  }

  .industry-ecosystem-content > p {
    font-size: 0.84rem;
  }

  .industry-ecosystem-item {
    grid-template-columns: 32px 1fr;
    gap: 10px;
  }

  .industry-ecosystem-item h3 {
    font-size: 0.82rem;
  }

  .industry-ecosystem-item p {
    font-size: 0.67rem;
  }

  .industry-type-grid {
    grid-template-columns: 1fr;
  }

  .industry-type-card {
    min-height: 285px;

    padding: 23px;
  }

  .industry-products-grid {
    gap: 40px;
  }

  .industry-products-content > p {
    font-size: 0.83rem;
  }

  .industry-product-card {
    padding: 17px;

    gap: 11px;
  }

  .industry-product-icon {
    width: 44px;
    height: 44px;

    flex-basis: 44px;
  }

  .industry-product-card-content strong {
    font-size: 0.92rem;
  }

  .industry-product-card-content span {
    font-size: 0.61rem;
  }

  .industry-product-arrow {
    width: 30px;
    height: 30px;
  }

  .industry-product-mini-grid {
    grid-template-columns: 1fr;
  }

  .industry-benefits-grid {
    grid-template-columns: 1fr;
  }

  .industry-benefit-card {
    padding: 19px;
  }

  .industry-workflow {
    padding: 78px 0;
  }

  .industry-workflow-steps::before {
    left: 16px;
  }

  .industry-workflow-step {
    grid-template-columns: 34px 1fr;

    gap: 15px;

    padding-bottom: 27px;
  }

  .industry-workflow-step > span {
    width: 33px;
    height: 33px;

    font-size: 0.55rem;
  }

  .industry-workflow-step h3 {
    font-size: 0.88rem;
  }

  .industry-workflow-step p {
    font-size: 0.67rem;
  }

  .industry-cta {
    padding: 80px 0;
  }

  .industry-cta h2 {
    font-size: clamp(2rem, 9vw, 2.65rem);
  }

  .industry-cta-content > p {
    font-size: 0.82rem;
  }

  .industry-cta-actions {
    flex-direction: column;
    gap: 18px;
  }

  .industry-cta-actions .btn {
    width: 100%;
  }

  .site-footer {
    padding-top: 55px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 35px 25px;
  }

  .footer-brand {
    grid-column: span 2;
  }

  .footer-column {
    gap: 8px;
  }

  .footer-column h3 {
    font-size: 0.72rem;
  }

  .footer-column a {
    font-size: 0.63rem;
  }

  .footer-bottom {
    min-height: auto;

    padding: 20px 0;

    flex-direction: column;
    align-items: flex-start;

    gap: 10px;
  }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .container {
    width: calc(100% - 26px);
  }

  .brand img {
    width: 132px;
  }

  .industry-hero h1 {
    font-size: 2.35rem;
  }

  .industry-hero-meta-item {
    padding-right: 6px;
    margin-right: 6px;
  }

  .industry-hero-meta-item strong {
    font-size: 0.62rem;
  }

  .industry-hero-meta-item span {
    font-size: 0.54rem;
  }

  .industry-hero-visual {
    min-height: 350px;
  }

  .industry-dashboard-body {
    padding: 13px;
  }

  .industry-dashboard-brand {
    gap: 8px;
  }

  .industry-dashboard-logo {
    width: 29px;
    height: 29px;

    font-size: 0.8rem;
  }

  .industry-dashboard-brand strong {
    font-size: 0.58rem;
  }

  .industry-dashboard-brand small {
    font-size: 0.38rem;
  }

  .industry-mini-stat {
    padding: 8px;
  }

  .industry-mini-icon {
    width: 30px;
    height: 30px;

    flex-basis: 30px;
  }

  .industry-mini-stat strong {
    font-size: 0.59rem;
  }

  .industry-mini-stat small {
    font-size: 0.47rem;
  }

  .industry-dashboard-panel {
    padding: 12px;
  }

  .industry-product-card-content small {
    font-size: 0.43rem;
  }

  .industry-product-card-content strong {
    font-size: 0.82rem;
  }

  .industry-product-card-content span {
    font-size: 0.55rem;
  }

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

  .footer-brand {
    grid-column: span 1;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   MOBILE DASHBOARD ANIMATION
========================================================= */

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

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

/* Educational Institution Industries Page  */
/* Industries Educational Institutions Page */
/* =========================================================
   KAMAL GROUP OF CORPORATE
   EDUCATIONAL INSTITUTIONS INDUSTRY PAGE
   GLOBAL + EDUCATION PAGE STYLES
========================================================= */

/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {
  --navy-950: #061326;
  --navy-900: #081a33;
  --navy-850: #0b2140;
  --navy-800: #102a4d;
  --navy-700: #17385f;

  --blue-700: #1459d9;
  --blue-600: #1769e8;
  --blue-500: #3182f6;
  --blue-100: #eaf3ff;

  --purple-600: #7256e8;
  --purple-500: #8a6cf0;
  --purple-100: #f0edff;

  --green-600: #0d9b72;
  --green-500: #19b786;
  --green-100: #e8faf4;

  --cyan-500: #0ea5c9;
  --cyan-100: #e8f9fd;

  --orange-500: #f28a38;
  --orange-100: #fff3e7;

  --yellow-500: #eab308;
  --yellow-100: #fff9db;

  --white: #ffffff;
  --off-white: #f8fafc;
  --surface: #f5f8fc;
  --surface-2: #eef3f9;

  --text-950: #0a1729;
  --text-900: #122039;
  --text-800: #263750;
  --text-700: #43536b;
  --text-600: #5d6b80;
  --text-500: #738096;
  --text-400: #94a0b2;

  --border: #dfe6ef;
  --border-light: #e9eef5;

  --shadow-xs: 0 2px 8px rgba(8, 26, 51, 0.04);

  --shadow-sm: 0 8px 24px rgba(8, 26, 51, 0.07);

  --shadow-md: 0 18px 45px rgba(8, 26, 51, 0.1);

  --shadow-lg: 0 30px 80px rgba(8, 26, 51, 0.14);

  --shadow-blue: 0 20px 60px rgba(23, 105, 232, 0.2);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --container: 1240px;

  --header-height: 82px;

  --transition-fast: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);

  --transition: 300ms cubic-bezier(0.2, 0.7, 0.2, 1);

  --transition-slow: 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* =========================================================
   HERO
========================================================= */

.education-hero {
  position: relative;

  min-height: 790px;

  display: flex;
  align-items: center;

  padding: calc(var(--header-height) + 75px) 0 90px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 85% 25%,
      rgba(49, 130, 246, 0.13),
      transparent 34%
    ),
    radial-gradient(
      circle at 70% 80%,
      rgba(25, 183, 134, 0.08),
      transparent 30%
    ),
    linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
}

.education-hero-grid {
  position: absolute;
  inset: 0;

  opacity: 0.45;

  background-image:
    linear-gradient(rgba(23, 105, 232, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 105, 232, 0.055) 1px, transparent 1px);

  background-size: 58px 58px;

  mask-image: linear-gradient(90deg, black, transparent 75%);
}

.education-hero-container {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  gap: 72px;

  align-items: center;
}

/* =========================================================
   HERO CONTENT
========================================================= */

.education-hero-content {
  position: relative;
  z-index: 3;
}

.education-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 22px;

  color: var(--navy-900);

  font-size: 0.7rem;
  font-weight: 800;

  letter-spacing: 0.13em;
}

.education-label-mark {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  color: var(--white);

  background: linear-gradient(135deg, var(--navy-900), var(--blue-600));

  border-radius: 9px;

  font-family: "Manrope", sans-serif;
  font-size: 0.8rem;
}

.education-hero h1 {
  max-width: 700px;

  margin-bottom: 24px;

  font-size: clamp(2.8rem, 5vw, 4.65rem);

  line-height: 1.04;

  letter-spacing: -0.055em;
}

.education-hero h1 span {
  display: inline;

  color: var(--blue-600);
}

.education-hero-content > p {
  max-width: 620px;

  margin-bottom: 30px;

  color: var(--text-600);

  font-size: clamp(0.98rem, 1.5vw, 1.08rem);

  line-height: 1.8;
}

.education-hero-actions {
  display: flex;
  align-items: center;
  gap: 13px;

  flex-wrap: wrap;

  margin-bottom: 40px;
}

.education-hero-meta {
  display: flex;
  align-items: center;
  gap: 0;
}

.education-hero-meta-item {
  min-width: 120px;

  padding-right: 22px;
  margin-right: 22px;

  border-right: 1px solid var(--border);
}

.education-hero-meta-item:last-child {
  padding-right: 0;
  margin-right: 0;

  border-right: 0;
}

.education-hero-meta-item strong {
  display: block;

  margin-bottom: 2px;

  color: var(--text-900);

  font-family: "Manrope", sans-serif;

  font-size: 0.8rem;
}

.education-hero-meta-item span {
  color: var(--text-500);

  font-size: 0.68rem;
}

/* =========================================================
   HERO EDUCATION DASHBOARD
========================================================= */

.education-hero-visual {
  position: relative;

  min-height: 560px;

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

.education-visual-glow {
  position: absolute;

  width: 480px;
  height: 480px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(23, 105, 232, 0.16),
    rgba(25, 183, 134, 0.06) 45%,
    transparent 70%
  );

  filter: blur(8px);

  animation: educationGlow 7s ease-in-out infinite;
}

/* =========================================================
   EDUCATION DASHBOARD
========================================================= */

.education-dashboard {
  position: relative;
  z-index: 2;

  width: min(100%, 610px);

  overflow: hidden;

  background: rgba(255, 255, 255, 0.95);

  border: 1px solid rgba(214, 225, 239, 0.95);

  border-radius: 22px;

  box-shadow:
    0 35px 90px rgba(8, 26, 51, 0.15),
    0 10px 35px rgba(23, 105, 232, 0.08);

  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);

  animation: educationDashboardFloat 6s ease-in-out infinite;
}

/* =========================================================
   DASHBOARD HEADER
========================================================= */

.education-dashboard-header {
  min-height: 76px;

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

  gap: 20px;

  padding: 14px 18px;

  color: var(--white);

  background: linear-gradient(135deg, #081a33, #123662);
}

.education-dashboard-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.education-dashboard-logo {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  color: var(--navy-900);

  background: var(--white);

  border-radius: 10px;

  font-family: "Manrope", sans-serif;

  font-size: 1rem;
  font-weight: 800;
}

.education-dashboard-brand small {
  display: block;

  margin-bottom: 2px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 0.52rem;
  font-weight: 700;

  letter-spacing: 0.12em;
}

.education-dashboard-brand strong {
  display: block;

  color: var(--white);

  font-family: "Manrope", sans-serif;

  font-size: 0.75rem;
}

.education-dashboard-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 9px;

  color: #8ef0ce;

  background: rgba(25, 183, 134, 0.1);

  border: 1px solid rgba(25, 183, 134, 0.2);

  border-radius: var(--radius-pill);

  font-size: 0.52rem;
  font-weight: 800;

  letter-spacing: 0.07em;
}

/* =========================================================
   DASHBOARD BODY
========================================================= */

.education-dashboard-body {
  padding: 25px;
}

.education-dashboard-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 22px;
}

.education-dashboard-welcome small {
  display: block;

  margin-bottom: 4px;

  color: var(--text-400);

  font-size: 0.55rem;
  font-weight: 800;

  letter-spacing: 0.12em;
}

.education-dashboard-welcome h3 {
  margin: 0;

  font-size: 1rem;
}

.education-dashboard-welcome h3 span {
  color: var(--blue-600);
}

.education-date-box {
  width: 48px;
  height: 52px;

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

  color: var(--white);

  background: var(--blue-600);

  border-radius: 10px;

  box-shadow: 0 8px 20px rgba(23, 105, 232, 0.2);
}

.education-date-box span {
  font-size: 0.48rem;
  font-weight: 800;

  letter-spacing: 0.08em;
}

.education-date-box strong {
  font-family: "Manrope", sans-serif;

  font-size: 1.15rem;

  line-height: 1;
}

/* =========================================================
   DASHBOARD STATS
========================================================= */

.education-dashboard-stats {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 10px;

  margin-bottom: 14px;
}

.education-mini-stat {
  display: flex;
  align-items: center;

  gap: 9px;

  padding: 12px;

  background: var(--surface);

  border: 1px solid var(--border-light);

  border-radius: 12px;
}

.education-mini-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  flex: 0 0 34px;

  border-radius: 9px;

  font-size: 0.85rem;
}

.education-mini-icon.blue {
  color: var(--blue-600);
  background: var(--blue-100);
}

.education-mini-icon.green {
  color: var(--green-600);
  background: var(--green-100);
}

.education-mini-icon.purple {
  color: var(--purple-600);
  background: var(--purple-100);
}

.education-mini-icon.orange {
  color: var(--orange-500);
  background: var(--orange-100);
}

.education-mini-stat strong {
  display: block;

  margin-bottom: 1px;

  color: var(--text-900);

  font-size: 0.65rem;
}

.education-mini-stat small {
  display: block;

  color: var(--text-500);

  font-size: 0.51rem;

  line-height: 1.3;
}

/* =========================================================
   DASHBOARD PANELS
========================================================= */

.education-dashboard-panels {
  display: grid;

  grid-template-columns:
    1.3fr
    0.7fr;

  gap: 12px;
}

.education-dashboard-panel,
.education-notification-panel {
  padding: 16px;

  background: var(--white);

  border: 1px solid var(--border);

  border-radius: 13px;
}

.education-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 16px;
}

.education-panel-heading strong {
  font-size: 0.68rem;
}

.education-panel-heading span {
  color: var(--blue-600);

  font-size: 0.55rem;
  font-weight: 700;
}

/* =========================================================
   COURSE / PROGRAM PROGRESS
========================================================= */

.education-progress-row {
  margin-bottom: 13px;
}

.education-progress-row:last-child {
  margin-bottom: 0;
}

.education-progress-label {
  display: flex;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 6px;

  color: var(--text-500);

  font-size: 0.52rem;
}

.education-progress-label strong {
  color: var(--text-800);

  font-size: 0.52rem;
}

.education-progress {
  height: 5px;

  overflow: hidden;

  background: #edf2f7;

  border-radius: var(--radius-pill);
}

.education-progress span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background: linear-gradient(90deg, var(--blue-600), var(--blue-500));
}

/* =========================================================
   DASHBOARD NOTIFICATION
========================================================= */

.education-notification-panel {
  display: flex;
  align-items: flex-start;

  gap: 11px;

  background: linear-gradient(145deg, #f7fbff, #f1fff9);
}

.education-notification-icon {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  flex: 0 0 32px;

  color: var(--green-600);

  background: var(--green-100);

  border-radius: 9px;
}

.education-notification-panel strong {
  display: block;

  margin-bottom: 5px;

  color: var(--text-900);

  font-size: 0.62rem;

  line-height: 1.4;
}

.education-notification-panel small {
  display: block;

  color: var(--text-500);

  font-size: 0.53rem;

  line-height: 1.55;
}

/* =========================================================
   DASHBOARD FOOTER
========================================================= */

.education-dashboard-footer {
  min-height: 35px;

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

  padding: 0 18px;

  color: var(--text-400);

  background: #fafbfd;

  border-top: 1px solid var(--border-light);

  font-size: 0.48rem;
  font-weight: 800;

  letter-spacing: 0.08em;
}

/* =========================================================
   GLOBAL SECTIONS
========================================================= */

.education-section {
  position: relative;

  padding: 110px 0;
}

.education-section-heading {
  max-width: 780px;

  margin: 0 auto 60px;

  text-align: center;
}

.education-section-heading h2,
.education-intro-heading h2,
.education-ecosystem-content h2,
.education-products-content h2,
.education-workflow-content h2 {
  margin-bottom: 18px;

  font-size: clamp(2rem, 4vw, 3.25rem);

  line-height: 1.12;
}

.education-section-heading h2 span,
.education-intro-heading h2 span,
.education-ecosystem-content h2 span,
.education-products-content h2 span,
.education-workflow-content h2 span {
  color: var(--blue-600);
}

.education-section-heading p {
  max-width: 680px;

  margin: 0 auto;

  color: var(--text-600);

  font-size: 0.98rem;

  line-height: 1.8;
}

/* =========================================================
   INTRO
========================================================= */

.education-intro {
  background: var(--white);
}

.education-intro-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.85fr)
    minmax(0, 1.15fr);

  gap: 90px;

  align-items: center;
}

.education-intro-heading h2 {
  margin: 0;

  font-size: clamp(2rem, 4vw, 3.15rem);

  line-height: 1.12;
}

.education-intro-content {
  padding-left: 35px;

  border-left: 2px solid var(--blue-100);
}

.education-intro-content p {
  color: var(--text-600);

  font-size: 1rem;

  line-height: 1.9;
}

.education-intro-content p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   EDUCATION SOLUTIONS
========================================================= */

.education-solutions {
  background: var(--surface);
}

.education-solution-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 16px;
}

.education-solution-card {
  position: relative;

  min-height: 310px;

  display: flex;
  flex-direction: column;

  padding: 24px;

  overflow: hidden;

  background: var(--white);

  border: 1px solid var(--border-light);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-xs);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.education-solution-card:hover {
  transform: translateY(-7px);

  border-color: rgba(23, 105, 232, 0.18);

  box-shadow: var(--shadow-md);
}

.education-solution-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 28px;
}

.education-solution-number {
  color: var(--text-400);

  font-family: "Manrope", sans-serif;

  font-size: 0.68rem;
  font-weight: 800;
}

.education-solution-icon {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  font-size: 1rem;
}

.education-solution-icon.blue {
  color: var(--blue-600);
  background: var(--blue-100);
}

.education-solution-icon.green {
  color: var(--green-600);
  background: var(--green-100);
}

.education-solution-icon.purple {
  color: var(--purple-600);
  background: var(--purple-100);
}

.education-solution-icon.orange {
  color: var(--orange-500);
  background: var(--orange-100);
}

.education-solution-card-content {
  flex: 1;
}

.education-solution-card h3 {
  margin-bottom: 10px;

  font-size: 1.05rem;

  line-height: 1.3;
}

.education-solution-card p {
  margin-bottom: 0;

  color: var(--text-600);

  font-size: 0.78rem;

  line-height: 1.75;
}

.education-solution-line {
  width: 36px;
  height: 3px;

  margin-top: 22px;

  border-radius: var(--radius-pill);

  background: linear-gradient(90deg, var(--blue-600), var(--green-500));

  transition: width var(--transition);
}

.education-solution-card:hover .education-solution-line {
  width: 72px;
}

/* =========================================================
   EDUCATION ECOSYSTEM
========================================================= */

.education-ecosystem {
  background: var(--white);
}

.education-ecosystem-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 0.9fr);

  gap: 90px;

  align-items: center;
}

.education-ecosystem-visual {
  position: relative;

  width: min(100%, 560px);

  aspect-ratio: 1 / 1;

  margin-inline: auto;

  display: grid;

  place-items: center;
}

.education-ecosystem-orbit {
  position: absolute;

  border: 1px dashed rgba(23, 105, 232, 0.22);

  border-radius: 50%;
}

.education-orbit-one {
  width: 68%;
  height: 68%;

  animation: educationOrbitRotate 22s linear infinite;
}

.education-orbit-two {
  width: 88%;
  height: 88%;

  border-color: rgba(25, 183, 134, 0.18);

  animation: educationOrbitRotateReverse 28s linear infinite;
}

/* =========================================================
   ECOSYSTEM CENTER
========================================================= */

.education-ecosystem-center {
  position: relative;

  z-index: 4;

  width: 150px;
  height: 150px;

  display: flex;
  flex-direction: column;

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

  color: var(--white);

  background: linear-gradient(145deg, var(--navy-900), #153b6d);

  border: 8px solid rgba(23, 105, 232, 0.08);

  outline: 1px solid rgba(23, 105, 232, 0.18);

  border-radius: 50%;

  box-shadow: 0 25px 60px rgba(8, 26, 51, 0.22);
}

.education-ecosystem-center span {
  margin-bottom: 2px;

  font-family: "Manrope", sans-serif;

  font-size: 1.75rem;

  font-weight: 800;
}

.education-ecosystem-center strong {
  font-size: 0.72rem;

  letter-spacing: 0.08em;
}

.education-ecosystem-center small {
  color: rgba(255, 255, 255, 0.55);

  font-size: 0.48rem;
}

/* =========================================================
   ECOSYSTEM NODES
========================================================= */

.education-ecosystem-node {
  position: absolute;

  z-index: 5;

  min-width: 112px;

  display: flex;
  flex-direction: column;

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

  gap: 5px;

  padding: 12px;

  background: rgba(255, 255, 255, 0.96);

  border: 1px solid var(--border);

  border-radius: 14px;

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.education-ecosystem-node:hover {
  transform: translateY(-5px);

  box-shadow: var(--shadow-md);
}

.education-ecosystem-node span {
  font-size: 1.05rem;
}

.education-ecosystem-node strong {
  color: var(--text-800);

  font-size: 0.62rem;
}

/* =========================================================
   NODE POSITIONS
========================================================= */

.education-node-students {
  top: 6%;
  left: 50%;

  transform: translateX(-50%);
}

.education-node-students:hover {
  transform: translateX(-50%) translateY(-5px);
}

.education-node-faculty {
  right: 4%;
  top: 50%;

  transform: translateY(-50%);
}

.education-node-faculty:hover {
  transform: translateY(-50%) translateY(-5px);
}

.education-node-admin {
  bottom: 6%;
  left: 50%;

  transform: translateX(-50%);
}

.education-node-admin:hover {
  transform: translateX(-50%) translateY(-5px);
}

.education-node-parents {
  left: 4%;
  top: 50%;

  transform: translateY(-50%);
}

.education-node-parents:hover {
  transform: translateY(-50%) translateY(-5px);
}

/* =========================================================
   ECOSYSTEM CONTENT
========================================================= */

.education-ecosystem-content h2 {
  margin-bottom: 20px;
}

.education-ecosystem-content > p {
  margin-bottom: 30px;

  color: var(--text-600);

  line-height: 1.85;
}

.education-ecosystem-list {
  display: flex;

  flex-direction: column;

  gap: 0;
}

.education-ecosystem-item {
  display: grid;

  grid-template-columns: 40px 1fr;

  gap: 15px;

  padding: 16px 0;

  border-top: 1px solid var(--border-light);
}

.education-ecosystem-item > span {
  color: var(--blue-600);

  font-family: "Manrope", sans-serif;

  font-size: 0.65rem;

  font-weight: 800;
}

.education-ecosystem-item h3 {
  margin-bottom: 3px;

  font-size: 0.85rem;
}

.education-ecosystem-item p {
  margin: 0;

  color: var(--text-500);

  font-size: 0.72rem;

  line-height: 1.6;
}

/* =========================================================
   INSTITUTION TYPES
========================================================= */

.education-types {
  background: var(--surface);
}

.education-type-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;
}

.education-type-card {
  position: relative;

  min-height: 330px;

  display: flex;
  flex-direction: column;

  padding: 28px;

  background: var(--white);

  border: 1px solid var(--border-light);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-xs);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.education-type-card:hover {
  transform: translateY(-7px);

  border-color: rgba(23, 105, 232, 0.18);

  box-shadow: var(--shadow-md);
}

.education-type-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 38px;
}

.education-type-top > span {
  color: var(--text-400);

  font-family: "Manrope", sans-serif;

  font-size: 0.65rem;

  font-weight: 800;
}

.education-type-icon {
  width: 48px;
  height: 48px;

  display: grid;

  place-items: center;

  border-radius: 13px;
}

.education-type-icon.blue {
  color: var(--blue-600);
  background: var(--blue-100);
}

.education-type-icon.green {
  color: var(--green-600);
  background: var(--green-100);
}

.education-type-icon.purple {
  color: var(--purple-600);
  background: var(--purple-100);
}

.education-type-content {
  flex: 1;
}

.education-type-content h3 {
  margin-bottom: 10px;

  font-size: 1.15rem;
}

.education-type-content p {
  margin-bottom: 0;

  color: var(--text-600);

  font-size: 0.8rem;

  line-height: 1.75;
}

.education-type-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 25px;

  color: var(--blue-600);

  font-size: 0.7rem;

  font-weight: 800;
}

.education-type-link span {
  transition: transform var(--transition-fast);
}

.education-type-card:hover .education-type-link span {
  transform: translateX(4px);
}

/* =========================================================
   PRODUCTS / DIGITAL EDUCATION PLATFORM
========================================================= */

.education-products {
  background: var(--white);
}

.education-products-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.85fr)
    minmax(0, 1.15fr);

  gap: 80px;

  align-items: center;
}

.education-products-content h2 {
  margin-bottom: 20px;
}

.education-products-content > p {
  color: var(--text-600);

  font-size: 0.9rem;

  line-height: 1.85;
}

.education-products-content .btn {
  margin-top: 12px;
}

/* =========================================================
   PRODUCT STACK
========================================================= */

.education-product-stack {
  display: flex;

  flex-direction: column;

  gap: 13px;
}

.education-product-card {
  display: flex;

  align-items: center;

  gap: 16px;

  padding: 22px;

  background: linear-gradient(135deg, #f8fbff, #ffffff);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.education-product-card:hover {
  transform: translateY(-5px);

  border-color: rgba(23, 105, 232, 0.2);

  box-shadow: var(--shadow-md);
}

.education-product-icon {
  width: 54px;
  height: 54px;

  display: grid;

  place-items: center;

  flex: 0 0 54px;

  border-radius: 14px;

  font-size: 1.2rem;
}

.education-product-icon.blue {
  color: var(--blue-600);
  background: var(--blue-100);
}

.education-product-icon.green {
  color: var(--green-600);
  background: var(--green-100);
}

.education-product-icon.purple {
  color: var(--purple-600);
  background: var(--purple-100);
}

.education-product-card-content {
  flex: 1;
}

.education-product-card-content small {
  display: block;

  margin-bottom: 3px;

  color: var(--text-400);

  font-size: 0.52rem;

  font-weight: 800;

  letter-spacing: 0.1em;
}

.education-product-card-content strong {
  display: block;

  margin-bottom: 4px;

  color: var(--text-950);

  font-family: "Manrope", sans-serif;

  font-size: 1.1rem;
}

.education-product-card-content span {
  display: block;

  color: var(--text-500);

  font-size: 0.7rem;
}

.education-product-arrow {
  width: 35px;
  height: 35px;

  display: grid;

  place-items: center;

  color: var(--blue-600);

  background: var(--blue-100);

  border-radius: 50%;

  transition: transform var(--transition-fast);
}

.education-product-card:hover .education-product-arrow {
  transform: translateX(4px);
}

/* =========================================================
   PRODUCT MINI GRID
========================================================= */

.education-product-mini-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;
}

.education-product-mini {
  padding: 18px;

  background: var(--surface);

  border: 1px solid var(--border-light);

  border-radius: 14px;

  transition:
    transform var(--transition-fast),
    background var(--transition-fast);
}

.education-product-mini:hover {
  background: var(--white);

  transform: translateY(-3px);
}

.education-product-mini > span {
  display: block;

  margin-bottom: 10px;

  font-size: 1rem;
}

.education-product-mini strong {
  display: block;

  margin-bottom: 3px;

  color: var(--text-900);

  font-size: 0.72rem;
}

.education-product-mini small {
  display: block;

  color: var(--text-500);

  font-size: 0.6rem;

  line-height: 1.5;
}

/* =========================================================
   BENEFITS
========================================================= */

.education-benefits {
  background: var(--surface);
}

.education-benefits-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 14px;
}

.education-benefit-card {
  display: grid;

  grid-template-columns: 38px 1fr;

  gap: 14px;

  padding: 24px;

  background: var(--white);

  border: 1px solid var(--border-light);

  border-radius: 16px;

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.education-benefit-card:hover {
  transform: translateY(-5px);

  box-shadow: var(--shadow-sm);
}

.education-benefit-card > span {
  color: var(--blue-600);

  font-family: "Manrope", sans-serif;

  font-size: 0.65rem;

  font-weight: 800;
}

.education-benefit-card h3 {
  margin-bottom: 7px;

  font-size: 0.95rem;
}

.education-benefit-card p {
  margin: 0;

  color: var(--text-500);

  font-size: 0.7rem;

  line-height: 1.7;
}

/* =========================================================
   WORKFLOW
========================================================= */

.education-workflow {
  position: relative;

  padding: 115px 0;

  color: var(--white);

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(49, 130, 246, 0.15),
      transparent 35%
    ),
    linear-gradient(135deg, var(--navy-950), var(--navy-900));

  overflow: hidden;
}

.education-workflow::before {
  content: "";

  position: absolute;

  inset: 0;

  opacity: 0.35;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);

  background-size: 60px 60px;
}

.education-workflow-grid {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1.2fr);

  gap: 90px;

  align-items: start;
}

.education-workflow-content .eyebrow {
  color: #7fb5ff;
}

.education-workflow-content h2 {
  color: var(--white);
}

.education-workflow-content h2 span {
  color: #62a0ff;
}

.education-workflow-content > p {
  max-width: 520px;

  color: rgba(255, 255, 255, 0.62);

  font-size: 0.9rem;

  line-height: 1.85;
}

/* =========================================================
   WORKFLOW STEPS
========================================================= */

.education-workflow-steps {
  position: relative;
}

.education-workflow-steps::before {
  content: "";

  position: absolute;

  top: 28px;
  bottom: 28px;
  left: 19px;

  width: 1px;

  background: linear-gradient(
    180deg,
    rgba(49, 130, 246, 0.7),
    rgba(255, 255, 255, 0.12)
  );
}

.education-workflow-step {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: 40px 1fr;

  gap: 20px;

  padding: 0 0 34px;
}

.education-workflow-step:last-child {
  padding-bottom: 0;
}

.education-workflow-step > span {
  width: 39px;
  height: 39px;

  display: grid;

  place-items: center;

  color: #83b8ff;

  background: var(--navy-900);

  border: 1px solid rgba(79, 145, 232, 0.55);

  border-radius: 50%;

  font-family: "Manrope", sans-serif;

  font-size: 0.62rem;

  font-weight: 800;
}

.education-workflow-step h3 {
  margin-bottom: 6px;

  color: var(--white);

  font-size: 0.98rem;
}

.education-workflow-step p {
  max-width: 620px;

  margin: 0;

  color: rgba(255, 255, 255, 0.58);

  font-size: 0.72rem;

  line-height: 1.75;
}

/* =========================================================
   FINAL CTA
========================================================= */

.education-cta {
  position: relative;

  padding: 110px 0;

  overflow: hidden;

  color: var(--white);

  background: linear-gradient(135deg, var(--blue-700), #1749a8);
}

.education-cta-grid {
  position: absolute;

  inset: 0;

  opacity: 0.25;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);

  background-size: 50px 50px;
}

.education-cta::before,
.education-cta::after {
  content: "";

  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}

.education-cta::before {
  width: 420px;
  height: 420px;

  right: -160px;
  top: -180px;

  background: rgba(255, 255, 255, 0.08);
}

.education-cta::after {
  width: 300px;
  height: 300px;

  left: -150px;
  bottom: -160px;

  background: rgba(7, 29, 64, 0.13);
}

.education-cta-content {
  position: relative;

  z-index: 2;

  max-width: 820px;

  margin-inline: auto;

  text-align: center;
}

.education-cta-mark {
  width: 52px;
  height: 52px;

  display: grid;

  place-items: center;

  margin: 0 auto 20px;

  color: var(--blue-700);

  background: var(--white);

  border-radius: 15px;

  font-family: "Manrope", sans-serif;

  font-size: 1.3rem;

  font-weight: 800;

  box-shadow: 0 15px 35px rgba(8, 26, 51, 0.16);
}

.education-cta .eyebrow {
  color: rgba(255, 255, 255, 0.68);
}

.education-cta h2 {
  margin-bottom: 20px;

  color: var(--white);

  font-size: clamp(2.1rem, 4vw, 3.5rem);

  line-height: 1.1;
}

.education-cta h2 span {
  color: #b9d5ff;
}

.education-cta-content > p {
  max-width: 700px;

  margin: 0 auto 30px;

  color: rgba(255, 255, 255, 0.7);

  font-size: 0.95rem;

  line-height: 1.85;
}

.education-cta-actions {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 24px;

  flex-wrap: wrap;
}

.education-cta-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--white);

  font-size: 0.8rem;

  font-weight: 700;

  border-bottom: 1px solid rgba(255, 255, 255, 0.4);

  padding-bottom: 3px;
}

.education-cta-link span {
  transition: transform var(--transition-fast);
}

.education-cta-link:hover span {
  transform: translateX(4px);
}

/* =========================================================
   FOOTER
========================================================= */

.site-footer {
  color: rgba(255, 255, 255, 0.62);

  background: var(--navy-950);
}

.footer-grid {
  display: grid;

  grid-template-columns:
    1.8fr
    repeat(5, 1fr);

  gap: 35px;

  padding-bottom: 55px;
}

.footer-brand {
  max-width: 300px;
}

.footer-brand img {
  width: 170px;

  margin-bottom: 20px;
}

.footer-brand p {
  margin-bottom: 24px;

  color: rgba(255, 255, 255, 0.52);

  font-size: 0.75rem;

  line-height: 1.8;
}

.footer-column {
  display: flex;

  flex-direction: column;

  gap: 10px;
}

.footer-column h3 {
  margin-bottom: 10px;

  color: var(--white);

  font-size: 0.78rem;

  letter-spacing: 0.01em;
}

.footer-column a {
  color: rgba(255, 255, 255, 0.52);

  font-size: 0.68rem;

  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.footer-column a:hover {
  color: var(--white);

  transform: translateX(3px);
}

/* =========================================================
   FOOTER SOCIAL
========================================================= */

.footer-social-label {
  display: block;

  margin-bottom: 10px;

  color: rgba(255, 255, 255, 0.38);

  font-size: 0.58rem;

  font-weight: 800;

  letter-spacing: 0.12em;
}

.footer-social-links {
  display: flex;

  gap: 8px;
}

.footer-social-link {
  width: 34px;
  height: 34px;

  display: grid;

  place-items: center;

  color: rgba(255, 255, 255, 0.65);

  background: rgba(255, 255, 255, 0.055);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 9px;

  transition:
    transform var(--transition-fast),
    color var(--transition-fast),
    background var(--transition-fast);
}

.footer-social-link:hover {
  color: var(--white);

  transform: translateY(-3px);
}

.footer-social-link.linkedin:hover {
  background: #0a66c2;
}

.footer-social-link.instagram:hover {
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
}

.footer-social-link.whatsapp:hover {
  background: #25d366;
}

.footer-social-link.youtube:hover {
  background: #ff0000;
}

/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
  min-height: 70px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom p {
  margin: 0;

  color: rgba(255, 255, 255, 0.38);

  font-size: 0.62rem;
}

.footer-bottom > div {
  display: flex;

  gap: 20px;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.42);

  font-size: 0.62rem;

  transition: color var(--transition-fast);
}

.footer-bottom a:hover {
  color: var(--white);
}

/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {
  opacity: 0;

  transform: translateY(28px);

  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.revealed {
  opacity: 1;

  transform: translateY(0);
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes educationDashboardFloat {
  0%,
  100% {
    transform: perspective(1200px) rotateY(-4deg) rotateX(2deg) translateY(0);
  }

  50% {
    transform: perspective(1200px) rotateY(-4deg) rotateX(2deg)
      translateY(-10px);
  }
}

@keyframes educationGlow {
  0%,
  100% {
    transform: scale(1);

    opacity: 0.8;
  }

  50% {
    transform: scale(1.08);

    opacity: 1;
  }
}

@keyframes educationOrbitRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes educationOrbitRotateReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(49, 130, 246, 0.35);

  outline-offset: 3px;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1150px) {
  :root {
    --header-height: 74px;
  }

  .container {
    width: min(calc(100% - 40px), var(--container));
  }

  .main-navigation {
    gap: 0;
  }

  .nav-link {
    padding-inline: 8px;

    font-size: 0.76rem;
  }

  .header-actions {
    gap: 9px;
  }

  .header-contact {
    display: none;
  }

  .mega-menu {
    width: min(900px, calc(100vw - 30px));
  }

  .education-hero-container {
    gap: 45px;
  }

  .education-solution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .education-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: span 3;

    max-width: 520px;
  }
}

/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {
  .main-navigation,
  .header-actions {
    display: none;
  }

  .mobile-menu-button {
    display: block;
  }

  .mobile-navigation {
    position: fixed;

    z-index: 999;

    top: var(--header-height);

    left: 0;
    right: 0;

    max-height: calc(100vh - var(--header-height));

    padding: 18px 22px 30px;

    overflow-y: auto;

    background: rgba(255, 255, 255, 0.98);

    border-top: 1px solid var(--border-light);

    box-shadow: 0 25px 50px rgba(8, 26, 51, 0.12);

    opacity: 0;

    visibility: hidden;

    transform: translateY(-10px);

    transition:
      opacity var(--transition),
      visibility var(--transition),
      transform var(--transition);
  }

  .mobile-navigation.active {
    display: block;

    opacity: 1;

    visibility: visible;

    transform: translateY(0);
  }

  .mobile-navigation > a,
  .mobile-nav-trigger {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 48px;

    padding: 0;

    color: var(--text-900);

    background: transparent;

    border-bottom: 1px solid var(--border-light);

    font-size: 0.9rem;

    font-weight: 700;

    text-align: left;

    cursor: pointer;
  }

  .mobile-nav-group {
    border-bottom: 1px solid var(--border-light);
  }

  .mobile-nav-group .mobile-nav-trigger {
    border-bottom: 0;
  }

  .mobile-nav-trigger > span {
    color: var(--blue-600);

    font-size: 1.15rem;

    transition: transform var(--transition-fast);
  }

  .mobile-nav-group.open .mobile-nav-trigger > span {
    transform: rotate(45deg);
  }

  .mobile-submenu {
    max-height: 0;

    overflow: hidden;

    transition: max-height var(--transition);
  }

  .mobile-submenu a {
    display: block;

    padding: 8px 0 8px 15px;

    color: var(--text-600);

    font-size: 0.8rem;
  }

  .mobile-submenu a:first-child {
    padding-top: 5px;
  }

  .mobile-submenu a:last-child {
    padding-bottom: 14px;
  }

  .mobile-demo-button {
    display: flex !important;

    align-items: center;

    justify-content: center;

    margin-top: 18px;

    min-height: 48px;

    color: var(--white) !important;

    background: linear-gradient(135deg, var(--blue-600), var(--blue-500));

    border: 0 !important;

    border-radius: var(--radius-pill);
  }

  .education-hero {
    min-height: auto;

    padding-top: calc(var(--header-height) + 60px);

    padding-bottom: 75px;
  }

  .education-hero-container {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .education-hero-content {
    max-width: 760px;
  }

  .education-hero-visual {
    min-height: 490px;
  }

  .education-ecosystem-grid,
  .education-products-grid,
  .education-workflow-grid,
  .education-intro-grid {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .education-intro-content {
    padding-left: 25px;
  }

  .education-ecosystem-content,
  .education-products-content {
    max-width: 750px;
  }

  .education-ecosystem-visual {
    max-width: 500px;
  }

  .education-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {
  :root {
    --header-height: 68px;
  }

  .container {
    width: calc(100% - 32px);
  }

  .brand img {
    width: 145px;
  }

  .education-section {
    padding: 78px 0;
  }

  .education-hero {
    padding-top: calc(var(--header-height) + 48px);

    padding-bottom: 60px;
  }

  .education-hero h1 {
    font-size: clamp(2.45rem, 12vw, 3.55rem);
  }

  .education-hero-content > p {
    font-size: 0.9rem;

    line-height: 1.75;
  }

  .education-hero-actions {
    align-items: stretch;

    flex-direction: column;
  }

  .education-hero-actions .btn {
    width: 100%;
  }

  .education-hero-meta {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(3, 1fr);
  }

  .education-hero-meta-item {
    min-width: 0;

    padding-right: 10px;

    margin-right: 10px;
  }

  .education-hero-meta-item strong {
    font-size: 0.68rem;
  }

  .education-hero-meta-item span {
    font-size: 0.59rem;
  }

  .education-hero-visual {
    min-height: 390px;
  }

  .education-dashboard {
    width: 100%;

    transform: none;

    animation: educationDashboardFloatMobile 6s ease-in-out infinite;
  }

  .education-dashboard-header {
    min-height: 64px;

    padding: 11px 13px;
  }

  .education-dashboard-brand strong {
    font-size: 0.64rem;
  }

  .education-dashboard-brand small {
    font-size: 0.43rem;
  }

  .education-dashboard-logo {
    width: 32px;
    height: 32px;
  }

  .education-dashboard-status {
    display: none;
  }

  .education-dashboard-body {
    padding: 17px;
  }

  .education-dashboard-welcome {
    margin-bottom: 16px;
  }

  .education-dashboard-welcome h3 {
    font-size: 0.82rem;
  }

  .education-date-box {
    width: 42px;
    height: 45px;
  }

  .education-dashboard-stats {
    grid-template-columns: 1fr;
  }

  .education-mini-stat {
    padding: 9px;
  }

  .education-dashboard-panels {
    grid-template-columns: 1fr;
  }

  .education-notification-panel {
    display: none;
  }

  .education-dashboard-footer {
    min-height: 30px;

    padding-inline: 13px;

    font-size: 0.39rem;
  }

  .education-section-heading {
    margin-bottom: 40px;
  }

  .education-section-heading h2,
  .education-intro-heading h2,
  .education-ecosystem-content h2,
  .education-products-content h2,
  .education-workflow-content h2 {
    font-size: clamp(1.9rem, 9vw, 2.5rem);
  }

  .education-section-heading p {
    font-size: 0.84rem;
  }

  .education-intro-grid,
  .education-ecosystem-grid,
  .education-products-grid,
  .education-workflow-grid {
    gap: 40px;
  }

  .education-intro-content {
    padding-left: 18px;
  }

  .education-intro-content p {
    font-size: 0.85rem;
  }

  .education-solution-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .education-solution-card {
    min-height: auto;

    padding: 21px;
  }

  .education-solution-card-top {
    margin-bottom: 20px;
  }

  .education-solution-card h3 {
    font-size: 0.98rem;
  }

  .education-solution-card p {
    font-size: 0.74rem;
  }

  /* =======================================================
     MOBILE ECOSYSTEM
  ======================================================= */

  .education-ecosystem-visual {
    width: 100%;
  }

  .education-ecosystem-center {
    width: 118px;
    height: 118px;
  }

  .education-ecosystem-center span {
    font-size: 1.5rem;
  }

  .education-ecosystem-center strong {
    font-size: 0.62rem;
  }

  .education-ecosystem-node {
    min-width: 88px;

    padding: 8px;

    border-radius: 11px;
  }

  .education-ecosystem-node strong {
    font-size: 0.52rem;
  }

  .education-ecosystem-node span {
    font-size: 0.85rem;
  }

  .education-node-students {
    top: 2%;
  }

  .education-node-faculty {
    right: 0;
  }

  .education-node-admin {
    bottom: 2%;
  }

  .education-node-parents {
    left: 0;
  }

  .education-ecosystem-content > p {
    font-size: 0.84rem;
  }

  .education-ecosystem-item {
    grid-template-columns: 32px 1fr;

    gap: 10px;
  }

  .education-ecosystem-item h3 {
    font-size: 0.82rem;
  }

  .education-ecosystem-item p {
    font-size: 0.67rem;
  }

  /* =======================================================
     MOBILE INSTITUTION TYPES
  ======================================================= */

  .education-type-grid {
    grid-template-columns: 1fr;
  }

  .education-type-card {
    min-height: 285px;

    padding: 23px;
  }

  /* =======================================================
     MOBILE PRODUCTS
  ======================================================= */

  .education-products-grid {
    gap: 40px;
  }

  .education-products-content > p {
    font-size: 0.83rem;
  }

  .education-product-card {
    padding: 17px;

    gap: 11px;
  }

  .education-product-icon {
    width: 44px;
    height: 44px;

    flex-basis: 44px;
  }

  .education-product-card-content strong {
    font-size: 0.92rem;
  }

  .education-product-card-content span {
    font-size: 0.61rem;
  }

  .education-product-arrow {
    width: 30px;
    height: 30px;
  }

  .education-product-mini-grid {
    grid-template-columns: 1fr;
  }

  /* =======================================================
     MOBILE BENEFITS
  ======================================================= */

  .education-benefits-grid {
    grid-template-columns: 1fr;
  }

  .education-benefit-card {
    padding: 19px;
  }

  /* =======================================================
     MOBILE WORKFLOW
  ======================================================= */

  .education-workflow {
    padding: 78px 0;
  }

  .education-workflow-steps::before {
    left: 16px;
  }

  .education-workflow-step {
    grid-template-columns: 34px 1fr;

    gap: 15px;

    padding-bottom: 27px;
  }

  .education-workflow-step > span {
    width: 33px;
    height: 33px;

    font-size: 0.55rem;
  }

  .education-workflow-step h3 {
    font-size: 0.88rem;
  }

  .education-workflow-step p {
    font-size: 0.67rem;
  }

  /* =======================================================
     MOBILE CTA
  ======================================================= */

  .education-cta {
    padding: 80px 0;
  }

  .education-cta h2 {
    font-size: clamp(2rem, 9vw, 2.65rem);
  }

  .education-cta-content > p {
    font-size: 0.82rem;
  }

  .education-cta-actions {
    flex-direction: column;

    gap: 18px;
  }

  .education-cta-actions .btn {
    width: 100%;
  }

  /* =======================================================
     MOBILE FOOTER
  ======================================================= */

  .site-footer {
    padding-top: 55px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 35px 25px;
  }

  .footer-brand {
    grid-column: span 2;
  }

  .footer-column {
    gap: 8px;
  }

  .footer-column h3 {
    font-size: 0.72rem;
  }

  .footer-column a {
    font-size: 0.63rem;
  }

  .footer-bottom {
    min-height: auto;

    padding: 20px 0;

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;
  }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .container {
    width: calc(100% - 26px);
  }

  .brand img {
    width: 132px;
  }

  .education-hero h1 {
    font-size: 2.35rem;
  }

  .education-hero-meta-item {
    padding-right: 6px;

    margin-right: 6px;
  }

  .education-hero-meta-item strong {
    font-size: 0.62rem;
  }

  .education-hero-meta-item span {
    font-size: 0.54rem;
  }

  .education-hero-visual {
    min-height: 350px;
  }

  .education-dashboard-body {
    padding: 13px;
  }

  .education-dashboard-brand {
    gap: 8px;
  }

  .education-dashboard-logo {
    width: 29px;
    height: 29px;

    font-size: 0.8rem;
  }

  .education-dashboard-brand strong {
    font-size: 0.58rem;
  }

  .education-dashboard-brand small {
    font-size: 0.38rem;
  }

  .education-mini-stat {
    padding: 8px;
  }

  .education-mini-icon {
    width: 30px;
    height: 30px;

    flex-basis: 30px;
  }

  .education-mini-stat strong {
    font-size: 0.59rem;
  }

  .education-mini-stat small {
    font-size: 0.47rem;
  }

  .education-dashboard-panel {
    padding: 12px;
  }

  .education-product-card-content small {
    font-size: 0.43rem;
  }

  .education-product-card-content strong {
    font-size: 0.82rem;
  }

  .education-product-card-content span {
    font-size: 0.55rem;
  }

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

  .footer-brand {
    grid-column: span 1;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;

    transform: none;
  }
}

/* =========================================================
   MOBILE DASHBOARD ANIMATION
========================================================= */

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

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

/* =========================================================
   KAMAL BLOG PAGE
   /assets/css/blog.css
========================================================= */

/* =========================================================
   VARIABLES
========================================================= */

.blog-page {
  --blog-navy: #081a33;
  --blog-navy-2: #0c2444;

  --blog-blue: #1769e0;
  --blog-blue-light: #eaf2ff;

  --blog-purple: #7957e8;
  --blog-green: #1ca66a;
  --blog-orange: #ed8b32;
  --blog-cyan: #1599c8;

  --blog-white: #ffffff;

  --blog-bg: #f7f9fc;
  --blog-bg-soft: #f1f5fa;

  --blog-text: #10233f;
  --blog-text-soft: #617089;

  --blog-border: #dfe6ef;

  --blog-shadow: 0 20px 60px rgba(8, 26, 51, 0.08);

  --blog-radius: 18px;
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

.blog-page .sr-only {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}

/* =========================================================
   HEADER ACTIVE STATE
========================================================= */

.blog-page .resources-mega .resource-menu-card.current {
  border-color: rgba(23, 105, 224, 0.28);

  background: #f3f7ff;
}

.blog-page .main-navigation .nav-link.active {
  color: var(--blog-blue);
}

/* =========================================================
   BLOG HERO
========================================================= */

.blog-hero {
  position: relative;

  overflow: hidden;

  min-height: 520px;

  display: flex;

  align-items: center;

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(23, 105, 224, 0.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 15% 85%,
      rgba(121, 87, 232, 0.12),
      transparent 28%
    ),
    var(--blog-navy);

  color: #fff;
}

.blog-hero-grid {
  position: absolute;

  inset: 0;

  opacity: 0.18;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);

  background-size: 70px 70px;

  mask-image: linear-gradient(to right, black, transparent 80%);
}

.blog-hero::after {
  content: "";

  position: absolute;

  width: 520px;
  height: 520px;

  right: -180px;
  top: -180px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    0 0 0 60px rgba(255, 255, 255, 0.025),
    0 0 0 120px rgba(255, 255, 255, 0.018);
}

.blog-hero-content {
  position: relative;

  z-index: 2;

  max-width: 900px;

  padding: 110px 0 100px;
}

.blog-label {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 28px;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.18em;

  color: rgba(255, 255, 255, 0.75);
}

.blog-label-mark {
  width: 34px;
  height: 34px;

  display: inline-flex;

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

  border: 1px solid rgba(255, 255, 255, 0.22);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  font-weight: 800;
}

.blog-hero .eyebrow {
  display: block;

  margin-bottom: 18px;

  color: #77adff;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.16em;
}

.blog-hero h1 {
  max-width: 850px;

  margin: 0 0 24px;

  font-family: "Manrope", sans-serif;

  font-size: clamp(42px, 6vw, 76px);

  line-height: 1.02;

  letter-spacing: -0.045em;

  font-weight: 800;
}

.blog-hero h1 span {
  display: block;

  color: #75aaff;
}

.blog-hero p {
  max-width: 760px;

  margin: 0;

  color: rgba(255, 255, 255, 0.72);

  font-size: 18px;

  line-height: 1.75;
}

/* =========================================================
   CATEGORY SECTION
========================================================= */

.blog-category-section {
  position: relative;

  z-index: 5;

  margin-top: -1px;

  background: #fff;

  border-bottom: 1px solid var(--blog-border);
}

.blog-category-bar {
  min-height: 90px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;
}

.blog-category-label {
  flex-shrink: 0;

  color: var(--blog-navy);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.blog-categories {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 8px;

  flex-wrap: wrap;
}

.blog-category {
  border: 1px solid transparent;

  background: transparent;

  padding: 10px 15px;

  border-radius: 999px;

  color: var(--blog-text-soft);

  font: inherit;

  font-size: 13px;

  font-weight: 700;

  cursor: pointer;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.blog-category:hover {
  color: var(--blog-blue);

  background: var(--blog-blue-light);
}

.blog-category.active {
  color: #fff;

  background: var(--blog-navy);

  border-color: var(--blog-navy);
}

.blog-category:focus-visible {
  outline: 3px solid rgba(23, 105, 224, 0.25);

  outline-offset: 2px;
}

/* =========================================================
   GENERAL BLOG SECTIONS
========================================================= */

.blog-featured-section,
.blog-grid-section {
  background: var(--blog-bg);
}

.blog-section-heading {
  max-width: 760px;

  margin-bottom: 48px;
}

.blog-section-heading .eyebrow {
  display: block;

  margin-bottom: 14px;

  color: var(--blog-blue);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.16em;
}

.blog-section-heading h2 {
  margin: 0 0 18px;

  color: var(--blog-navy);

  font-family: "Manrope", sans-serif;

  font-size: clamp(32px, 4vw, 54px);

  line-height: 1.08;

  letter-spacing: -0.04em;
}

.blog-section-heading h2 span {
  color: var(--blog-blue);
}

.blog-section-heading p {
  max-width: 680px;

  margin: 0;

  color: var(--blog-text-soft);

  font-size: 17px;

  line-height: 1.7;
}

/* =========================================================
   FEATURED ARTICLE
========================================================= */

.featured-blog-card {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 0.95fr);

  min-height: 560px;

  overflow: hidden;

  border: 1px solid var(--blog-border);

  border-radius: var(--blog-radius);

  background: #fff;

  box-shadow: var(--blog-shadow);
}

.featured-blog-visual {
  position: relative;

  overflow: hidden;

  min-height: 520px;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    radial-gradient(
      circle at center,
      rgba(23, 105, 224, 0.25),
      transparent 34%
    ),
    linear-gradient(145deg, #081a33, #0d315d);
}

.featured-visual-grid {
  position: absolute;

  inset: 0;

  opacity: 0.2;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);

  background-size: 48px 48px;
}

.featured-visual-orbit {
  position: absolute;

  border: 1px solid rgba(255, 255, 255, 0.14);

  border-radius: 50%;
}

.orbit-one {
  width: 420px;
  height: 420px;
}

.orbit-two {
  width: 270px;
  height: 270px;

  border-color: rgba(117, 170, 255, 0.25);
}

.featured-visual-center {
  position: relative;

  z-index: 3;

  width: 150px;
  height: 150px;

  display: flex;

  flex-direction: column;

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

  border-radius: 50%;

  background: linear-gradient(145deg, #1769e0, #0d4db4);

  border: 1px solid rgba(255, 255, 255, 0.2);

  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
}

.featured-visual-center span {
  font-family: "Manrope", sans-serif;

  font-size: 44px;

  line-height: 1;

  font-weight: 800;
}

.featured-visual-center strong {
  margin-top: 8px;

  font-size: 13px;

  letter-spacing: 0.12em;
}

.featured-visual-center small {
  margin-top: 6px;

  color: rgba(255, 255, 255, 0.65);

  font-size: 8px;

  letter-spacing: 0.16em;
}

.featured-visual-node {
  position: absolute;

  z-index: 4;

  min-width: 105px;

  padding: 11px 14px;

  display: flex;

  align-items: center;

  gap: 7px;

  border: 1px solid rgba(255, 255, 255, 0.13);

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.07);

  backdrop-filter: blur(10px);

  color: #fff;

  font-size: 11px;

  font-weight: 700;
}

.featured-visual-node span {
  color: rgba(255, 255, 255, 0.65);

  font-size: 9px;
}

.node-one {
  left: 13%;
  top: 25%;
}

.node-two {
  right: 13%;
  top: 20%;
}

.node-three {
  left: 12%;
  bottom: 22%;
}

.node-four {
  right: 11%;
  bottom: 24%;
}

.featured-blog-content {
  padding: 58px;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.blog-card-meta {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  color: #8a97a9;

  font-size: 11px;

  font-weight: 700;
}

.blog-card-category {
  color: var(--blog-blue);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}

.featured-blog-content h3 {
  margin: 22px 0 18px;

  color: var(--blog-navy);

  font-family: "Manrope", sans-serif;

  font-size: clamp(28px, 3vw, 42px);

  line-height: 1.12;

  letter-spacing: -0.035em;
}

.featured-blog-content p {
  margin: 0;

  color: var(--blog-text-soft);

  font-size: 16px;

  line-height: 1.75;
}

.featured-blog-bottom {
  margin-top: 38px;

  padding-top: 22px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-top: 1px solid var(--blog-border);
}

.blog-read-time {
  color: #8996a8;

  font-size: 12px;

  font-weight: 700;
}

.blog-read-link {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: var(--blog-navy);

  font-size: 13px;

  font-weight: 800;

  text-decoration: none;
}

.blog-read-link span {
  color: var(--blog-blue);

  font-size: 18px;

  transition: transform 0.2s ease;
}

.blog-read-link:hover span {
  transform: translateX(4px);
}

/* =========================================================
   BLOG GRID
========================================================= */

.blog-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 24px;
}

.blog-card {
  overflow: hidden;

  border: 1px solid var(--blog-border);

  border-radius: var(--blog-radius);

  background: #fff;

  box-shadow: 0 10px 35px rgba(8, 26, 51, 0.045);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    opacity 0.25s ease;
}

.blog-card:hover {
  transform: translateY(-6px);

  border-color: rgba(23, 105, 224, 0.2);

  box-shadow: 0 25px 55px rgba(8, 26, 51, 0.1);
}

.blog-card.filtered-out {
  display: none;
}

.blog-card-visual {
  position: relative;

  height: 230px;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;
}

.blog-card-number {
  position: absolute;

  top: 18px;
  left: 20px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.12em;
}

.blog-visual-icon {
  position: relative;

  z-index: 3;

  width: 82px;
  height: 82px;

  display: flex;

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

  border-radius: 22px;

  background: rgba(255, 255, 255, 0.12);

  border: 1px solid rgba(255, 255, 255, 0.2);

  backdrop-filter: blur(8px);

  font-size: 34px;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.blog-visual-label {
  position: absolute;

  right: 18px;
  bottom: 18px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.16em;
}

/* EDUCATION */

.education-visual {
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(71, 153, 255, 0.3),
      transparent 30%
    ),
    linear-gradient(145deg, #0b2b52, #1769e0);
}

.blog-visual-lines {
  position: absolute;

  width: 300px;
  height: 300px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 50%;

  box-shadow:
    0 0 0 50px rgba(255, 255, 255, 0.025),
    0 0 0 100px rgba(255, 255, 255, 0.02);
}

/* ERP */

.erp-visual {
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(91, 129, 255, 0.3),
      transparent 30%
    ),
    linear-gradient(145deg, #151c4d, #5369dc);
}

.blog-visual-dashboard {
  position: absolute;

  width: 190px;
  height: 110px;

  right: 20px;
  bottom: 15px;

  display: flex;

  flex-direction: column;

  gap: 7px;

  padding: 14px;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.07);

  border: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-visual-dashboard span {
  height: 7px;

  border-radius: 5px;

  background: rgba(255, 255, 255, 0.18);
}

.blog-visual-dashboard span:nth-child(1) {
  width: 80%;

  background: #77aaff;
}

.blog-visual-dashboard span:nth-child(2) {
  width: 55%;
}

.blog-visual-dashboard span:nth-child(3) {
  width: 70%;
}

/* HR */

.hr-visual {
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(198, 157, 255, 0.25),
      transparent 30%
    ),
    linear-gradient(145deg, #261d52, #7957e8);
}

.blog-visual-people {
  position: absolute;

  bottom: 18px;

  display: flex;

  align-items: flex-end;

  gap: 12px;
}

.blog-visual-people span {
  width: 30px;
  height: 48px;

  border-radius: 15px 15px 5px 5px;

  background: rgba(255, 255, 255, 0.12);

  border: 1px solid rgba(255, 255, 255, 0.16);
}

.blog-visual-people span:nth-child(2) {
  height: 68px;

  background: rgba(255, 255, 255, 0.18);
}

.blog-visual-people span:nth-child(3) {
  height: 56px;
}

/* DIGITAL */

.digital-visual {
  background:
    radial-gradient(circle at center, rgba(61, 215, 192, 0.2), transparent 30%),
    linear-gradient(145deg, #073b4d, #1599c8);
}

.digital-visual-network {
  position: absolute;

  inset: 25px;

  background:
    radial-gradient(circle at 20% 30%, #fff 2px, transparent 3px),
    radial-gradient(circle at 75% 25%, #fff 2px, transparent 3px),
    radial-gradient(circle at 45% 75%, #fff 2px, transparent 3px),
    radial-gradient(circle at 85% 75%, #fff 2px, transparent 3px);

  opacity: 0.35;
}

/* BUSINESS */

.business-visual {
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255, 198, 111, 0.2),
      transparent 30%
    ),
    linear-gradient(145deg, #50351b, #ed8b32);
}

.business-visual-bars {
  position: absolute;

  right: 35px;
  bottom: 25px;

  height: 120px;

  display: flex;

  align-items: flex-end;

  gap: 9px;
}

.business-visual-bars span {
  width: 17px;

  border-radius: 5px 5px 0 0;

  background: rgba(255, 255, 255, 0.18);
}

.business-visual-bars span:nth-child(1) {
  height: 35%;
}

.business-visual-bars span:nth-child(2) {
  height: 55%;
}

.business-visual-bars span:nth-child(3) {
  height: 75%;
}

.business-visual-bars span:nth-child(4) {
  height: 100%;

  background: rgba(255, 255, 255, 0.35);
}

/* ACADEMIC */

.academic-visual {
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(95, 216, 148, 0.2),
      transparent 30%
    ),
    linear-gradient(145deg, #073e2b, #1ca66a);
}

.academic-visual-books {
  position: absolute;

  bottom: 24px;

  display: flex;

  flex-direction: column;

  gap: 5px;
}

.academic-visual-books span {
  display: block;

  width: 170px;
  height: 13px;

  border-radius: 4px;

  background: rgba(255, 255, 255, 0.15);
}

.academic-visual-books span:nth-child(2) {
  width: 135px;

  background: rgba(255, 255, 255, 0.24);
}

.academic-visual-books span:nth-child(3) {
  width: 155px;
}

/* REPORTING */

.reporting-visual {
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(147, 174, 255, 0.25),
      transparent 30%
    ),
    linear-gradient(145deg, #152747, #365fa8);
}

.reporting-visual-chart {
  position: absolute;

  bottom: 20px;
  right: 30px;

  width: 160px;
  height: 100px;

  display: flex;

  align-items: flex-end;

  gap: 8px;
}

.reporting-visual-chart span {
  width: 28px;

  border-radius: 5px 5px 0 0;

  background: rgba(255, 255, 255, 0.18);
}

.reporting-visual-chart span:nth-child(1) {
  height: 40%;
}

.reporting-visual-chart span:nth-child(2) {
  height: 65%;
}

.reporting-visual-chart span:nth-child(3) {
  height: 100%;

  background: rgba(255, 255, 255, 0.35);
}

/* AUTOMATION */

.automation-visual {
  background:
    radial-gradient(circle at center, rgba(255, 218, 96, 0.2), transparent 30%),
    linear-gradient(145deg, #423a13, #9c8b25);
}

.automation-visual-flow {
  position: absolute;

  left: 30px;
  right: 30px;

  bottom: 30px;

  display: flex;

  align-items: center;

  justify-content: space-between;
}

.automation-visual-flow span {
  width: 52px;
  height: 52px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.2);

  background: rgba(255, 255, 255, 0.08);
}

.automation-visual-flow::before {
  content: "";

  position: absolute;

  left: 40px;
  right: 40px;

  height: 1px;

  background: rgba(255, 255, 255, 0.2);
}

/* =========================================================
   BLOG CARD BODY
========================================================= */

.blog-card-body {
  padding: 26px;
}

.blog-card-body .blog-card-meta {
  margin-bottom: 14px;
}

.blog-card-body h3 {
  margin: 0 0 13px;

  color: var(--blog-navy);

  font-family: "Manrope", sans-serif;

  font-size: 20px;

  line-height: 1.3;

  letter-spacing: -0.025em;
}

.blog-card-body p {
  min-height: 80px;

  margin: 0;

  color: var(--blog-text-soft);

  font-size: 14px;

  line-height: 1.7;
}

.blog-card-footer {
  margin-top: 24px;

  padding-top: 17px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  border-top: 1px solid var(--blog-border);
}

.blog-card-footer time {
  color: #8996a8;

  font-size: 11px;

  font-weight: 700;
}

.blog-card-footer a {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: var(--blog-navy);

  font-size: 12px;

  font-weight: 800;

  text-decoration: none;
}

.blog-card-footer a span {
  color: var(--blog-blue);

  font-size: 16px;

  transition: transform 0.2s ease;
}

.blog-card-footer a:hover span {
  transform: translateX(3px);
}

/* =========================================================
   EMPTY STATE
========================================================= */

.blog-empty-state {
  display: none;

  padding: 70px 20px;

  text-align: center;
}

.blog-empty-state.active {
  display: block;
}

.blog-empty-state > div {
  width: 60px;
  height: 60px;

  margin: 0 auto 18px;

  display: flex;

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

  border-radius: 50%;

  background: var(--blog-blue-light);

  color: var(--blog-blue);
}

.blog-empty-state h3 {
  margin: 0 0 8px;

  color: var(--blog-navy);

  font-family: "Manrope", sans-serif;

  font-size: 24px;
}

.blog-empty-state p {
  margin: 0;

  color: var(--blog-text-soft);
}

/* =========================================================
   RESOURCE STRIP
========================================================= */

.blog-resource-strip {
  padding: 35px 0;

  background: #fff;
}

.blog-resource-strip-inner {
  display: flex;

  align-items: center;

  gap: 22px;

  padding: 30px 34px;

  border: 1px solid var(--blog-border);

  border-radius: var(--blog-radius);

  background: linear-gradient(100deg, #f8fbff, #fff);
}

.blog-resource-strip-icon {
  width: 58px;
  height: 58px;

  flex-shrink: 0;

  display: flex;

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

  border-radius: 15px;

  background: var(--blog-blue-light);

  color: var(--blog-blue);

  font-size: 24px;
}

.blog-resource-strip-inner > div:nth-child(2) {
  flex: 1;
}

.blog-resource-strip-inner span {
  color: var(--blog-blue);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.15em;
}

.blog-resource-strip-inner h3 {
  margin: 5px 0 0;

  color: var(--blog-navy);

  font-family: "Manrope", sans-serif;

  font-size: 22px;
}

/* =========================================================
   NEWSLETTER
========================================================= */

.blog-newsletter {
  position: relative;

  overflow: hidden;

  padding: 110px 0;

  background:
    radial-gradient(
      circle at 85% 30%,
      rgba(23, 105, 224, 0.18),
      transparent 25%
    ),
    var(--blog-navy);

  color: #fff;
}

.blog-newsletter-grid {
  position: absolute;

  inset: 0;

  opacity: 0.12;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);

  background-size: 60px 60px;
}

.blog-newsletter-content {
  position: relative;

  z-index: 2;

  max-width: 800px;

  margin: 0 auto;

  text-align: center;
}

.blog-newsletter-mark {
  width: 56px;
  height: 56px;

  margin: 0 auto 24px;

  display: flex;

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

  border: 1px solid rgba(255, 255, 255, 0.2);

  background: rgba(255, 255, 255, 0.06);

  font-family: "Manrope", sans-serif;

  font-size: 22px;

  font-weight: 800;
}

.blog-newsletter .eyebrow {
  display: block;

  margin-bottom: 15px;

  color: #76adff;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.16em;
}

.blog-newsletter h2 {
  margin: 0 0 18px;

  font-family: "Manrope", sans-serif;

  font-size: clamp(32px, 4vw, 54px);

  line-height: 1.08;

  letter-spacing: -0.04em;
}

.blog-newsletter h2 span {
  display: block;

  color: #74aaff;
}

.blog-newsletter p {
  max-width: 620px;

  margin: 0 auto 30px;

  color: rgba(255, 255, 255, 0.68);

  font-size: 16px;

  line-height: 1.7;
}

.blog-newsletter-form {
  max-width: 560px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr auto;

  gap: 10px;
}

.blog-newsletter-form input {
  width: 100%;

  min-height: 54px;

  padding: 0 18px;

  border: 1px solid rgba(255, 255, 255, 0.14);

  border-radius: 8px;

  outline: none;

  background: rgba(255, 255, 255, 0.08);

  color: #fff;

  font: inherit;

  font-size: 14px;
}

.blog-newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.blog-newsletter-form input:focus {
  border-color: rgba(117, 170, 255, 0.7);

  box-shadow: 0 0 0 3px rgba(117, 170, 255, 0.1);
}

.newsletter-note {
  display: block;

  margin-top: 15px;

  color: rgba(255, 255, 255, 0.4);

  font-size: 11px;
}

.newsletter-note.success {
  color: #75e1aa;
}

/* =========================================================
   FINAL CTA
========================================================= */

.blog-final-cta {
  padding: 90px 0;

  background: var(--blog-bg);
}

.blog-final-cta-inner {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 50px;

  padding: 60px;

  border-radius: var(--blog-radius);

  background: #fff;

  border: 1px solid var(--blog-border);

  box-shadow: var(--blog-shadow);
}

.blog-final-cta-inner > div:first-child {
  max-width: 700px;
}

.blog-final-cta .eyebrow {
  display: block;

  margin-bottom: 13px;

  color: var(--blog-blue);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.16em;
}

.blog-final-cta h2 {
  margin: 0 0 16px;

  color: var(--blog-navy);

  font-family: "Manrope", sans-serif;

  font-size: clamp(32px, 4vw, 50px);

  line-height: 1.08;

  letter-spacing: -0.04em;
}

.blog-final-cta h2 span {
  color: var(--blog-blue);
}

.blog-final-cta p {
  max-width: 650px;

  margin: 0;

  color: var(--blog-text-soft);

  font-size: 15px;

  line-height: 1.7;
}

.blog-final-cta-actions {
  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 18px;
}

.blog-final-contact {
  color: var(--blog-navy);

  font-size: 13px;

  font-weight: 800;

  text-decoration: none;
}

.blog-final-contact span {
  color: var(--blog-blue);

  margin-left: 6px;
}

/* =========================================================
   REVEAL ANIMATION
========================================================= */

.blog-page .reveal {
  opacity: 0;

  transform: translateY(25px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.blog-page .reveal.revealed {
  opacity: 1;

  transform: translateY(0);
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .blog-page .reveal {
    opacity: 1;

    transform: none;

    transition: none;
  }

  .blog-card,
  .blog-read-link span,
  .blog-card-footer a span {
    transition: none;
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
  .blog-category-bar {
    align-items: flex-start;

    flex-direction: column;

    padding: 24px 0;
  }

  .blog-categories {
    justify-content: flex-start;
  }

  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .featured-blog-card {
    grid-template-columns: 1fr;
  }

  .featured-blog-visual {
    min-height: 430px;
  }

  .featured-blog-content {
    padding: 45px;
  }
}

@media (max-width: 800px) {
  .blog-hero {
    min-height: 470px;
  }

  .blog-hero-content {
    padding: 85px 0 80px;
  }

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

  .blog-resource-strip-inner {
    align-items: flex-start;

    flex-wrap: wrap;
  }

  .blog-resource-strip-inner > div:nth-child(2) {
    min-width: calc(100% - 90px);
  }

  .blog-resource-strip-inner .btn {
    margin-left: 80px;
  }

  .blog-final-cta-inner {
    align-items: flex-start;

    flex-direction: column;

    padding: 42px 30px;
  }

  .blog-final-cta-actions {
    width: 100%;

    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .blog-hero h1 {
    font-size: 42px;
  }

  .blog-hero p {
    font-size: 15px;
  }

  .blog-categories {
    flex-wrap: nowrap;

    overflow-x: auto;

    width: 100%;

    padding-bottom: 5px;

    scrollbar-width: none;
  }

  .blog-categories::-webkit-scrollbar {
    display: none;
  }

  .blog-category {
    flex-shrink: 0;
  }

  .featured-blog-visual {
    min-height: 360px;
  }

  .featured-visual-orbit.orbit-one {
    width: 300px;
    height: 300px;
  }

  .featured-visual-orbit.orbit-two {
    width: 200px;
    height: 200px;
  }

  .featured-visual-center {
    width: 120px;
    height: 120px;
  }

  .featured-visual-center span {
    font-size: 34px;
  }

  .featured-visual-node {
    min-width: auto;

    padding: 8px 10px;

    font-size: 9px;
  }

  .featured-visual-node span {
    display: none;
  }

  .node-one {
    left: 6%;
  }

  .node-two {
    right: 6%;
  }

  .node-three {
    left: 5%;
  }

  .node-four {
    right: 5%;
  }

  .featured-blog-content {
    padding: 32px 25px;
  }

  .featured-blog-content h3 {
    font-size: 29px;
  }

  .featured-blog-bottom {
    align-items: flex-start;

    flex-direction: column;
  }

  .blog-card-body {
    padding: 23px;
  }

  .blog-card-body p {
    min-height: auto;
  }

  .blog-newsletter {
    padding: 80px 0;
  }

  .blog-newsletter-form {
    grid-template-columns: 1fr;
  }

  .blog-newsletter-form .btn {
    width: 100%;
  }

  .blog-resource-strip-inner {
    padding: 25px;
  }

  .blog-resource-strip-inner .btn {
    width: 100%;

    margin-left: 0;
  }

  .blog-final-cta {
    padding: 60px 0;
  }

  .blog-final-cta-actions {
    width: 100%;
  }

  .blog-final-cta-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   KAMAL GROUP OF CORPORATE
   RESOURCES / GUIDES PAGE
========================================================= */

/* =========================================================
   ROOT
========================================================= */

.resources-guides-page {
  --guides-navy: #081a33;
  --guides-navy-2: #0d2344;
  --guides-blue: #1769ff;
  --guides-blue-light: #eaf2ff;

  --guides-purple: #7557e8;
  --guides-purple-light: #f0edff;

  --guides-green: #16a673;
  --guides-green-light: #e8f8f1;

  --guides-orange: #f28b35;
  --guides-orange-light: #fff1e6;

  --guides-cyan: #159db7;
  --guides-cyan-light: #e8f8fb;

  --guides-white: #ffffff;
  --guides-bg: #f7f9fc;

  --guides-text: #142033;
  --guides-muted: #68758a;

  --guides-border: #e3e8f0;

  --guides-shadow: 0 20px 60px rgba(8, 26, 51, 0.09);

  --guides-radius: 22px;

  overflow-x: hidden;
}

/* =========================================================
   HERO
========================================================= */

.guides-hero {
  position: relative;

  overflow: hidden;

  padding: 150px 0 105px;

  background:
    radial-gradient(
      circle at 75% 30%,
      rgba(23, 105, 255, 0.18),
      transparent 32%
    ),
    linear-gradient(135deg, #06152b 0%, #081a33 48%, #0d2344 100%);

  color: #fff;
}

.guides-hero-grid {
  position: absolute;

  inset: 0;

  opacity: 0.16;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);

  background-size: 70px 70px;

  mask-image: linear-gradient(
    to right,
    transparent,
    black 20%,
    black 80%,
    transparent
  );

  pointer-events: none;
}

.guides-hero-glow {
  position: absolute;

  width: 450px;

  height: 450px;

  border-radius: 50%;

  filter: blur(80px);

  pointer-events: none;

  opacity: 0.18;
}

.guides-glow-one {
  right: -120px;

  top: 80px;

  background: #1769ff;
}

.guides-glow-two {
  left: -180px;

  bottom: -200px;

  background: #7557e8;
}

/* =========================================================
   HERO LAYOUT
========================================================= */

.guides-hero-layout {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(420px, 0.95fr);

  gap: 70px;

  align-items: center;
}

.guides-hero-content {
  max-width: 720px;
}

.guides-label {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 24px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}

.guides-label-mark {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 32px;

  height: 32px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 9px;

  background: rgba(255, 255, 255, 0.07);

  color: #fff;

  font-family: Manrope, sans-serif;

  font-weight: 800;
}

.resources-guides-page .eyebrow {
  display: inline-block;

  margin-bottom: 16px;

  color: rgba(255, 255, 255, 0.62);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.guides-hero h1 {
  max-width: 780px;

  margin: 0;

  font-family: Manrope, sans-serif;

  font-size: clamp(44px, 5vw, 76px);

  line-height: 1.04;

  letter-spacing: -0.045em;

  font-weight: 800;
}

.guides-hero h1 span {
  display: block;

  color: #5b9cff;
}

.guides-hero-content > p {
  max-width: 680px;

  margin: 28px 0 0;

  color: rgba(255, 255, 255, 0.72);

  font-size: 17px;

  line-height: 1.8;
}

/* =========================================================
   HERO ACTIONS
========================================================= */

.guides-hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 34px;
}

.guides-hero-actions .btn-secondary {
  border-color: rgba(255, 255, 255, 0.18);

  color: #fff;

  background: rgba(255, 255, 255, 0.05);
}

.guides-hero-actions .btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.35);

  background: rgba(255, 255, 255, 0.1);
}

/* =========================================================
   HERO META
========================================================= */

.guides-hero-meta {
  display: flex;

  flex-wrap: wrap;

  gap: 0;

  margin-top: 48px;

  padding-top: 24px;

  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.guides-meta-item {
  min-width: 150px;

  padding: 0 24px;

  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.guides-meta-item:first-child {
  padding-left: 0;
}

.guides-meta-item:last-child {
  border-right: 0;
}

.guides-meta-item strong {
  display: block;

  margin-bottom: 5px;

  color: #fff;

  font-size: 14px;
}

.guides-meta-item span {
  color: rgba(255, 255, 255, 0.5);

  font-size: 12px;
}

/* =========================================================
   HERO VISUAL
========================================================= */

.guides-hero-visual {
  position: relative;

  min-height: 570px;

  display: flex;

  align-items: center;

  justify-content: center;
}

.guides-book-scene {
  position: relative;

  width: 100%;

  max-width: 520px;

  height: 540px;

  display: flex;

  align-items: center;

  justify-content: center;
}

/* =========================================================
   BOOK
========================================================= */

.guides-book {
  position: relative;

  width: 350px;

  min-height: 450px;

  overflow: hidden;

  border-radius: 8px 18px 18px 8px;

  background: linear-gradient(145deg, #1769ff, #0b3d9d);

  box-shadow:
    -18px 25px 50px rgba(0, 0, 0, 0.3),
    20px 30px 70px rgba(0, 0, 0, 0.25);

  transform: perspective(1000px) rotateY(-8deg) rotateX(2deg);

  animation: guideBookFloat 6s ease-in-out infinite;
}

.guides-book::before {
  content: "";

  position: absolute;

  top: 0;

  bottom: 0;

  left: 16px;

  width: 3px;

  background: rgba(255, 255, 255, 0.22);
}

.guides-book::after {
  content: "";

  position: absolute;

  inset: 15px;

  border: 1px solid rgba(255, 255, 255, 0.18);

  border-radius: 4px;

  pointer-events: none;
}

.guides-book-top {
  position: relative;

  z-index: 2;

  display: flex;

  justify-content: space-between;

  padding: 30px 30px 0;

  color: rgba(255, 255, 255, 0.68);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.14em;
}

.guides-book-content {
  position: relative;

  z-index: 2;

  padding: 80px 35px 50px;
}

.guides-book-content small {
  display: block;

  margin-bottom: 18px;

  color: rgba(255, 255, 255, 0.65);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.15em;
}

.guides-book-content h3 {
  margin: 0;

  color: #fff;

  font-family: Manrope, sans-serif;

  font-size: 35px;

  line-height: 1.08;

  letter-spacing: -0.04em;
}

.guides-book-content h3 span {
  display: block;

  color: #a9caff;
}

.guides-book-content p {
  margin-top: 22px;

  color: rgba(255, 255, 255, 0.68);

  font-size: 12px;

  line-height: 1.6;
}

.guides-book-lines {
  display: grid;

  gap: 8px;

  margin-top: 28px;
}

.guides-book-lines span {
  display: block;

  height: 4px;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.2);
}

.guides-book-lines span:nth-child(1) {
  width: 90%;
}

.guides-book-lines span:nth-child(2) {
  width: 72%;
}

.guides-book-lines span:nth-child(3) {
  width: 48%;
}

.guides-book-footer {
  position: absolute;

  right: 30px;

  bottom: 25px;

  left: 30px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: rgba(255, 255, 255, 0.6);
}

.guides-book-footer span {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 30px;

  height: 30px;

  border: 1px solid rgba(255, 255, 255, 0.25);

  border-radius: 8px;

  color: #fff;

  font-weight: 800;
}

.guides-book-footer small {
  font-size: 7px;

  font-weight: 800;

  letter-spacing: 0.08em;
}

/* =========================================================
   FLOATING CARDS
========================================================= */

.guides-floating-card {
  position: absolute;

  z-index: 5;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 15px 18px;

  min-width: 220px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 15px;

  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(16px);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

.guides-floating-top {
  top: 70px;

  right: 0;

  animation: floatingCardOne 5s ease-in-out infinite;
}

.guides-floating-bottom {
  bottom: 65px;

  left: -10px;

  animation: floatingCardTwo 5.5s ease-in-out infinite;
}

.guides-floating-icon {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 38px;

  height: 38px;

  flex: 0 0 38px;

  border-radius: 11px;

  font-size: 16px;
}

.guides-floating-icon.blue {
  background: rgba(23, 105, 255, 0.25);

  color: #7db0ff;
}

.guides-floating-icon.green {
  background: rgba(22, 166, 115, 0.2);

  color: #65ddb0;
}

.guides-floating-card strong {
  display: block;

  color: #fff;

  font-size: 12px;
}

.guides-floating-card small {
  display: block;

  margin-top: 4px;

  color: rgba(255, 255, 255, 0.5);

  font-size: 10px;
}

@keyframes guideBookFloat {
  0%,
  100% {
    transform: perspective(1000px) rotateY(-8deg) rotateX(2deg) translateY(0);
  }

  50% {
    transform: perspective(1000px) rotateY(-8deg) rotateX(2deg)
      translateY(-12px);
  }
}

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

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

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

  50% {
    transform: translateY(9px);
  }
}

/* =========================================================
   INTRO
========================================================= */

.guides-intro {
  background: #fff;
}

.guides-intro-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  gap: 80px;

  align-items: start;
}

.guides-intro-heading h2 {
  margin: 0;

  font-family: Manrope, sans-serif;

  font-size: clamp(34px, 4vw, 54px);

  line-height: 1.1;

  letter-spacing: -0.04em;

  color: var(--guides-text);
}

.guides-intro-heading h2 span {
  display: block;

  color: var(--guides-blue);
}

.guides-intro-content {
  padding-top: 10px;
}

.guides-intro-content p {
  margin: 0 0 22px;

  color: var(--guides-muted);

  font-size: 16px;

  line-height: 1.8;
}

/* =========================================================
   CATEGORIES
========================================================= */

.guides-categories {
  background: var(--guides-bg);
}

.guides-categories .section-heading {
  max-width: 760px;

  margin: 0 auto 55px;

  text-align: center;
}

.guides-categories .section-heading h2 {
  font-family: Manrope, sans-serif;

  font-size: clamp(34px, 4vw, 54px);

  line-height: 1.1;

  letter-spacing: -0.04em;
}

.guides-categories .section-heading h2 span {
  display: block;

  color: var(--guides-blue);
}

.guides-categories .section-heading p {
  max-width: 650px;

  margin: 20px auto 0;

  color: var(--guides-muted);

  line-height: 1.8;
}

.guides-category-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 18px;
}

.guides-category-card {
  position: relative;

  display: flex;

  min-height: 330px;

  flex-direction: column;

  justify-content: space-between;

  padding: 27px;

  border: 1px solid var(--guides-border);

  border-radius: var(--guides-radius);

  background: #fff;

  color: var(--guides-text);

  text-decoration: none;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.guides-category-card:hover {
  transform: translateY(-7px);

  border-color: rgba(23, 105, 255, 0.25);

  box-shadow: var(--guides-shadow);
}

.guides-category-top {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;
}

.guides-category-top > span {
  color: #a5afbe;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.12em;
}

.guides-category-icon {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 54px;

  height: 54px;

  border-radius: 15px;

  font-size: 22px;
}

.guides-category-icon.blue {
  background: var(--guides-blue-light);
}

.guides-category-icon.purple {
  background: var(--guides-purple-light);
}

.guides-category-icon.green {
  background: var(--guides-green-light);
}

.guides-category-icon.orange {
  background: var(--guides-orange-light);
}

.guides-category-card h3 {
  margin: 40px 0 12px;

  font-family: Manrope, sans-serif;

  font-size: 20px;

  line-height: 1.25;
}

.guides-category-card p {
  margin: 0;

  color: var(--guides-muted);

  font-size: 13px;

  line-height: 1.7;
}

.guides-category-link {
  margin-top: 28px;

  color: var(--guides-blue);

  font-size: 12px;

  font-weight: 800;
}

/* =========================================================
   FEATURED GUIDE
========================================================= */

.guides-featured {
  background: #fff;
}

.guides-featured-box {
  display: grid;

  grid-template-columns:
    minmax(350px, 0.85fr)
    minmax(0, 1.15fr);

  gap: 70px;

  align-items: center;

  padding: 70px;

  border-radius: 28px;

  background: linear-gradient(135deg, #eef5ff, #f8faff);

  border: 1px solid #e0e9f8;

  overflow: hidden;
}

/* =========================================================
   FEATURED DOCUMENT
========================================================= */

.guides-featured-visual {
  display: flex;

  justify-content: center;
}

.guides-featured-document {
  position: relative;

  width: 310px;

  min-height: 405px;

  overflow: hidden;

  border-radius: 8px;

  background: #fff;

  box-shadow: 0 30px 70px rgba(8, 26, 51, 0.15);

  transform: rotate(-4deg);

  transition: transform 0.4s ease;
}

.guides-featured-box:hover .guides-featured-document {
  transform: rotate(0deg) translateY(-6px);
}

.featured-document-top {
  display: flex;

  justify-content: space-between;

  padding: 20px 22px;

  color: var(--guides-blue);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.12em;

  border-bottom: 1px solid #e6ebf2;
}

.featured-document-main {
  padding: 45px 25px 30px;
}

.featured-document-main small {
  color: var(--guides-blue);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 0.13em;
}

.featured-document-main h3 {
  margin: 18px 0 15px;

  font-family: Manrope, sans-serif;

  font-size: 26px;

  line-height: 1.1;

  letter-spacing: -0.035em;

  color: var(--guides-text);
}

.featured-document-main h3 span {
  display: block;

  color: var(--guides-blue);
}

.featured-document-main p {
  color: var(--guides-muted);

  font-size: 11px;

  line-height: 1.65;
}

.featured-document-lines {
  display: grid;

  gap: 7px;

  margin-top: 24px;
}

.featured-document-lines span {
  height: 3px;

  border-radius: 10px;

  background: #e5eaf1;
}

.featured-document-lines span:nth-child(1) {
  width: 95%;
}

.featured-document-lines span:nth-child(2) {
  width: 80%;
}

.featured-document-lines span:nth-child(3) {
  width: 88%;
}

.featured-document-lines span:nth-child(4) {
  width: 55%;
}

.featured-document-bottom {
  position: absolute;

  right: 22px;

  bottom: 18px;

  left: 22px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-top: 1px solid #e6ebf2;

  padding-top: 14px;
}

.featured-document-bottom span {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 28px;

  height: 28px;

  border-radius: 7px;

  background: var(--guides-navy);

  color: #fff;

  font-size: 12px;

  font-weight: 800;
}

.featured-document-bottom strong {
  color: #8c98aa;

  font-size: 7px;

  letter-spacing: 0.08em;
}

/* =========================================================
   FEATURED CONTENT
========================================================= */

.guides-featured-content h2 {
  margin: 0;

  font-family: Manrope, sans-serif;

  font-size: clamp(34px, 4vw, 54px);

  line-height: 1.08;

  letter-spacing: -0.045em;
}

.guides-featured-content h2 span {
  display: block;

  color: var(--guides-blue);
}

.guides-featured-content > p {
  max-width: 650px;

  margin: 22px 0 0;

  color: var(--guides-muted);

  line-height: 1.8;
}

.guides-featured-points {
  display: grid;

  gap: 15px;

  margin: 30px 0 32px;
}

.guides-featured-points > div {
  display: flex;

  align-items: flex-start;

  gap: 13px;
}

.guides-featured-points span {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 29px;

  height: 29px;

  flex: 0 0 29px;

  border-radius: 8px;

  background: var(--guides-blue-light);

  color: var(--guides-blue);

  font-size: 9px;

  font-weight: 800;
}

.guides-featured-points p {
  margin: 3px 0 0;

  color: var(--guides-text);

  font-size: 13px;

  line-height: 1.6;
}

/* =========================================================
   LIBRARY
========================================================= */

.guides-library {
  background: var(--guides-bg);
}

.guides-library-heading {
  max-width: 760px;

  margin-bottom: 40px;
}

.guides-library-heading h2 {
  font-family: Manrope, sans-serif;

  font-size: clamp(34px, 4vw, 54px);

  line-height: 1.1;

  letter-spacing: -0.04em;
}

.guides-library-heading h2 span {
  color: var(--guides-blue);
}

/* =========================================================
   FILTER
========================================================= */

.guides-filter {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-bottom: 35px;

  padding-bottom: 20px;

  border-bottom: 1px solid var(--guides-border);
}

.guides-filter-button {
  appearance: none;

  border: 1px solid var(--guides-border);

  border-radius: 100px;

  padding: 10px 17px;

  background: #fff;

  color: var(--guides-muted);

  font-family: inherit;

  font-size: 11px;

  font-weight: 700;

  cursor: pointer;

  transition: 0.25s ease;
}

.guides-filter-button:hover {
  border-color: var(--guides-blue);

  color: var(--guides-blue);
}

.guides-filter-button.active {
  border-color: var(--guides-navy);

  background: var(--guides-navy);

  color: #fff;
}

/* =========================================================
   GUIDE GRID
========================================================= */

.guides-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 22px;
}

.guide-card {
  overflow: hidden;

  border: 1px solid var(--guides-border);

  border-radius: var(--guides-radius);

  background: #fff;

  box-shadow: 0 8px 30px rgba(8, 26, 51, 0.035);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.25s ease;
}

.guide-card:hover {
  transform: translateY(-6px);

  box-shadow: var(--guides-shadow);
}

.guide-card.hidden {
  display: none;
}

/* =========================================================
   GUIDE CARD VISUAL
========================================================= */

.guide-card-visual {
  position: relative;

  height: 210px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;
}

.guide-card-visual::before {
  content: "";

  position: absolute;

  width: 220px;

  height: 220px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.22);

  transform: translate(55px, -45px);
}

.guide-card-visual::after {
  content: "";

  position: absolute;

  width: 160px;

  height: 160px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.14);

  transform: translate(-70px, 70px);
}

.guide-card-visual.blue {
  background: linear-gradient(135deg, #1769ff, #0d47aa);
}

.guide-card-visual.purple {
  background: linear-gradient(135deg, #7957e8, #4e3ca9);
}

.guide-card-visual.green {
  background: linear-gradient(135deg, #18a878, #087354);
}

.guide-card-visual.orange {
  background: linear-gradient(135deg, #f28b35, #c85d11);
}

.guide-card-visual.cyan {
  background: linear-gradient(135deg, #159db7, #087184);
}

.guide-card-visual.dark {
  background: linear-gradient(135deg, #172d4e, #081a33);
}

.guide-card-number {
  position: absolute;

  top: 20px;

  left: 22px;

  z-index: 2;

  color: rgba(255, 255, 255, 0.65);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.13em;
}

.guide-card-symbol {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 82px;

  height: 82px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 24px;

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(8px);

  font-size: 31px;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.guide-card-label {
  position: absolute;

  right: 20px;

  bottom: 18px;

  z-index: 2;

  color: rgba(255, 255, 255, 0.58);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 0.14em;
}

/* =========================================================
   GUIDE BODY
========================================================= */

.guide-card-body {
  padding: 25px;
}

.guide-card-meta {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-bottom: 15px;

  color: #8a96a8;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}

.guide-card-meta span:last-child {
  color: var(--guides-blue);
}

.guide-card-body h3 {
  margin: 0;

  font-family: Manrope, sans-serif;

  font-size: 19px;

  line-height: 1.3;

  letter-spacing: -0.02em;

  color: var(--guides-text);
}

.guide-card-body > p {
  margin: 14px 0 22px;

  color: var(--guides-muted);

  font-size: 13px;

  line-height: 1.7;
}

.guide-read-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--guides-blue);

  font-size: 12px;

  font-weight: 800;

  text-decoration: none;

  transition: gap 0.25s ease;
}

.guide-read-link:hover {
  gap: 13px;
}

/* =========================================================
   BENEFITS
========================================================= */

.guides-benefits {
  background: #fff;
}

.guides-benefits-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap: 100px;

  align-items: start;
}

.guides-benefits-content h2 {
  margin: 0;

  font-family: Manrope, sans-serif;

  font-size: clamp(35px, 4vw, 55px);

  line-height: 1.08;

  letter-spacing: -0.045em;
}

.guides-benefits-content h2 span {
  display: block;

  color: var(--guides-blue);
}

.guides-benefits-content > p {
  max-width: 560px;

  margin: 24px 0 30px;

  color: var(--guides-muted);

  line-height: 1.8;
}

.guides-benefits-list {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  border-top: 1px solid var(--guides-border);

  border-left: 1px solid var(--guides-border);
}

.guides-benefit-item {
  display: flex;

  gap: 16px;

  padding: 28px;

  border-right: 1px solid var(--guides-border);

  border-bottom: 1px solid var(--guides-border);
}

.guides-benefit-item > span {
  color: var(--guides-blue);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.1em;
}

.guides-benefit-item h3 {
  margin: 0 0 7px;

  font-family: Manrope, sans-serif;

  font-size: 18px;
}

.guides-benefit-item p {
  margin: 0;

  color: var(--guides-muted);

  font-size: 12px;

  line-height: 1.7;
}

/* =========================================================
   CTA
========================================================= */

.guides-cta {
  position: relative;

  overflow: hidden;

  padding: 110px 0;

  background: linear-gradient(135deg, #07172e, #0c2850);

  color: #fff;

  text-align: center;
}

.guides-cta-grid {
  position: absolute;

  inset: 0;

  opacity: 0.12;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);

  background-size: 65px 65px;

  pointer-events: none;
}

.guides-cta-content {
  position: relative;

  z-index: 2;

  max-width: 850px;

  margin: auto;
}

.guides-cta-mark {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 58px;

  height: 58px;

  margin: 0 auto 24px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.06);

  font-family: Manrope, sans-serif;

  font-size: 22px;

  font-weight: 800;
}

.guides-cta .eyebrow {
  color: rgba(255, 255, 255, 0.55);
}

.guides-cta h2 {
  margin: 0;

  font-family: Manrope, sans-serif;

  font-size: clamp(40px, 5vw, 66px);

  line-height: 1.05;

  letter-spacing: -0.045em;
}

.guides-cta h2 span {
  display: block;

  color: #5b9cff;
}

.guides-cta-content > p {
  max-width: 700px;

  margin: 25px auto 0;

  color: rgba(255, 255, 255, 0.65);

  line-height: 1.8;
}

.guides-cta-actions {
  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 25px;

  margin-top: 35px;
}

.guides-cta-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: #fff;

  font-size: 13px;

  font-weight: 700;

  text-decoration: none;

  transition: gap 0.25s ease;
}

.guides-cta-link:hover {
  gap: 13px;
}

/* =========================================================
   FOOTER ACTIVE STATE
========================================================= */

.resources-guides-page .footer-column a.active {
  color: var(--guides-blue);
}

/* =========================================================
   REVEAL ANIMATION
========================================================= */

.resources-guides-page .reveal {
  opacity: 0;

  transform: translateY(25px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.resources-guides-page .reveal.revealed {
  opacity: 1;

  transform: translateY(0);
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .resources-guides-page *,
  .resources-guides-page *::before,
  .resources-guides-page *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {
  .guides-hero-layout {
    gap: 45px;
  }

  .guides-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guides-featured-box {
    padding: 50px;

    gap: 50px;
  }

  .guides-benefits-grid {
    gap: 55px;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {
  .guides-hero {
    padding: 125px 0 80px;
  }

  .guides-hero-layout {
    grid-template-columns: 1fr;
  }

  .guides-hero-content {
    max-width: 800px;

    margin: auto;

    text-align: center;
  }

  .guides-label {
    justify-content: center;
  }

  .guides-hero-content > p {
    margin-left: auto;

    margin-right: auto;
  }

  .guides-hero-actions {
    justify-content: center;
  }

  .guides-hero-meta {
    justify-content: center;
  }

  .guides-hero-visual {
    min-height: 500px;
  }

  .guides-intro-grid {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .guides-featured-box {
    grid-template-columns: 1fr;
  }

  .guides-featured-visual {
    order: 2;
  }

  .guides-featured-content {
    order: 1;
  }

  .guides-benefits-grid {
    grid-template-columns: 1fr;
  }

  .guides-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {
  .guides-hero {
    padding: 110px 0 70px;
  }

  .guides-hero h1 {
    font-size: clamp(39px, 11vw, 54px);
  }

  .guides-hero-content > p {
    font-size: 15px;
  }

  .guides-hero-meta {
    align-items: stretch;
  }

  .guides-meta-item {
    min-width: 0;

    flex: 1;

    padding: 0 13px;
  }

  .guides-meta-item strong {
    font-size: 11px;
  }

  .guides-meta-item span {
    font-size: 9px;
  }

  .guides-hero-visual {
    min-height: 430px;
  }

  .guides-book-scene {
    height: 430px;
  }

  .guides-book {
    width: 280px;

    min-height: 360px;
  }

  .guides-book-content {
    padding: 60px 28px 40px;
  }

  .guides-book-content h3 {
    font-size: 28px;
  }

  .guides-floating-card {
    min-width: 185px;

    padding: 11px 13px;
  }

  .guides-floating-top {
    top: 45px;

    right: 0;
  }

  .guides-floating-bottom {
    bottom: 35px;

    left: 0;
  }

  .guides-floating-card strong {
    font-size: 10px;
  }

  .guides-floating-card small {
    font-size: 8px;
  }

  .guides-floating-icon {
    width: 32px;

    height: 32px;

    flex-basis: 32px;
  }

  .guides-category-grid {
    grid-template-columns: 1fr;
  }

  .guides-category-card {
    min-height: 290px;
  }

  .guides-featured-box {
    padding: 35px 20px;
  }

  .guides-featured-document {
    width: 270px;

    min-height: 370px;
  }

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

  .guides-filter {
    overflow-x: auto;

    flex-wrap: nowrap;

    padding-bottom: 15px;
  }

  .guides-filter-button {
    flex: 0 0 auto;
  }

  .guides-benefits-list {
    grid-template-columns: 1fr;
  }

  .guides-benefit-item {
    padding: 22px;
  }

  .guides-cta {
    padding: 80px 0;
  }

  .guides-cta h2 {
    font-size: clamp(38px, 10vw, 52px);
  }

  .guides-cta-actions {
    flex-direction: column;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 450px) {
  .guides-hero-meta {
    display: grid;

    grid-template-columns: repeat(3, 1fr);
  }

  .guides-meta-item {
    padding: 0 8px;
  }

  .guides-book {
    width: 245px;

    min-height: 335px;
  }

  .guides-book-content {
    padding: 55px 23px 35px;
  }

  .guides-book-content h3 {
    font-size: 25px;
  }

  .guides-floating-card {
    min-width: 165px;
  }

  .guides-floating-top {
    right: -10px;
  }

  .guides-floating-bottom {
    left: -10px;
  }

  .guides-featured-document {
    width: 245px;
  }
}
/* =========================================================
   KAMAL CUSTOMER STORIES / CASE STUDIES PAGE
   ========================================================= */

.case-studies-page {
  --case-blue: #1769e0;
  --case-blue-dark: #0b4db8;
  --case-purple: #7656e8;
  --case-green: #16a673;
  --case-orange: #ef8b35;
  --case-cyan: #159eb8;
  --case-navy: #081a33;
  --case-text: #10233f;
  --case-muted: #64748b;
  --case-border: #e4eaf2;
  --case-light: #f5f8fc;
  --case-white: #ffffff;
}

/* =========================================================
   RESOURCE HERO
   ========================================================= */

.resource-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 82% 22%,
      rgba(35, 112, 232, 0.14),
      transparent 30%
    ),
    radial-gradient(
      circle at 15% 70%,
      rgba(118, 86, 232, 0.08),
      transparent 25%
    ),
    #f6f9fd;
  padding: 150px 0 100px;
}

.resource-hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(23, 105, 224, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 105, 224, 0.055) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    rgba(0, 0, 0, 0.65) 55%,
    transparent 100%
  );
}

.resource-hero-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(500px, 0.92fr);
  align-items: center;
  gap: 75px;
}

.resource-hero-content {
  max-width: 720px;
}

.resource-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: var(--case-navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.resource-label-mark {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--case-blue), #104aa2);
  box-shadow: 0 8px 20px rgba(23, 105, 224, 0.2);
}

.resource-hero .eyebrow {
  display: block;
  margin-bottom: 16px;
  color: var(--case-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.resource-hero h1 {
  margin: 0;
  color: var(--case-navy);
  font-family: "Manrope", sans-serif;
  font-size: clamp(44px, 5vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 800;
}

.resource-hero h1 span {
  display: block;
  color: var(--case-blue);
}

.resource-hero-content > p {
  max-width: 650px;
  margin: 28px 0 0;
  color: #5c6d82;
  font-size: 17px;
  line-height: 1.85;
}

.resource-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

.resource-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 48px;
}

.resource-hero-meta-item {
  min-width: 150px;
  padding: 0 24px;
  border-left: 1px solid #dce4ef;
}

.resource-hero-meta-item:first-child {
  padding-left: 0;
  border-left: 0;
}

.resource-hero-meta-item strong {
  display: block;
  margin-bottom: 5px;
  color: var(--case-navy);
  font-size: 14px;
  font-weight: 800;
}

.resource-hero-meta-item span {
  display: block;
  color: #7b8ba0;
  font-size: 12px;
}

/* =========================================================
   HERO DASHBOARD
   ========================================================= */

.resource-hero-visual {
  position: relative;
}

.resource-visual-glow {
  position: absolute;
  width: 430px;
  height: 430px;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(23, 105, 224, 0.15);
  filter: blur(80px);
  pointer-events: none;
}

.case-study-dashboard {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: linear-gradient(145deg, #102a4d, #071a32);
  box-shadow:
    0 35px 80px rgba(8, 26, 51, 0.2),
    0 10px 25px rgba(8, 26, 51, 0.12);
}

.case-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.case-dashboard-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.case-dashboard-logo {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #2683ff, #1454b7);
  font-family: "Manrope", sans-serif;
  font-weight: 800;
}

.case-dashboard-brand small {
  display: block;
  margin-bottom: 3px;
  color: #6e91ba;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.case-dashboard-brand strong {
  display: block;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.case-dashboard-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #79d9b0;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.case-dashboard-body {
  padding: 28px;
}

.case-dashboard-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.case-dashboard-title small {
  display: block;
  margin-bottom: 7px;
  color: #6484a9;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.case-dashboard-title h3 {
  margin: 0;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 25px;
  line-height: 1.25;
}

.case-dashboard-title h3 span {
  color: #4e9aff;
}

.case-dashboard-mark {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid rgba(80, 156, 255, 0.22);
  border-radius: 15px;
  color: #4c9aff;
  background: rgba(23, 105, 224, 0.1);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-weight: 800;
}

.case-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 25px;
}

.case-metric {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

.case-metric-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 9px;
  font-size: 15px;
}

.case-metric-icon.blue {
  background: rgba(50, 135, 255, 0.13);
}

.case-metric-icon.purple {
  background: rgba(137, 103, 239, 0.13);
}

.case-metric-icon.green {
  background: rgba(24, 179, 120, 0.13);
}

.case-metric strong {
  display: block;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.case-metric small {
  display: block;
  margin-top: 3px;
  color: #7088a6;
  font-size: 8px;
}

.case-dashboard-story {
  margin-top: 17px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
}

.case-story-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.case-story-heading strong {
  color: #dbe8f8;
  font-size: 10px;
}

.case-story-heading span {
  color: #6383a9;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.case-story-line {
  height: 5px;
  overflow: hidden;
  margin-top: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
}

.case-story-progress {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #247dff, #5da9ff);
}

.case-story-stages {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  color: #6782a1;
  font-size: 8px;
}

.case-dashboard-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 17px;
  padding: 15px;
  border: 1px solid rgba(82, 155, 255, 0.12);
  border-radius: 14px;
  background: rgba(23, 105, 224, 0.08);
}

.case-note-icon {
  width: 29px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 8px;
  color: #65a9ff;
  background: rgba(23, 105, 224, 0.14);
}

.case-dashboard-note strong {
  display: block;
  color: #dfeaf8;
  font-size: 10px;
}

.case-dashboard-note small {
  display: block;
  max-width: 400px;
  margin-top: 4px;
  color: #7690ad;
  font-size: 8px;
  line-height: 1.6;
}

.case-dashboard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: #4f7198;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

/* =========================================================
   INTRO
   ========================================================= */

.resource-intro {
  background: #fff;
}

.resource-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 100px;
  align-items: start;
}

.resource-intro-heading .eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--case-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.resource-intro-heading h2 {
  margin: 0;
  color: var(--case-navy);
  font-family: "Manrope", sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.resource-intro-heading h2 span {
  color: var(--case-blue);
}

.resource-intro-content {
  padding-top: 33px;
}

.resource-intro-content p {
  margin: 0 0 20px;
  color: #627286;
  font-size: 16px;
  line-height: 1.85;
}

/* =========================================================
   FEATURED CASE STUDY
   ========================================================= */

.featured-case-study {
  background: #f6f9fd;
}

.featured-case-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 90px;
  align-items: center;
}

.featured-case-visual {
  position: relative;
}

.featured-case-card {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  padding: 34px;
  border-radius: 25px;
  color: #fff;
  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(67, 146, 255, 0.22),
      transparent 30%
    ),
    linear-gradient(145deg, #102b4f, #06182f);
  box-shadow: 0 30px 65px rgba(8, 26, 51, 0.18);
}

.featured-case-card::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -110px;
  bottom: -110px;
  border: 1px solid rgba(82, 158, 255, 0.16);
  border-radius: 50%;
}

.featured-case-card-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #6990bb;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.featured-case-card-top strong {
  color: #4b98ff;
  font-size: 16px;
}

.featured-case-icon {
  position: relative;
  z-index: 2;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 90px;
  border: 1px solid rgba(71, 151, 255, 0.2);
  border-radius: 21px;
  color: #64a9ff;
  background: rgba(23, 105, 224, 0.1);
  font-family: "Manrope", sans-serif;
  font-size: 29px;
  font-weight: 800;
}

.featured-case-card-content {
  position: relative;
  z-index: 2;
  max-width: 450px;
  margin-top: 27px;
}

.featured-case-card-content small {
  color: #5f88b5;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.featured-case-card-content h3 {
  margin: 12px 0 15px;
  font-family: "Manrope", sans-serif;
  font-size: 31px;
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.featured-case-card-content h3 span {
  color: #4c9aff;
}

.featured-case-card-content p {
  margin: 0;
  color: #8ba2bc;
  font-size: 13px;
  line-height: 1.75;
}

.featured-case-bottom {
  position: absolute;
  z-index: 2;
  right: 34px;
  bottom: 30px;
  left: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.featured-case-bottom span {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  color: #7794b3;
  background: rgba(255, 255, 255, 0.035);
  font-size: 8px;
}

.featured-case-content .eyebrow {
  display: block;
  margin-bottom: 15px;
  color: var(--case-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.featured-case-content h2 {
  margin: 0;
  color: var(--case-navy);
  font-family: "Manrope", sans-serif;
  font-size: clamp(32px, 4vw, 51px);
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.featured-case-content h2 span {
  color: var(--case-blue);
}

.featured-case-content > p {
  margin: 22px 0 0;
  color: #657589;
  font-size: 15px;
  line-height: 1.8;
}

.featured-case-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 30px 0;
}

.featured-case-points > div {
  padding: 17px 14px;
  border: 1px solid var(--case-border);
  border-radius: 14px;
  background: #fff;
}

.featured-case-points span {
  display: block;
  margin-bottom: 10px;
  color: var(--case-blue);
  font-size: 9px;
  font-weight: 800;
}

.featured-case-points strong {
  display: block;
  margin-bottom: 4px;
  color: var(--case-navy);
  font-size: 12px;
}

.featured-case-points small {
  display: block;
  color: #7a899b;
  font-size: 9px;
  line-height: 1.55;
}

/* =========================================================
   SECTION HEADING
   ========================================================= */

.case-study-list {
  background: #fff;
}

.section-heading {
  max-width: 800px;
  margin: 0 auto 55px;
  text-align: center;
}

.section-heading .eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--case-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.section-heading h2 {
  margin: 0;
  color: var(--case-navy);
  font-family: "Manrope", sans-serif;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.section-heading h2 span {
  color: var(--case-blue);
}

.section-heading p {
  max-width: 700px;
  margin: 20px auto 0;
  color: #66778c;
  font-size: 15px;
  line-height: 1.8;
}

/* =========================================================
   CASE STUDY CARDS
   ========================================================= */

.case-study-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.case-study-card {
  overflow: hidden;
  border: 1px solid var(--case-border);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(8, 26, 51, 0.035);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.case-study-card:hover {
  transform: translateY(-8px);
  border-color: #cdd9e8;
  box-shadow: 0 22px 45px rgba(8, 26, 51, 0.09);
}

.case-study-card-visual {
  position: relative;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.case-study-card-visual::before,
.case-study-card-visual::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
}

.case-study-card-visual::before {
  width: 220px;
  height: 220px;
}

.case-study-card-visual::after {
  width: 145px;
  height: 145px;
}

.case-study-card-visual.blue {
  background:
    radial-gradient(
      circle at center,
      rgba(73, 153, 255, 0.35),
      transparent 50%
    ),
    linear-gradient(135deg, #0f63c9, #104582);
}

.case-study-card-visual.purple {
  background:
    radial-gradient(
      circle at center,
      rgba(180, 143, 255, 0.32),
      transparent 50%
    ),
    linear-gradient(135deg, #6b4ad2, #3d2b83);
}

.case-study-card-visual.green {
  background:
    radial-gradient(
      circle at center,
      rgba(92, 220, 167, 0.28),
      transparent 50%
    ),
    linear-gradient(135deg, #11885f, #07543f);
}

.case-study-card-visual.orange {
  background:
    radial-gradient(
      circle at center,
      rgba(255, 188, 104, 0.3),
      transparent 50%
    ),
    linear-gradient(135deg, #d87520, #8c4717);
}

.case-study-card-visual.cyan {
  background:
    radial-gradient(circle at center, rgba(91, 222, 239, 0.3), transparent 50%),
    linear-gradient(135deg, #148ca2, #075361);
}

.case-study-card-visual.dark {
  background:
    radial-gradient(
      circle at center,
      rgba(111, 153, 208, 0.24),
      transparent 50%
    ),
    linear-gradient(135deg, #1d3555, #0a192d);
}

.case-study-number {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 3;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.case-study-visual-icon {
  position: relative;
  z-index: 2;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px);
  font-size: 28px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.13);
}

.case-study-visual-label {
  position: absolute;
  right: 20px;
  bottom: 18px;
  z-index: 3;
  color: rgba(255, 255, 255, 0.68);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.case-study-card-content {
  padding: 25px;
}

.case-study-category {
  margin-bottom: 10px;
  color: var(--case-blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.case-study-card-content h3 {
  min-height: 67px;
  margin: 0;
  color: var(--case-navy);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.case-study-card-content p {
  margin: 14px 0 0;
  color: #6c7b8d;
  font-size: 13px;
  line-height: 1.75;
}

.case-study-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 19px;
}

.case-study-tags span {
  padding: 6px 9px;
  border-radius: 50px;
  color: #66778a;
  background: #f1f5f9;
  font-size: 8px;
  font-weight: 700;
}

.case-study-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 23px;
  color: var(--case-blue);
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.case-study-link span {
  transition: transform 0.25s ease;
}

.case-study-link:hover span {
  transform: translateX(4px);
}

/* =========================================================
   FRAMEWORK
   ========================================================= */

.case-framework {
  overflow: hidden;
  background: #f6f9fd;
}

.case-framework-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: 100px;
  align-items: center;
}

.case-framework-visual {
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: 1;
  margin: auto;
}

.framework-orbit {
  position: absolute;
  border: 1px solid #d9e4f0;
  border-radius: 50%;
  inset: 14%;
}

.framework-orbit-one {
  transform: rotate(18deg) scaleX(1.05);
}

.framework-orbit-two {
  inset: 27%;
  border-color: #dce6f1;
}

.framework-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border: 8px solid #eef4fa;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff, #edf4fc);
  box-shadow: 0 18px 45px rgba(8, 26, 51, 0.1);
}

.framework-center span {
  color: var(--case-blue);
  font-family: "Manrope", sans-serif;
  font-size: 27px;
  font-weight: 800;
}

.framework-center strong {
  margin-top: 2px;
  color: var(--case-navy);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.framework-center small {
  margin-top: 5px;
  color: #8090a2;
  font-size: 8px;
}

.framework-node {
  position: absolute;
  z-index: 5;
  min-width: 110px;
  padding: 13px 14px;
  border: 1px solid #e0e8f1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(8, 26, 51, 0.07);
}

.framework-node span {
  display: block;
  margin-bottom: 4px;
  color: var(--case-blue);
  font-size: 8px;
  font-weight: 800;
}

.framework-node strong {
  display: block;
  color: var(--case-navy);
  font-size: 11px;
}

.framework-node-one {
  top: 9%;
  left: 8%;
}

.framework-node-two {
  top: 9%;
  right: 7%;
}

.framework-node-three {
  right: 2%;
  bottom: 15%;
}

.framework-node-four {
  bottom: 12%;
  left: 4%;
}

.case-framework-content .eyebrow {
  display: block;
  margin-bottom: 15px;
  color: var(--case-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.case-framework-content h2 {
  margin: 0;
  color: var(--case-navy);
  font-family: "Manrope", sans-serif;
  font-size: clamp(33px, 4vw, 53px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.case-framework-content h2 span {
  color: var(--case-blue);
}

.case-framework-content > p {
  max-width: 620px;
  margin: 21px 0 0;
  color: #68798c;
  font-size: 15px;
  line-height: 1.8;
}

.case-framework-list {
  margin-top: 28px;
}

.case-framework-item {
  display: flex;
  gap: 15px;
  padding: 17px 0;
  border-bottom: 1px solid #e0e7ef;
}

.case-framework-item > span {
  width: 31px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 9px;
  color: var(--case-blue);
  background: #eaf2fc;
  font-size: 8px;
  font-weight: 800;
}

.case-framework-item h3 {
  margin: 0 0 4px;
  color: var(--case-navy);
  font-size: 13px;
}

.case-framework-item p {
  margin: 0;
  color: #758496;
  font-size: 11px;
  line-height: 1.65;
}

/* =========================================================
   BENEFITS
   ========================================================= */

.case-benefits {
  background: #fff;
}

.case-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.case-benefit-card {
  display: flex;
  gap: 15px;
  padding: 25px 20px;
  border: 1px solid var(--case-border);
  border-radius: 17px;
  background: #fff;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.case-benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 35px rgba(8, 26, 51, 0.07);
}

.case-benefit-card > span {
  width: 29px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 8px;
  color: var(--case-blue);
  background: #edf4fc;
  font-size: 8px;
  font-weight: 800;
}

.case-benefit-card h3 {
  margin: 0 0 8px;
  color: var(--case-navy);
  font-family: "Manrope", sans-serif;
  font-size: 15px;
}

.case-benefit-card p {
  margin: 0;
  color: #738295;
  font-size: 11px;
  line-height: 1.7;
}

/* =========================================================
   CUSTOMER JOURNEY
   ========================================================= */

.case-journey {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  color: #fff;
  background:
    radial-gradient(
      circle at 80% 30%,
      rgba(35, 110, 225, 0.18),
      transparent 30%
    ),
    #081a33;
}

.case-journey-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 90px;
  align-items: start;
}

.case-journey-content .eyebrow {
  display: block;
  margin-bottom: 15px;
  color: #5aa3ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.case-journey-content h2 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(33px, 4vw, 53px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.case-journey-content h2 span {
  display: block;
  color: #54a1ff;
}

.case-journey-content p {
  max-width: 540px;
  margin: 22px 0 0;
  color: #8da3be;
  font-size: 15px;
  line-height: 1.85;
}

.case-journey-steps {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.case-journey-step {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 20px;
  padding: 23px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.case-journey-step > span {
  color: #4d9aff;
  font-size: 10px;
  font-weight: 800;
}

.case-journey-step h3 {
  margin: 0 0 6px;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
}

.case-journey-step p {
  margin: 0;
  color: #8299b5;
  font-size: 11px;
  line-height: 1.7;
}

/* =========================================================
   CTA
   ========================================================= */

.resource-cta {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  color: #fff;
  background:
    radial-gradient(
      circle at 80% 30%,
      rgba(65, 143, 255, 0.23),
      transparent 30%
    ),
    linear-gradient(135deg, #0b3769, #061b36);
}

.resource-cta-grid {
  position: absolute;
  inset: 0;
  opacity: 0.23;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(
    to right,
    transparent,
    black 30%,
    black 70%,
    transparent
  );
}

.resource-cta-content {
  position: relative;
  z-index: 2;
  max-width: 850px;
  margin: auto;
  text-align: center;
}

.resource-cta-mark {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-family: "Manrope", sans-serif;
  font-size: 22px;
  font-weight: 800;
}

.resource-cta-content .eyebrow {
  display: block;
  margin-bottom: 15px;
  color: #67aaff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.resource-cta-content h2 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(35px, 4.5vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.resource-cta-content h2 span {
  display: block;
  color: #5aa4ff;
}

.resource-cta-content > p {
  max-width: 720px;
  margin: 22px auto 0;
  color: #91a9c4;
  font-size: 15px;
  line-height: 1.8;
}

.resource-cta-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
  margin-top: 34px;
}

.resource-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #dcecff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.resource-cta-link span {
  transition: transform 0.25s ease;
}

.resource-cta-link:hover span {
  transform: translateX(4px);
}

/* =========================================================
   BUTTON FALLBACKS
   ========================================================= */

.case-studies-page .btn {
  text-decoration: none;
}

.case-studies-page .btn-large {
  min-height: 54px;
  padding: 0 23px;
}

.case-studies-page .btn-primary {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.case-studies-page .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(23, 105, 224, 0.18);
}

.case-studies-page .btn-light {
  color: #0b3769;
  background: #fff;
}

.case-studies-page .btn-light:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */

.case-studies-page .reveal {
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}

.case-studies-page .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
  .resource-hero-container {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(420px, 0.9fr);
    gap: 45px;
  }

  .featured-case-grid,
  .case-framework-grid {
    gap: 55px;
  }

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

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

@media (max-width: 991px) {
  .resource-hero {
    padding: 125px 0 80px;
  }

  .resource-hero-container {
    grid-template-columns: 1fr;
  }

  .resource-hero-content {
    max-width: 800px;
    margin: auto;
    text-align: center;
  }

  .resource-label {
    justify-content: center;
  }

  .resource-hero h1 span {
    display: inline;
  }

  .resource-hero-content > p {
    margin-right: auto;
    margin-left: auto;
  }

  .resource-hero-actions {
    justify-content: center;
  }

  .resource-hero-meta {
    justify-content: center;
  }

  .resource-hero-visual {
    width: min(100%, 700px);
    margin: 15px auto 0;
  }

  .resource-intro-grid,
  .featured-case-grid,
  .case-framework-grid,
  .case-journey-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .resource-intro-content {
    padding-top: 0;
  }

  .featured-case-visual {
    max-width: 650px;
    margin: auto;
  }

  .case-framework-visual {
    max-width: 500px;
  }

  .case-framework-content {
    max-width: 700px;
  }

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

@media (max-width: 767px) {
  .resource-hero {
    padding: 110px 0 65px;
  }

  .resource-hero h1 {
    font-size: 42px;
  }

  .resource-hero-content > p {
    font-size: 14px;
    line-height: 1.75;
  }

  .resource-hero-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }

  .resource-hero-meta-item {
    min-width: 0;
    padding: 0 12px;
  }

  .resource-hero-meta-item strong {
    font-size: 11px;
  }

  .resource-hero-meta-item span {
    font-size: 9px;
    line-height: 1.5;
  }

  .case-dashboard-body {
    padding: 20px;
  }

  .case-dashboard-metrics {
    grid-template-columns: 1fr;
  }

  .case-dashboard-title h3 {
    font-size: 21px;
  }

  .case-dashboard-mark {
    width: 43px;
    height: 43px;
  }

  .resource-intro-heading h2,
  .featured-case-content h2,
  .case-framework-content h2,
  .case-journey-content h2 {
    font-size: 34px;
  }

  .featured-case-card {
    min-height: 490px;
    padding: 25px;
  }

  .featured-case-icon {
    margin-top: 70px;
  }

  .featured-case-card-content h3 {
    font-size: 26px;
  }

  .featured-case-bottom {
    right: 25px;
    bottom: 24px;
    left: 25px;
  }

  .featured-case-points {
    grid-template-columns: 1fr;
  }

  .case-study-grid {
    grid-template-columns: 1fr;
  }

  .case-study-card-content h3 {
    min-height: auto;
  }

  .case-framework-visual {
    width: 100%;
    max-width: 440px;
  }

  .framework-node {
    min-width: 90px;
    padding: 10px;
  }

  .framework-node strong {
    font-size: 10px;
  }

  .framework-center {
    width: 125px;
    height: 125px;
  }

  .case-benefits-grid {
    grid-template-columns: 1fr;
  }

  .case-journey {
    padding: 75px 0;
  }

  .resource-cta {
    padding: 80px 0;
  }

  .resource-cta-content h2 {
    font-size: 36px;
  }
}

@media (max-width: 520px) {
  .resource-hero h1 {
    font-size: 36px;
  }

  .resource-hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .resource-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .resource-hero-meta {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .resource-hero-meta-item {
    padding: 0 !important;
    border: 0;
  }

  .case-dashboard-header {
    padding: 15px;
  }

  .case-dashboard-status {
    display: none;
  }

  .case-dashboard-body {
    padding: 16px;
  }

  .case-dashboard-footer {
    padding: 11px 15px;
  }

  .featured-case-card {
    min-height: 530px;
  }

  .featured-case-icon {
    margin-top: 65px;
  }

  .featured-case-card-content h3 {
    font-size: 24px;
  }

  .case-framework-visual {
    transform: scale(0.9);
    transform-origin: center;
    margin: -20px auto;
  }

  .framework-node-one {
    left: 0;
  }

  .framework-node-two {
    right: 0;
  }

  .framework-node-three {
    right: -4%;
  }

  .framework-node-four {
    left: -4%;
  }

  .resource-cta-actions {
    flex-direction: column;
  }
}

/* =========================================================
   KAMAL GROUP OF CORPORATE
   FAQ PAGE STYLES
========================================================= */

/* =========================================================
   FAQ PAGE VARIABLES
========================================================= */

.faq-page {
  --faq-blue: #1769ff;
  --faq-blue-dark: #0d4fd8;
  --faq-purple: #7657e8;
  --faq-green: #16a875;
  --faq-orange: #f28a35;
  --faq-cyan: #19a8c9;

  --faq-navy: #081a33;
  --faq-navy-light: #10284a;

  --faq-text: #17233a;
  --faq-muted: #65738b;

  --faq-border: #e5eaf1;
  --faq-bg: #f7f9fc;
  --faq-white: #ffffff;

  --faq-radius: 18px;
  --faq-shadow: 0 20px 60px rgba(8, 26, 51, 0.08);
}

/* =========================================================
   FAQ HERO
========================================================= */

.faq-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(23, 105, 255, 0.14),
      transparent 30%
    ),
    linear-gradient(135deg, #f7faff 0%, #eef4ff 50%, #ffffff 100%);
}

/* =========================================================
   HERO GRID
========================================================= */

.faq-hero .resource-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;

  background-image:
    linear-gradient(rgba(23, 105, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 105, 255, 0.055) 1px, transparent 1px);

  background-size: 55px 55px;

  mask-image: linear-gradient(
    to right,
    black 0%,
    rgba(0, 0, 0, 0.8) 45%,
    transparent 90%
  );
}

/* =========================================================
   FAQ DASHBOARD
========================================================= */

.faq-dashboard {
  position: relative;
  width: min(100%, 570px);
  margin-left: auto;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.8);

  border-radius: 26px;

  background: linear-gradient(145deg, #0c2343, #081a33);

  box-shadow:
    0 35px 90px rgba(8, 26, 51, 0.24),
    0 10px 30px rgba(23, 105, 255, 0.08);

  transform: perspective(1200px) rotateY(-4deg);

  transition:
    transform 0.5s ease,
    box-shadow 0.5s ease;
}

.faq-dashboard:hover {
  transform: perspective(1200px) rotateY(0deg) translateY(-6px);

  box-shadow: 0 45px 100px rgba(8, 26, 51, 0.28);
}

/* =========================================================
   DASHBOARD HEADER
========================================================= */

.faq-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 18px 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(255, 255, 255, 0.025);
}

.faq-dashboard-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.faq-dashboard-logo {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border-radius: 11px;

  color: #ffffff;

  font-family: "Manrope", sans-serif;
  font-size: 17px;
  font-weight: 800;

  background: linear-gradient(135deg, #3c8aff, #1769ff);

  box-shadow: 0 8px 20px rgba(23, 105, 255, 0.35);
}

.faq-dashboard-brand div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.faq-dashboard-brand small {
  color: rgba(255, 255, 255, 0.5);

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.12em;
}

.faq-dashboard-brand strong {
  color: #ffffff;

  font-family: "Manrope", sans-serif;

  font-size: 13px;
  font-weight: 700;
}

.faq-dashboard-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 7px 10px;

  border: 1px solid rgba(52, 211, 153, 0.2);

  border-radius: 999px;

  color: #7ee9bc;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.1em;

  background: rgba(22, 168, 117, 0.08);
}

.faq-dashboard-status span {
  color: #36d99a;

  font-size: 8px;

  animation: faqPulse 2s infinite;
}

/* =========================================================
   DASHBOARD BODY
========================================================= */

.faq-dashboard-body {
  padding: 28px;
}

.faq-dashboard-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 22px;
}

.faq-dashboard-title small {
  display: block;

  margin-bottom: 6px;

  color: rgba(255, 255, 255, 0.45);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.14em;
}

.faq-dashboard-title h3 {
  margin: 0;

  color: #ffffff;

  font-family: "Manrope", sans-serif;

  font-size: clamp(24px, 3vw, 34px);

  line-height: 1.08;
}

.faq-dashboard-title h3 span {
  color: #66a3ff;
}

.faq-dashboard-mark {
  display: grid;
  place-items: center;

  width: 58px;
  height: 58px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 16px;

  color: #6ca6ff;

  font-family: "Manrope", sans-serif;

  font-size: 25px;
  font-weight: 800;

  background: rgba(23, 105, 255, 0.1);
}

/* =========================================================
   QUESTION PREVIEWS
========================================================= */

.faq-question-preview {
  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 12px;

  padding: 13px 14px;

  margin-top: 9px;

  border: 1px solid rgba(255, 255, 255, 0.07);

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.035);

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.faq-question-preview:hover {
  transform: translateX(4px);

  border-color: rgba(102, 163, 255, 0.25);

  background: rgba(255, 255, 255, 0.06);
}

.faq-preview-icon {
  display: grid;
  place-items: center;

  width: 35px;
  height: 35px;

  border-radius: 10px;

  font-weight: 800;

  font-size: 13px;
}

.faq-preview-icon.blue {
  color: #69a5ff;
  background: rgba(23, 105, 255, 0.12);
}

.faq-preview-icon.purple {
  color: #a38cff;
  background: rgba(118, 87, 232, 0.12);
}

.faq-preview-icon.green {
  color: #53dfaa;
  background: rgba(22, 168, 117, 0.12);
}

.faq-question-preview div:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.faq-question-preview strong {
  color: rgba(255, 255, 255, 0.92);

  font-size: 11px;
  font-weight: 700;
}

.faq-question-preview small {
  color: rgba(255, 255, 255, 0.42);

  font-size: 9px;

  line-height: 1.45;
}

.faq-question-preview > span:last-child {
  color: rgba(255, 255, 255, 0.35);

  font-size: 18px;
}

/* =========================================================
   DASHBOARD NOTE
========================================================= */

.faq-dashboard-note {
  display: flex;
  align-items: flex-start;

  gap: 11px;

  margin-top: 18px;

  padding: 14px;

  border: 1px solid rgba(23, 105, 255, 0.16);

  border-radius: 14px;

  background: linear-gradient(
    135deg,
    rgba(23, 105, 255, 0.11),
    rgba(23, 105, 255, 0.035)
  );
}

.faq-note-icon {
  color: #66a3ff;

  font-size: 16px;

  line-height: 1;
}

.faq-dashboard-note div {
  display: flex;
  flex-direction: column;

  gap: 4px;
}

.faq-dashboard-note strong {
  color: #ffffff;

  font-size: 11px;
}

.faq-dashboard-note small {
  color: rgba(255, 255, 255, 0.46);

  font-size: 9px;

  line-height: 1.5;
}

/* =========================================================
   DASHBOARD FOOTER
========================================================= */

.faq-dashboard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.07);

  color: rgba(255, 255, 255, 0.35);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.13em;
}

/* =========================================================
   FAQ CATEGORY SECTION
========================================================= */

.faq-category-section {
  position: relative;

  padding: 30px 0 20px;

  background: #ffffff;
}

.faq-category-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 15px;
}

.faq-category-card {
  position: relative;

  display: grid;

  grid-template-columns:
    auto
    auto
    1fr;

  align-items: center;

  gap: 12px;

  min-height: 104px;

  padding: 18px;

  border: 1px solid var(--faq-border);

  border-radius: 16px;

  color: var(--faq-text);

  background: #ffffff;

  text-decoration: none;

  overflow: hidden;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.faq-category-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 3px;

  background: var(--faq-blue);

  transform: scaleY(0);

  transform-origin: bottom;

  transition: transform 0.3s ease;
}

.faq-category-card:hover,
.faq-category-card.active {
  transform: translateY(-4px);

  border-color: rgba(23, 105, 255, 0.2);

  box-shadow: 0 18px 40px rgba(8, 26, 51, 0.08);
}

.faq-category-card.active::before,
.faq-category-card:hover::before {
  transform: scaleY(1);
}

.faq-category-number {
  position: absolute;

  top: 10px;
  right: 14px;

  color: #dce4ef;

  font-size: 9px;
  font-weight: 800;
}

.faq-category-icon {
  display: grid;
  place-items: center;

  width: 43px;
  height: 43px;

  border-radius: 12px;

  font-size: 15px;
  font-weight: 800;
}

.faq-category-icon.blue {
  color: var(--faq-blue);
  background: rgba(23, 105, 255, 0.08);
}

.faq-category-icon.purple {
  color: var(--faq-purple);
  background: rgba(118, 87, 232, 0.08);
}

.faq-category-icon.green {
  color: var(--faq-green);
  background: rgba(22, 168, 117, 0.08);
}

.faq-category-icon.orange {
  color: var(--faq-orange);
  background: rgba(242, 138, 53, 0.08);
}

.faq-category-card div:last-child {
  display: flex;
  flex-direction: column;

  gap: 4px;
}

.faq-category-card strong {
  font-family: "Manrope", sans-serif;

  font-size: 14px;
  font-weight: 800;
}

.faq-category-card small {
  color: var(--faq-muted);

  font-size: 10px;
}

/* =========================================================
   FAQ LIST SECTION
========================================================= */

.faq-list-section {
  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
}

.faq-group {
  max-width: 1040px;

  margin: 0 auto;

  padding: 80px 0;

  scroll-margin-top: 110px;
}

.faq-group + .faq-group {
  border-top: 1px solid var(--faq-border);
}

.faq-group-heading {
  max-width: 680px;

  margin-bottom: 34px;
}

.faq-group-heading h2 {
  margin: 10px 0 12px;

  font-family: "Manrope", sans-serif;

  font-size: clamp(30px, 4vw, 48px);

  line-height: 1.08;

  color: var(--faq-navy);
}

.faq-group-heading h2 span {
  color: var(--faq-blue);
}

.faq-group-heading p {
  max-width: 620px;

  margin: 0;

  color: var(--faq-muted);

  font-size: 15px;

  line-height: 1.75;
}

/* =========================================================
   FAQ ACCORDION
========================================================= */

.faq-accordion {
  display: flex;

  flex-direction: column;

  gap: 12px;
}

.faq-item {
  overflow: hidden;

  border: 1px solid var(--faq-border);

  border-radius: 16px;

  background: #ffffff;

  box-shadow: 0 5px 20px rgba(8, 26, 51, 0.025);

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.faq-item:hover,
.faq-item.open {
  border-color: rgba(23, 105, 255, 0.22);

  box-shadow: 0 14px 35px rgba(8, 26, 51, 0.07);
}

/* =========================================================
   FAQ QUESTION
========================================================= */

.faq-question {
  position: relative;

  display: grid;

  grid-template-columns:
    48px
    1fr
    42px;

  align-items: center;

  width: 100%;

  min-height: 78px;

  padding: 12px 20px;

  border: 0;

  color: var(--faq-text);

  text-align: left;

  background: transparent;

  cursor: pointer;
}

.faq-question:focus-visible {
  outline: 3px solid rgba(23, 105, 255, 0.25);

  outline-offset: -3px;
}

.faq-question-number {
  color: var(--faq-blue);

  font-family: "Manrope", sans-serif;

  font-size: 11px;
  font-weight: 800;
}

.faq-question-text {
  padding-right: 15px;

  font-family: "Manrope", sans-serif;

  font-size: 16px;
  font-weight: 800;

  line-height: 1.45;
}

.faq-toggle {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  border: 1px solid var(--faq-border);

  border-radius: 50%;

  color: var(--faq-blue);

  font-size: 20px;
  font-weight: 400;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}

.faq-item.open .faq-toggle {
  transform: rotate(45deg);

  color: #ffffff;

  border-color: var(--faq-blue);

  background: var(--faq-blue);
}

/* =========================================================
   FAQ ANSWER
========================================================= */

.faq-answer {
  max-height: 0;

  overflow: hidden;

  transition: max-height 0.4s ease;
}

.faq-answer-inner {
  padding: 0 76px 25px 68px;
}

.faq-answer-inner p {
  max-width: 790px;

  margin: 0;

  color: var(--faq-muted);

  font-size: 14px;

  line-height: 1.8;
}

.faq-answer-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 18px;

  color: var(--faq-blue);

  font-size: 12px;
  font-weight: 800;

  text-decoration: none;

  transition: gap 0.25s ease;
}

.faq-answer-link:hover {
  gap: 12px;
}

/* =========================================================
   FAQ RESOURCE SECTION
========================================================= */

.faq-resources {
  background: #ffffff;
}

.faq-resource-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;

  margin-top: 45px;
}

.faq-resource-card {
  position: relative;

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 16px;

  min-height: 190px;

  padding: 25px;

  border: 1px solid var(--faq-border);

  border-radius: 18px;

  color: var(--faq-text);

  text-decoration: none;

  background: #ffffff;

  box-shadow: 0 8px 30px rgba(8, 26, 51, 0.035);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.faq-resource-card:hover {
  transform: translateY(-6px);

  border-color: rgba(23, 105, 255, 0.18);

  box-shadow: 0 20px 45px rgba(8, 26, 51, 0.08);
}

.faq-resource-icon {
  display: grid;
  place-items: center;

  width: 48px;
  height: 48px;

  border-radius: 14px;

  font-size: 18px;
  font-weight: 800;
}

.faq-resource-icon.blue {
  color: var(--faq-blue);
  background: rgba(23, 105, 255, 0.08);
}

.faq-resource-icon.purple {
  color: var(--faq-purple);
  background: rgba(118, 87, 232, 0.08);
}

.faq-resource-icon.green {
  color: var(--faq-green);
  background: rgba(22, 168, 117, 0.08);
}

.faq-resource-card div {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 5px;
}

.faq-resource-card div > span {
  color: var(--faq-blue);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.13em;
}

.faq-resource-card h3 {
  margin: 0;

  font-family: "Manrope", sans-serif;

  font-size: 17px;
  line-height: 1.25;
}

.faq-resource-card p {
  margin: 2px 0 0;

  color: var(--faq-muted);

  font-size: 11px;

  line-height: 1.55;
}

.faq-resource-card > strong {
  color: var(--faq-blue);

  font-size: 20px;

  transition: transform 0.25s ease;
}

.faq-resource-card:hover > strong {
  transform: translateX(4px);
}

/* =========================================================
   FAQ CTA
========================================================= */

.faq-cta {
  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 15% 30%,
      rgba(23, 105, 255, 0.22),
      transparent 30%
    ),
    linear-gradient(135deg, #071a34, #0b2850);
}

.faq-cta .resource-cta-grid {
  opacity: 0.45;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);

  background-size: 55px 55px;
}

.faq-cta .resource-cta-content {
  position: relative;

  max-width: 850px;
}

.faq-cta .resource-cta-mark {
  display: grid;
  place-items: center;

  width: 58px;
  height: 58px;

  margin-bottom: 24px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 16px;

  color: #ffffff;

  font-family: "Manrope", sans-serif;

  font-size: 25px;
  font-weight: 800;

  background: rgba(255, 255, 255, 0.06);
}

/* =========================================================
   REVEAL ANIMATION FALLBACK
========================================================= */

.faq-page .reveal {
  opacity: 0;

  transform: translateY(22px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.faq-page .reveal.revealed {
  opacity: 1;

  transform: translateY(0);
}

/* =========================================================
   PULSE
========================================================= */

@keyframes faqPulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .faq-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .faq-dashboard {
    transform: none;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {
  .faq-dashboard {
    width: 100%;

    margin-top: 25px;

    border-radius: 20px;
  }

  .faq-dashboard-body {
    padding: 20px;
  }

  .faq-dashboard-title h3 {
    font-size: 25px;
  }

  .faq-dashboard-mark {
    width: 48px;
    height: 48px;

    border-radius: 13px;
  }

  .faq-category-section {
    padding-top: 20px;
  }

  .faq-category-grid {
    grid-template-columns: 1fr 1fr;

    gap: 10px;
  }

  .faq-category-card {
    grid-template-columns: auto 1fr;

    min-height: 90px;

    padding: 14px;
  }

  .faq-category-icon {
    width: 38px;
    height: 38px;
  }

  .faq-category-card div:last-child {
    grid-column: 2;
  }

  .faq-category-card strong {
    font-size: 12px;
  }

  .faq-category-card small {
    font-size: 9px;
  }

  .faq-group {
    padding: 55px 0;
  }

  .faq-group-heading {
    margin-bottom: 25px;
  }

  .faq-group-heading h2 {
    font-size: 32px;
  }

  .faq-question {
    grid-template-columns:
      34px
      1fr
      36px;

    min-height: 70px;

    padding: 10px 14px;
  }

  .faq-question-number {
    font-size: 9px;
  }

  .faq-question-text {
    font-size: 13px;
  }

  .faq-toggle {
    width: 30px;
    height: 30px;

    font-size: 17px;
  }

  .faq-answer-inner {
    padding: 0 18px 22px 48px;
  }

  .faq-answer-inner p {
    font-size: 13px;
  }

  .faq-resource-grid {
    grid-template-columns: 1fr;

    margin-top: 30px;
  }

  .faq-resource-card {
    min-height: 160px;

    padding: 20px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

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

  .faq-category-card {
    grid-template-columns:
      auto
      auto
      1fr;

    min-height: 78px;
  }

  .faq-category-card div:last-child {
    grid-column: auto;
  }

  .faq-question {
    grid-template-columns:
      28px
      1fr
      32px;
  }

  .faq-question-text {
    font-size: 12px;
  }

  .faq-answer-inner {
    padding-left: 28px;
  }

  .faq-dashboard-header {
    padding: 14px;
  }

  .faq-dashboard-brand small {
    font-size: 7px;
  }

  .faq-dashboard-brand strong {
    font-size: 11px;
  }

  .faq-dashboard-status {
    padding: 6px 8px;

    font-size: 7px;
  }

  .faq-question-preview {
    grid-template-columns:
      auto
      1fr
      auto;

    padding: 11px;
  }

  .faq-preview-icon {
    width: 31px;
    height: 31px;
  }

  .faq-question-preview strong {
    font-size: 10px;
  }

  .faq-question-preview small {
    font-size: 8px;
  }

  .faq-dashboard-footer {
    font-size: 7px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .faq-page .reveal {
    opacity: 1;

    transform: none;

    transition: none;
  }

  .faq-dashboard,
  .faq-category-card,
  .faq-resource-card,
  .faq-question-preview,
  .faq-toggle,
  .faq-answer,
  .faq-answer-link {
    transition: none;
  }

  .faq-dashboard-status span {
    animation: none;
  }
}

/* =========================================================
   KAMAL GROUP OF CORPORATE
   RESOURCES PAGE STYLES
========================================================= */

/* =========================================================
   RESOURCES PAGE VARIABLES
========================================================= */

.resources-page {
  --resources-blue: #1769ff;
  --resources-blue-dark: #0d4fd8;
  --resources-purple: #7657e8;
  --resources-green: #16a875;
  --resources-orange: #f28a35;
  --resources-cyan: #19a8c9;

  --resources-navy: #081a33;
  --resources-navy-light: #10284a;

  --resources-text: #17233a;
  --resources-muted: #65738b;

  --resources-border: #e5eaf1;
  --resources-bg: #f7f9fc;
  --resources-white: #ffffff;

  --resources-radius: 18px;

  --resources-shadow: 0 20px 60px rgba(8, 26, 51, 0.08);
}

/* =========================================================
   RESOURCES HERO
========================================================= */

.resources-hero {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(23, 105, 255, 0.14),
      transparent 30%
    ),
    linear-gradient(135deg, #f7faff 0%, #eef4ff 50%, #ffffff 100%);
}

/* =========================================================
   HERO GRID
========================================================= */

.resources-hero .resource-hero-grid {
  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.5;

  background-image:
    linear-gradient(rgba(23, 105, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 105, 255, 0.055) 1px, transparent 1px);

  background-size: 55px 55px;

  mask-image: linear-gradient(
    to right,
    black 0%,
    rgba(0, 0, 0, 0.8) 45%,
    transparent 90%
  );
}

/* =========================================================
   RESOURCES DASHBOARD
========================================================= */

.resources-dashboard {
  position: relative;

  width: min(100%, 570px);

  margin-left: auto;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.8);

  border-radius: 26px;

  background: linear-gradient(145deg, #0c2343, #081a33);

  box-shadow:
    0 35px 90px rgba(8, 26, 51, 0.24),
    0 10px 30px rgba(23, 105, 255, 0.08);

  transform: perspective(1200px) rotateY(-4deg);

  transition:
    transform 0.5s ease,
    box-shadow 0.5s ease;
}

.resources-dashboard:hover {
  transform: perspective(1200px) rotateY(0deg) translateY(-6px);

  box-shadow: 0 45px 100px rgba(8, 26, 51, 0.28);
}

/* =========================================================
   DASHBOARD HEADER
========================================================= */

.resources-dashboard-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 18px 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(255, 255, 255, 0.025);
}

.resources-dashboard-brand {
  display: flex;

  align-items: center;

  gap: 12px;
}

.resources-dashboard-logo {
  display: grid;

  place-items: center;

  width: 38px;
  height: 38px;

  border-radius: 11px;

  color: #ffffff;

  font-family: "Manrope", sans-serif;

  font-size: 17px;
  font-weight: 800;

  background: linear-gradient(135deg, #3c8aff, #1769ff);

  box-shadow: 0 8px 20px rgba(23, 105, 255, 0.35);
}

.resources-dashboard-brand div {
  display: flex;

  flex-direction: column;

  gap: 2px;
}

.resources-dashboard-brand small {
  color: rgba(255, 255, 255, 0.5);

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.12em;
}

.resources-dashboard-brand strong {
  color: #ffffff;

  font-family: "Manrope", sans-serif;

  font-size: 13px;
  font-weight: 700;
}

.resources-dashboard-status {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 7px 10px;

  border: 1px solid rgba(52, 211, 153, 0.2);

  border-radius: 999px;

  color: #7ee9bc;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.1em;

  background: rgba(22, 168, 117, 0.08);
}

.resources-dashboard-status span {
  color: #36d99a;

  font-size: 8px;

  animation: resourcesPulse 2s infinite;
}

/* =========================================================
   DASHBOARD BODY
========================================================= */

.resources-dashboard-body {
  padding: 28px;
}

.resources-dashboard-title {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 22px;
}

.resources-dashboard-title small {
  display: block;

  margin-bottom: 6px;

  color: rgba(255, 255, 255, 0.45);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.14em;
}

.resources-dashboard-title h3 {
  margin: 0;

  color: #ffffff;

  font-family: "Manrope", sans-serif;

  font-size: clamp(24px, 3vw, 34px);

  line-height: 1.08;
}

.resources-dashboard-title h3 span {
  color: #66a3ff;
}

.resources-dashboard-mark {
  display: grid;

  place-items: center;

  width: 58px;
  height: 58px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 16px;

  color: #6ca6ff;

  font-family: "Manrope", sans-serif;

  font-size: 22px;
  font-weight: 800;

  background: rgba(23, 105, 255, 0.1);
}

/* =========================================================
   RESOURCE PREVIEW CARDS
========================================================= */

.resource-preview-card {
  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 12px;

  padding: 13px 14px;

  margin-top: 9px;

  border: 1px solid rgba(255, 255, 255, 0.07);

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.035);

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.resource-preview-card:hover {
  transform: translateX(4px);

  border-color: rgba(102, 163, 255, 0.25);

  background: rgba(255, 255, 255, 0.06);
}

.resource-preview-icon {
  display: grid;

  place-items: center;

  width: 35px;
  height: 35px;

  border-radius: 10px;

  font-size: 13px;
  font-weight: 800;
}

.resource-preview-icon.blue {
  color: #69a5ff;

  background: rgba(23, 105, 255, 0.12);
}

.resource-preview-icon.purple {
  color: #a38cff;

  background: rgba(118, 87, 232, 0.12);
}

.resource-preview-icon.green {
  color: #53dfaa;

  background: rgba(22, 168, 117, 0.12);
}

.resource-preview-card > div:nth-child(2) {
  display: flex;

  flex-direction: column;

  gap: 3px;
}

.resource-preview-card strong {
  color: rgba(255, 255, 255, 0.92);

  font-size: 11px;
  font-weight: 700;
}

.resource-preview-card small {
  color: rgba(255, 255, 255, 0.42);

  font-size: 9px;

  line-height: 1.45;
}

.resource-preview-card > span:last-child {
  color: rgba(255, 255, 255, 0.35);

  font-size: 17px;

  transition: transform 0.25s ease;
}

.resource-preview-card:hover > span:last-child {
  transform: translateX(4px);

  color: #69a5ff;
}

/* =========================================================
   DASHBOARD NOTE
========================================================= */

.resources-dashboard-note {
  display: flex;

  align-items: flex-start;

  gap: 11px;

  margin-top: 18px;

  padding: 14px;

  border: 1px solid rgba(23, 105, 255, 0.16);

  border-radius: 14px;

  background: linear-gradient(
    135deg,
    rgba(23, 105, 255, 0.11),
    rgba(23, 105, 255, 0.035)
  );
}

.resources-note-icon {
  display: grid;

  place-items: center;

  width: 20px;
  height: 20px;

  color: #66a3ff;

  font-size: 13px;
  font-weight: 800;

  line-height: 1;
}

.resources-dashboard-note div {
  display: flex;

  flex-direction: column;

  gap: 4px;
}

.resources-dashboard-note strong {
  color: #ffffff;

  font-size: 11px;
}

.resources-dashboard-note small {
  color: rgba(255, 255, 255, 0.46);

  font-size: 9px;

  line-height: 1.5;
}

/* =========================================================
   DASHBOARD FOOTER
========================================================= */

.resources-dashboard-footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.07);

  color: rgba(255, 255, 255, 0.35);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.13em;
}

/* =========================================================
   RESOURCE CATEGORY SECTION
========================================================= */

.resource-category-section {
  position: relative;

  padding: 30px 0 20px;

  background: #ffffff;
}

.resource-category-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 15px;
}

.resource-category-card {
  position: relative;

  display: grid;

  grid-template-columns:
    auto
    auto
    1fr;

  align-items: center;

  gap: 12px;

  min-height: 104px;

  padding: 18px;

  border: 1px solid var(--resources-border);

  border-radius: 16px;

  color: var(--resources-text);

  background: #ffffff;

  text-decoration: none;

  overflow: hidden;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.resource-category-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 3px;

  background: var(--resources-blue);

  transform: scaleY(0);

  transform-origin: bottom;

  transition: transform 0.3s ease;
}

.resource-category-card:hover,
.resource-category-card.active {
  transform: translateY(-4px);

  border-color: rgba(23, 105, 255, 0.2);

  box-shadow: 0 18px 40px rgba(8, 26, 51, 0.08);
}

.resource-category-card.active::before,
.resource-category-card:hover::before {
  transform: scaleY(1);
}

.resource-category-number {
  position: absolute;

  top: 10px;
  right: 14px;

  color: #dce4ef;

  font-size: 9px;
  font-weight: 800;
}

.resource-category-icon {
  display: grid;

  place-items: center;

  width: 43px;
  height: 43px;

  border-radius: 12px;

  font-size: 15px;
  font-weight: 800;
}

.resource-category-icon.blue {
  color: var(--resources-blue);

  background: rgba(23, 105, 255, 0.08);
}

.resource-category-icon.purple {
  color: var(--resources-purple);

  background: rgba(118, 87, 232, 0.08);
}

.resource-category-icon.green {
  color: var(--resources-green);

  background: rgba(22, 168, 117, 0.08);
}

.resource-category-icon.orange {
  color: var(--resources-orange);

  background: rgba(242, 138, 53, 0.08);
}

.resource-category-card div:last-child {
  display: flex;

  flex-direction: column;

  gap: 4px;
}

.resource-category-card strong {
  font-family: "Manrope", sans-serif;

  font-size: 14px;
  font-weight: 800;
}

.resource-category-card small {
  color: var(--resources-muted);

  font-size: 10px;
}

/* =========================================================
   FEATURED RESOURCE
========================================================= */

.featured-resource-section {
  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
}

.featured-resource-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  align-items: stretch;

  gap: 70px;

  max-width: 1120px;

  margin: 0 auto;
}

.featured-resource-visual {
  position: relative;

  min-height: 470px;

  overflow: hidden;

  border-radius: 26px;

  background: linear-gradient(145deg, #0c2343, #081a33);

  box-shadow: 0 30px 80px rgba(8, 26, 51, 0.16);
}

.featured-resource-pattern {
  position: absolute;

  inset: 0;

  opacity: 0.55;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);

  background-size: 50px 50px;
}

.featured-resource-visual::after {
  content: "";

  position: absolute;

  width: 320px;
  height: 320px;

  right: -100px;
  bottom: -120px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(23, 105, 255, 0.45),
    transparent 65%
  );
}

.featured-resource-mark {
  position: absolute;

  left: 50%;
  top: 50%;

  display: grid;

  place-items: center;

  width: 145px;
  height: 145px;

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 35px;

  color: #ffffff;

  font-family: "Manrope", sans-serif;

  font-size: 70px;
  font-weight: 800;

  background: linear-gradient(
    135deg,
    rgba(60, 138, 255, 0.22),
    rgba(23, 105, 255, 0.08)
  );

  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.2);

  transform: translate(-50%, -50%) rotate(-4deg);

  z-index: 2;
}

.featured-resource-badge {
  position: absolute;

  left: 28px;
  top: 28px;

  z-index: 3;

  padding: 8px 12px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 999px;

  color: rgba(255, 255, 255, 0.65);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.13em;

  background: rgba(255, 255, 255, 0.05);
}

.featured-resource-number {
  position: absolute;

  right: 28px;
  bottom: 22px;

  color: rgba(255, 255, 255, 0.08);

  font-family: "Manrope", sans-serif;

  font-size: 80px;
  font-weight: 800;

  line-height: 1;

  z-index: 2;
}

.featured-resource-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 25px 0;
}

.featured-resource-content h2 {
  max-width: 620px;

  margin: 12px 0 18px;

  color: var(--resources-navy);

  font-family: "Manrope", sans-serif;

  font-size: clamp(32px, 4vw, 48px);

  line-height: 1.08;
}

.featured-resource-content h2 span {
  color: var(--resources-blue);
}

.featured-resource-content > p {
  max-width: 610px;

  margin: 0;

  color: var(--resources-muted);

  font-size: 15px;

  line-height: 1.8;
}

.featured-resource-points {
  display: flex;

  flex-direction: column;

  gap: 17px;

  margin: 28px 0 32px;
}

.featured-resource-points > div {
  display: flex;

  align-items: flex-start;

  gap: 13px;
}

.featured-point-icon {
  display: grid;

  place-items: center;

  flex: 0 0 auto;

  width: 28px;
  height: 28px;

  border-radius: 9px;

  color: var(--resources-blue);

  font-size: 12px;
  font-weight: 800;

  background: rgba(23, 105, 255, 0.08);
}

.featured-resource-points div div {
  display: flex;

  flex-direction: column;

  gap: 3px;
}

.featured-resource-points strong {
  color: var(--resources-text);

  font-size: 13px;
  font-weight: 800;
}

.featured-resource-points small {
  color: var(--resources-muted);

  font-size: 11px;

  line-height: 1.55;
}

.featured-resource-content .btn {
  align-self: flex-start;
}

/* =========================================================
   RESOURCE LIBRARY
========================================================= */

.resource-library {
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
}

.resource-library .section-heading {
  max-width: 720px;

  margin-bottom: 60px;
}

.resource-library-group {
  scroll-margin-top: 110px;

  padding: 70px 0;
}

.resource-library-group + .resource-library-group {
  border-top: 1px solid var(--resources-border);
}

.resource-library-heading {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 30px;

  margin-bottom: 30px;
}

.resource-library-heading h3 {
  margin: 10px 0 0;

  color: var(--resources-navy);

  font-family: "Manrope", sans-serif;

  font-size: clamp(28px, 3.5vw, 40px);

  line-height: 1.1;
}

.resource-library-heading h3 span {
  color: var(--resources-blue);
}

.resource-view-all {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--resources-blue);

  font-size: 11px;
  font-weight: 800;

  text-decoration: none;

  white-space: nowrap;

  transition: gap 0.25s ease;
}

.resource-view-all:hover {
  gap: 12px;
}

/* =========================================================
   RESOURCE CARDS
========================================================= */

.resource-card-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;
}

.resource-card {
  position: relative;

  display: flex;

  flex-direction: column;

  min-height: 300px;

  padding: 25px;

  border: 1px solid var(--resources-border);

  border-radius: 18px;

  color: var(--resources-text);

  text-decoration: none;

  background: #ffffff;

  box-shadow: 0 8px 30px rgba(8, 26, 51, 0.035);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.resource-card:hover {
  transform: translateY(-7px);

  border-color: rgba(23, 105, 255, 0.18);

  box-shadow: 0 22px 48px rgba(8, 26, 51, 0.09);
}

.resource-card-featured {
  border-color: rgba(23, 105, 255, 0.15);

  background: linear-gradient(145deg, #ffffff, #f5f8ff);
}

.resource-card-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-bottom: 25px;
}

.resource-card-icon {
  display: grid;

  place-items: center;

  width: 48px;
  height: 48px;

  border-radius: 14px;

  font-size: 18px;
  font-weight: 800;
}

.resource-card-icon.blue {
  color: var(--resources-blue);

  background: rgba(23, 105, 255, 0.08);
}

.resource-card-icon.purple {
  color: var(--resources-purple);

  background: rgba(118, 87, 232, 0.08);
}

.resource-card-icon.green {
  color: var(--resources-green);

  background: rgba(22, 168, 117, 0.08);
}

.resource-card-type {
  color: var(--resources-blue);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.13em;
}

.resource-card-body {
  flex: 1;
}

.resource-card-body h4 {
  margin: 0 0 12px;

  color: var(--resources-text);

  font-family: "Manrope", sans-serif;

  font-size: 18px;

  line-height: 1.3;
}

.resource-card-body p {
  margin: 0;

  color: var(--resources-muted);

  font-size: 12px;

  line-height: 1.7;
}

.resource-card-footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  padding-top: 25px;

  margin-top: 25px;

  border-top: 1px solid var(--resources-border);

  color: var(--resources-blue);

  font-size: 10px;
  font-weight: 800;
}

.resource-card-footer strong {
  font-size: 19px;

  transition: transform 0.25s ease;
}

.resource-card:hover .resource-card-footer strong {
  transform: translateX(5px);
}

/* =========================================================
   RESOURCE FAQ CARD
========================================================= */

.resource-faq-card {
  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 25px;

  padding: 32px;

  border: 1px solid var(--resources-border);

  border-radius: 20px;

  background: linear-gradient(135deg, #ffffff, #f6f9ff);

  box-shadow: 0 10px 35px rgba(8, 26, 51, 0.04);
}

.resource-faq-icon {
  display: grid;

  place-items: center;

  width: 64px;
  height: 64px;

  border-radius: 18px;

  color: var(--resources-orange);

  font-family: "Manrope", sans-serif;

  font-size: 28px;
  font-weight: 800;

  background: rgba(242, 138, 53, 0.09);
}

.resource-faq-card > div:nth-child(2) {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 7px;
}

.resource-faq-card h4 {
  margin: 0;

  color: var(--resources-text);

  font-family: "Manrope", sans-serif;

  font-size: 22px;

  line-height: 1.25;
}

.resource-faq-card p {
  max-width: 650px;

  margin: 0;

  color: var(--resources-muted);

  font-size: 12px;

  line-height: 1.7;
}

.resource-faq-card .btn {
  white-space: nowrap;
}

/* =========================================================
   QUICK LINKS
========================================================= */

.resources-quick-links {
  background: #ffffff;
}

.resources-quick-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;

  margin-top: 45px;
}

.resources-quick-card {
  position: relative;

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 16px;

  min-height: 185px;

  padding: 25px;

  border: 1px solid var(--resources-border);

  border-radius: 18px;

  color: var(--resources-text);

  text-decoration: none;

  background: #ffffff;

  box-shadow: 0 8px 30px rgba(8, 26, 51, 0.035);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.resources-quick-card:hover {
  transform: translateY(-6px);

  border-color: rgba(23, 105, 255, 0.18);

  box-shadow: 0 20px 45px rgba(8, 26, 51, 0.08);
}

.resources-quick-icon {
  display: grid;

  place-items: center;

  width: 48px;
  height: 48px;

  border-radius: 14px;

  font-size: 18px;
  font-weight: 800;
}

.resources-quick-icon.blue {
  color: var(--resources-blue);

  background: rgba(23, 105, 255, 0.08);
}

.resources-quick-icon.purple {
  color: var(--resources-purple);

  background: rgba(118, 87, 232, 0.08);
}

.resources-quick-icon.green {
  color: var(--resources-green);

  background: rgba(22, 168, 117, 0.08);
}

.resources-quick-card div {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 5px;
}

.resources-quick-card div > span {
  color: var(--resources-blue);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.13em;
}

.resources-quick-card h3 {
  margin: 0;

  font-family: "Manrope", sans-serif;

  font-size: 17px;

  line-height: 1.25;
}

.resources-quick-card p {
  margin: 2px 0 0;

  color: var(--resources-muted);

  font-size: 11px;

  line-height: 1.55;
}

.resources-quick-card > strong {
  color: var(--resources-blue);

  font-size: 20px;

  transition: transform 0.25s ease;
}

.resources-quick-card:hover > strong {
  transform: translateX(4px);
}

/* =========================================================
   RESOURCES CTA
========================================================= */

.resources-cta {
  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 15% 30%,
      rgba(23, 105, 255, 0.22),
      transparent 30%
    ),
    linear-gradient(135deg, #071a34, #0b2850);
}

.resources-cta .resource-cta-grid {
  opacity: 0.45;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);

  background-size: 55px 55px;
}

.resources-cta .resource-cta-content {
  position: relative;

  max-width: 850px;
}

.resources-cta .resource-cta-mark {
  display: grid;

  place-items: center;

  width: 58px;
  height: 58px;

  margin-bottom: 24px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 16px;

  color: #ffffff;

  font-family: "Manrope", sans-serif;

  font-size: 25px;
  font-weight: 800;

  background: rgba(255, 255, 255, 0.06);
}

/* =========================================================
   REVEAL ANIMATION
========================================================= */

.resources-page .reveal {
  opacity: 0;

  transform: translateY(22px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.resources-page .reveal.revealed {
  opacity: 1;

  transform: translateY(0);
}

/* =========================================================
   PULSE
========================================================= */

@keyframes resourcesPulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .resource-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

  .featured-resource-grid {
    gap: 45px;
  }

  .resources-dashboard {
    transform: none;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {
  .resources-dashboard {
    width: 100%;

    margin-top: 25px;

    border-radius: 20px;
  }

  .resources-dashboard-body {
    padding: 20px;
  }

  .resources-dashboard-title h3 {
    font-size: 25px;
  }

  .resources-dashboard-mark {
    width: 48px;
    height: 48px;

    border-radius: 13px;
  }

  .resource-category-section {
    padding-top: 20px;
  }

  .resource-category-grid {
    grid-template-columns: 1fr 1fr;

    gap: 10px;
  }

  .resource-category-card {
    grid-template-columns:
      auto
      1fr;

    min-height: 90px;

    padding: 14px;
  }

  .resource-category-icon {
    width: 38px;
    height: 38px;
  }

  .resource-category-card div:last-child {
    grid-column: 2;
  }

  .resource-category-card strong {
    font-size: 12px;
  }

  .resource-category-card small {
    font-size: 9px;
  }

  /* FEATURED */

  .featured-resource-grid {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .featured-resource-visual {
    min-height: 360px;
  }

  .featured-resource-mark {
    width: 110px;
    height: 110px;

    border-radius: 28px;

    font-size: 54px;
  }

  .featured-resource-content {
    padding: 0;
  }

  .featured-resource-content h2 {
    font-size: 32px;
  }

  /* RESOURCE GROUPS */

  .resource-library-group {
    padding: 55px 0;
  }

  .resource-library-heading {
    align-items: flex-start;

    flex-direction: column;

    gap: 18px;
  }

  .resource-library-heading h3 {
    font-size: 30px;
  }

  .resource-card-grid {
    grid-template-columns: 1fr;
  }

  .resource-card {
    min-height: 270px;
  }

  /* FAQ */

  .resource-faq-card {
    grid-template-columns: 1fr;

    gap: 18px;

    padding: 24px;
  }

  .resource-faq-icon {
    width: 52px;
    height: 52px;

    border-radius: 14px;

    font-size: 23px;
  }

  .resource-faq-card h4 {
    font-size: 19px;
  }

  /* QUICK LINKS */

  .resources-quick-grid {
    grid-template-columns: 1fr;

    margin-top: 30px;
  }

  .resources-quick-card {
    min-height: 160px;

    padding: 20px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

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

  .resource-category-card {
    grid-template-columns:
      auto
      auto
      1fr;

    min-height: 78px;
  }

  .resource-category-card div:last-child {
    grid-column: auto;
  }

  .resources-dashboard-header {
    padding: 14px;
  }

  .resources-dashboard-brand small {
    font-size: 7px;
  }

  .resources-dashboard-brand strong {
    font-size: 11px;
  }

  .resources-dashboard-status {
    padding: 6px 8px;

    font-size: 7px;
  }

  .resource-preview-card {
    grid-template-columns:
      auto
      1fr
      auto;

    padding: 11px;
  }

  .resource-preview-icon {
    width: 31px;
    height: 31px;
  }

  .resource-preview-card strong {
    font-size: 10px;
  }

  .resource-preview-card small {
    font-size: 8px;
  }

  .resources-dashboard-footer {
    font-size: 7px;
  }

  .featured-resource-visual {
    min-height: 300px;
  }

  .featured-resource-badge {
    left: 18px;
    top: 18px;
  }

  .featured-resource-mark {
    width: 90px;
    height: 90px;

    border-radius: 22px;

    font-size: 43px;
  }

  .featured-resource-number {
    right: 18px;
    bottom: 16px;

    font-size: 60px;
  }

  .resource-card {
    padding: 20px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .resources-page .reveal {
    opacity: 1;

    transform: none;

    transition: none;
  }

  .resources-dashboard,
  .resource-category-card,
  .resource-preview-card,
  .resource-card,
  .resources-quick-card,
  .resource-view-all,
  .featured-resource-mark,
  .resources-quick-card > strong {
    transition: none;
  }

  .resources-dashboard-status span {
    animation: none;
  }
}

/* Individual Industires Page */

/* =========================================================
   INDUSTRIES PAGE
   /assets/css/industries.css
========================================================= */

/* =========================================================
   01. PAGE VARIABLES
========================================================= */

.industries-page {
  --industry-navy: #081a33;
  --industry-navy-2: #0d2748;
  --industry-blue: #2563eb;
  --industry-blue-light: #eff6ff;
  --industry-purple: #7c3aed;
  --industry-purple-light: #f5f3ff;
  --industry-green: #059669;
  --industry-green-light: #ecfdf5;
  --industry-orange: #ea580c;
  --industry-orange-light: #fff7ed;

  --industry-text: #0f172a;
  --industry-text-light: #475569;
  --industry-muted: #64748b;

  --industry-border: #e2e8f0;
  --industry-bg: #f8fafc;
  --industry-white: #ffffff;

  --industry-shadow-sm: 0 8px 25px rgba(15, 23, 42, 0.06);

  --industry-shadow: 0 20px 60px rgba(15, 23, 42, 0.1);

  --industry-shadow-lg: 0 35px 90px rgba(8, 26, 51, 0.16);

  --industry-radius: 22px;
  --industry-radius-sm: 14px;

  --industry-transition: 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   02. GLOBAL INDUSTRY PAGE
========================================================= */

.industries-page {
  overflow-x: hidden;
  color: var(--industry-text);
  background: #fff;
}

.industries-page *,
.industries-page *::before,
.industries-page *::after {
  box-sizing: border-box;
}

.industries-page a {
  text-decoration: none;
}

.industries-page img {
  max-width: 100%;
}

/* =========================================================
   03. SHARED SECTION STYLES
========================================================= */

.industries-page .section {
  position: relative;
  padding: 110px 0;
}

.industries-page .container {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.industries-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 18px;

  color: var(--industry-blue);

  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;

  text-transform: uppercase;
}

.industries-page .eyebrow::before {
  content: "";

  width: 24px;
  height: 2px;

  background: currentColor;
  border-radius: 99px;
}

.industries-page h1,
.industries-page h2,
.industries-page h3 {
  font-family: "Manrope", sans-serif;
}

.industries-page h1,
.industries-page h2,
.industries-page h3,
.industries-page p {
  margin-top: 0;
}

.industries-page h2 span,
.industries-page h1 span {
  color: var(--industry-blue);
}

/* =========================================================
   04. HERO
========================================================= */

.industries-hero {
  position: relative;

  min-height: 720px;
  padding: 145px 0 105px !important;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 85% 30%,
      rgba(37, 99, 235, 0.13),
      transparent 30%
    ),
    radial-gradient(
      circle at 10% 80%,
      rgba(124, 58, 237, 0.08),
      transparent 28%
    ),
    #f8fbff;
}

.industries-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.92),
    rgba(255, 255, 255, 0.3)
  );
}

.resource-hero-grid {
  position: absolute;
  inset: 0;

  opacity: 0.45;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(37, 99, 235, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.055) 1px, transparent 1px);

  background-size: 60px 60px;

  mask-image: linear-gradient(
    to right,
    transparent,
    black 15%,
    black 80%,
    transparent
  );
}

.resource-hero-container {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(450px, 0.95fr);

  align-items: center;

  gap: 80px;
}

/* =========================================================
   05. HERO CONTENT
========================================================= */

.resource-hero-content {
  max-width: 650px;
}

.resource-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;

  margin-bottom: 25px;

  color: var(--industry-navy);

  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.resource-label-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 800;

  border-radius: 8px;

  background: linear-gradient(135deg, #2563eb, #0d47a1);

  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
}

.resource-hero-content h1 {
  max-width: 680px;

  margin-bottom: 24px;

  color: var(--industry-navy);

  font-size: clamp(44px, 5vw, 70px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1.02;
}

.resource-hero-content h1 span {
  display: block;

  color: transparent;

  background: linear-gradient(90deg, #2563eb, #4f46e5);

  background-clip: text;
  -webkit-background-clip: text;
}

.resource-hero-content > p {
  max-width: 610px;

  margin-bottom: 34px;

  color: var(--industry-text-light);

  font-size: 17px;
  line-height: 1.8;
}

/* =========================================================
   06. HERO ACTIONS
========================================================= */

.resource-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;

  margin-bottom: 45px;
}

.industries-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-height: 50px;
  padding: 0 22px;

  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;

  border: 1px solid transparent;
  border-radius: 10px;

  transition:
    transform var(--industry-transition),
    box-shadow var(--industry-transition),
    background var(--industry-transition),
    border-color var(--industry-transition);
}

.industries-page .btn:hover {
  transform: translateY(-2px);
}

.industries-page .btn-primary {
  color: #fff;

  background: linear-gradient(135deg, #2563eb, #1748b5);

  box-shadow: 0 12px 25px rgba(37, 99, 235, 0.22);
}

.industries-page .btn-primary:hover {
  box-shadow: 0 18px 35px rgba(37, 99, 235, 0.3);
}

.industries-page .btn-secondary {
  color: var(--industry-navy);

  background: #fff;

  border-color: #dbe3ee;
}

.industries-page .btn-secondary:hover {
  border-color: #b8c8dd;
  box-shadow: var(--industry-shadow-sm);
}

.industries-page .btn-large {
  min-height: 56px;
  padding: 0 25px;
}

/* =========================================================
   07. HERO META
========================================================= */

.resource-hero-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  max-width: 590px;

  border-top: 1px solid var(--industry-border);
  padding-top: 22px;
}

.resource-hero-meta-item {
  position: relative;

  padding-right: 18px;
}

.resource-hero-meta-item:not(:last-child)::after {
  content: "";

  position: absolute;
  top: 2px;
  right: 12px;

  width: 1px;
  height: 42px;

  background: var(--industry-border);
}

.resource-hero-meta-item strong {
  display: block;

  margin-bottom: 5px;

  color: var(--industry-navy);

  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.resource-hero-meta-item span {
  color: var(--industry-muted);

  font-size: 11px;
  line-height: 1.4;
}

/* =========================================================
   08. HERO DASHBOARD
========================================================= */

.resource-hero-visual {
  position: relative;

  min-width: 0;
}

.resource-visual-glow {
  position: absolute;

  width: 420px;
  height: 420px;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: radial-gradient(circle, rgba(37, 99, 235, 0.2), transparent 68%);

  filter: blur(10px);

  pointer-events: none;
}

.industry-dashboard {
  position: relative;
  z-index: 2;

  width: 100%;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.75);

  border-radius: 24px;

  background: linear-gradient(145deg, #0b2341, #07172d);

  box-shadow: 0 35px 80px rgba(8, 26, 51, 0.25);

  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);

  transition: transform 500ms ease;
}

.industry-dashboard:hover {
  transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-5px);
}

.industry-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 82px;

  padding: 18px 22px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.industry-dashboard-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.industry-dashboard-logo {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 800;

  border-radius: 10px;

  background: linear-gradient(135deg, #2563eb, #4f46e5);
}

.industry-dashboard-brand small {
  display: block;

  margin-bottom: 3px;

  color: #7f9bbd;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.industry-dashboard-brand strong {
  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 13px;
}

.industry-dashboard-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 7px 10px;

  color: #8ee5bd;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;

  border: 1px solid rgba(142, 229, 189, 0.15);
  border-radius: 99px;

  background: rgba(16, 185, 129, 0.08);
}

.industry-dashboard-status span {
  font-size: 8px;
}

/* =========================================================
   09. DASHBOARD BODY
========================================================= */

.industry-dashboard-body {
  padding: 26px 24px 24px;
}

.industry-dashboard-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 22px;
}

.industry-dashboard-title small {
  display: block;

  margin-bottom: 5px;

  color: #7090b5;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.industry-dashboard-title h3 {
  margin: 0;

  color: #fff;

  font-size: 25px;
  line-height: 1.15;
}

.industry-dashboard-title h3 span {
  color: #5f9bff;
}

.industry-dashboard-mark {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  color: rgba(255, 255, 255, 0.08);

  font-family: "Manrope", sans-serif;
  font-size: 30px;
  font-weight: 800;

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.035);
}

/* =========================================================
   10. DASHBOARD PREVIEW CARDS
========================================================= */

.industry-preview-card {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;

  min-height: 63px;

  margin-bottom: 10px;
  padding: 10px 13px;

  border: 1px solid rgba(255, 255, 255, 0.07);

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.035);

  transition:
    background var(--industry-transition),
    transform var(--industry-transition),
    border-color var(--industry-transition);
}

.industry-preview-card:hover {
  transform: translateX(4px);

  border-color: rgba(96, 165, 250, 0.3);

  background: rgba(255, 255, 255, 0.07);
}

.industry-preview-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  font-size: 18px;

  border-radius: 10px;
}

.industry-preview-icon.blue {
  background: rgba(37, 99, 235, 0.15);
}

.industry-preview-icon.purple {
  background: rgba(124, 58, 237, 0.15);
}

.industry-preview-icon.green {
  background: rgba(5, 150, 105, 0.15);
}

.industry-preview-card strong {
  display: block;

  margin-bottom: 3px;

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 12px;
}

.industry-preview-card small {
  display: block;

  color: #7994b5;

  font-size: 9px;
}

.industry-preview-card > span {
  color: #6c91bf;

  font-size: 15px;

  transition: transform var(--industry-transition);
}

.industry-preview-card:hover > span {
  transform: translateX(3px);
}

/* =========================================================
   11. DASHBOARD NOTE
========================================================= */

.industry-preview-note {
  display: flex;
  align-items: center;
  gap: 11px;

  margin-top: 17px;
  padding: 14px;

  border: 1px solid rgba(96, 165, 250, 0.12);

  border-radius: 12px;

  background: linear-gradient(
    90deg,
    rgba(37, 99, 235, 0.1),
    rgba(124, 58, 237, 0.06)
  );
}

.industry-note-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 29px;
  height: 29px;

  flex-shrink: 0;

  color: #79aaff;

  border-radius: 8px;

  background: rgba(37, 99, 235, 0.12);
}

.industry-preview-note strong {
  display: block;

  margin-bottom: 3px;

  color: #dbeafe;

  font-size: 10px;
}

.industry-preview-note small {
  display: block;

  color: #7893b3;

  font-size: 8px;
  line-height: 1.5;
}

.industry-dashboard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 22px;

  color: #526f91;

  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.15em;

  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* =========================================================
   12. INTRO SECTION
========================================================= */

.resource-intro {
  background: #fff;
}

.resource-intro-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;

  gap: 90px;

  align-items: start;
}

.resource-intro-heading h2 {
  max-width: 540px;

  margin: 0;

  color: var(--industry-navy);

  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.resource-intro-heading h2 span {
  display: block;
}

.resource-intro-content {
  max-width: 620px;
  padding-top: 28px;
}

.resource-intro-content p {
  margin-bottom: 18px;

  color: var(--industry-text-light);

  font-size: 16px;
  line-height: 1.85;
}

.resource-intro-content p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   13. INDUSTRY CATEGORY SECTION
========================================================= */

.industry-category-section {
  padding: 0 0 110px;

  background: #fff;
}

.industry-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 12px;

  padding-top: 5px;
}

.industry-category-card {
  position: relative;

  display: grid;
  grid-template-columns: auto 48px 1fr;
  align-items: center;

  gap: 13px;

  min-height: 95px;

  padding: 16px;

  overflow: hidden;

  color: var(--industry-text);

  border: 1px solid var(--industry-border);
  border-radius: 15px;

  background: #fff;

  box-shadow: var(--industry-shadow-sm);

  transition:
    transform var(--industry-transition),
    border-color var(--industry-transition),
    box-shadow var(--industry-transition);
}

.industry-category-card::before {
  content: "";

  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;

  width: 3px;

  background: var(--industry-blue);

  transform: scaleY(0);

  transform-origin: center;

  transition: transform var(--industry-transition);
}

.industry-category-card:hover,
.industry-category-card.active {
  transform: translateY(-4px);

  border-color: rgba(37, 99, 235, 0.28);

  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.09);
}

.industry-category-card:hover::before,
.industry-category-card.active::before {
  transform: scaleY(1);
}

.industry-category-number {
  align-self: start;

  padding-top: 3px;

  color: #94a3b8;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.industry-category-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  font-size: 20px;

  border-radius: 13px;
}

.industry-category-icon.blue,
.industry-benefit-icon.blue,
.industry-resource-icon.blue {
  background: var(--industry-blue-light);
  color: var(--industry-blue);
}

.industry-category-icon.purple,
.industry-benefit-icon.purple,
.industry-resource-icon.purple {
  background: var(--industry-purple-light);
  color: var(--industry-purple);
}

.industry-category-icon.green,
.industry-benefit-icon.green,
.industry-resource-icon.green {
  background: var(--industry-green-light);
  color: var(--industry-green);
}

.industry-category-icon.orange,
.industry-benefit-icon.orange {
  background: var(--industry-orange-light);
  color: var(--industry-orange);
}

.industry-category-card strong {
  display: block;

  margin-bottom: 4px;

  color: var(--industry-navy);

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.industry-category-card small {
  display: block;

  color: var(--industry-muted);

  font-size: 10px;
  line-height: 1.4;
}

/* =========================================================
   14. INDUSTRY LIST SECTION
========================================================= */

.industry-list-section {
  padding-top: 35px !important;

  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.industry-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 0.85fr);

  align-items: center;

  gap: 100px;

  min-height: 640px;

  padding: 80px 0;

  border-bottom: 1px solid #e9eef5;
}

.industry-detail.reverse {
  grid-template-columns:
    minmax(400px, 0.85fr)
    minmax(0, 1fr);
}

.industry-detail.reverse .industry-detail-content {
  grid-column: 2;
  grid-row: 1;
}

.industry-detail.reverse .industry-detail-visual {
  grid-column: 1;
  grid-row: 1;
}

.industry-detail-content {
  max-width: 600px;
}

.industry-detail-content h2 {
  margin-bottom: 22px;

  color: var(--industry-navy);

  font-size: clamp(34px, 4vw, 50px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.industry-detail-content h2 span {
  display: block;
}

.industry-detail-content > p {
  color: var(--industry-text-light);

  font-size: 15px;
  line-height: 1.85;
}

.industry-detail-content > p + p {
  margin-top: -3px;
}

/* =========================================================
   15. INDUSTRY FEATURE LIST
========================================================= */

.industry-feature-list {
  display: grid;

  margin-top: 31px;
  margin-bottom: 31px;

  border-top: 1px solid var(--industry-border);
}

.industry-feature {
  display: grid;
  grid-template-columns: 32px 1fr;

  gap: 13px;

  padding: 17px 0;

  border-bottom: 1px solid var(--industry-border);
}

.industry-feature > span {
  color: var(--industry-blue);

  font-family: "Manrope", sans-serif;
  font-size: 9px;
  font-weight: 800;
}

.industry-feature strong {
  display: block;

  margin-bottom: 4px;

  color: var(--industry-navy);

  font-family: "Manrope", sans-serif;
  font-size: 13px;
}

.industry-feature small {
  display: block;

  max-width: 480px;

  color: var(--industry-muted);

  font-size: 11px;
  line-height: 1.6;
}

/* =========================================================
   16. INDUSTRY DETAIL LINK
========================================================= */

.industry-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;

  color: var(--industry-blue);

  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;

  transition:
    gap var(--industry-transition),
    color var(--industry-transition);
}

.industry-detail-link span {
  font-size: 17px;
}

.industry-detail-link:hover {
  gap: 16px;

  color: #1748b5;
}

/* =========================================================
   17. INDUSTRY VISUAL
========================================================= */

.industry-detail-visual {
  position: relative;

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

  min-height: 480px;
}

.industry-number {
  position: absolute;

  top: 5px;
  right: 15px;

  color: rgba(15, 23, 42, 0.035);

  font-family: "Manrope", sans-serif;
  font-size: 180px;
  font-weight: 800;
  line-height: 1;

  user-select: none;
}

.industry-visual-card {
  position: relative;
  z-index: 2;

  width: min(100%, 440px);

  min-height: 420px;

  padding: 22px;

  overflow: hidden;

  border-radius: 24px;

  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.15);

  transform: rotate(1.5deg);

  transition:
    transform 500ms ease,
    box-shadow 500ms ease;
}

.industry-visual-card:hover {
  transform: rotate(0deg) translateY(-6px);

  box-shadow: 0 40px 90px rgba(15, 23, 42, 0.2);
}

.industry-visual-card.blue {
  background: linear-gradient(145deg, #eff6ff, #dbeafe);

  border: 1px solid #bfdbfe;
}

.industry-visual-card.purple {
  background: linear-gradient(145deg, #f5f3ff, #ede9fe);

  border: 1px solid #ddd6fe;
}

.industry-visual-card.green {
  background: linear-gradient(145deg, #ecfdf5, #d1fae5);

  border: 1px solid #a7f3d0;
}

.industry-visual-card.orange {
  background: linear-gradient(145deg, #fff7ed, #ffedd5);

  border: 1px solid #fed7aa;
}

/* =========================================================
   18. VISUAL CARD TOP
========================================================= */

.industry-visual-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-bottom: 15px;

  border-bottom: 1px solid rgba(15, 23, 42, 0.08);

  color: #64748b;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

/* =========================================================
   19. VISUAL CARD MAIN
========================================================= */

.industry-visual-main {
  padding: 50px 15px 45px;
}

.industry-big-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 68px;
  height: 68px;

  margin-bottom: 22px;

  font-size: 30px;

  border-radius: 19px;

  background: rgba(255, 255, 255, 0.65);

  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.07);
}

.industry-visual-main h3 {
  max-width: 320px;

  margin-bottom: 12px;

  color: var(--industry-navy);

  font-size: 33px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.industry-visual-main h3 span {
  display: block;

  color: var(--industry-blue);
}

.industry-visual-card.purple .industry-visual-main h3 span {
  color: var(--industry-purple);
}

.industry-visual-card.green .industry-visual-main h3 span {
  color: var(--industry-green);
}

.industry-visual-card.orange .industry-visual-main h3 span {
  color: var(--industry-orange);
}

.industry-visual-main p {
  max-width: 310px;

  margin-bottom: 0;

  color: var(--industry-text-light);

  font-size: 12px;
  line-height: 1.65;
}

/* =========================================================
   20. VISUAL CARD STATS
========================================================= */

.industry-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  padding-top: 17px;

  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.industry-stat-grid > div {
  padding: 0 11px;
}

.industry-stat-grid > div:first-child {
  padding-left: 0;
}

.industry-stat-grid > div + div {
  border-left: 1px solid rgba(15, 23, 42, 0.08);
}

.industry-stat-grid strong {
  display: block;

  margin-bottom: 4px;

  color: var(--industry-navy);

  font-family: "Manrope", sans-serif;
  font-size: 11px;
}

.industry-stat-grid small {
  color: var(--industry-muted);

  font-size: 8px;
}

/* =========================================================
   21. BENEFITS SECTION
========================================================= */

.industry-benefits {
  background: #fff;
}

.section-heading {
  max-width: 720px;

  margin: 0 auto 55px;

  text-align: center;
}

.section-heading .eyebrow {
  justify-content: center;
}

.section-heading h2 {
  margin-bottom: 18px;

  color: var(--industry-navy);

  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.section-heading h2 span {
  display: block;
}

.section-heading p {
  max-width: 610px;

  margin: 0 auto;

  color: var(--industry-text-light);

  font-size: 15px;
  line-height: 1.8;
}

.industry-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 15px;
}

.industry-benefit-card {
  position: relative;

  min-height: 280px;

  padding: 28px 24px;

  border: 1px solid var(--industry-border);
  border-radius: var(--industry-radius);

  background: #fff;

  box-shadow: var(--industry-shadow-sm);

  overflow: hidden;

  transition:
    transform var(--industry-transition),
    box-shadow var(--industry-transition),
    border-color var(--industry-transition);
}

.industry-benefit-card::after {
  content: "";

  position: absolute;

  width: 150px;
  height: 150px;

  right: -65px;
  bottom: -75px;

  border-radius: 50%;

  background: rgba(37, 99, 235, 0.05);
}

.industry-benefit-card:hover {
  transform: translateY(-7px);

  border-color: rgba(37, 99, 235, 0.22);

  box-shadow: 0 25px 55px rgba(15, 23, 42, 0.1);
}

.industry-benefit-number {
  position: absolute;

  top: 23px;
  right: 23px;

  color: #cbd5e1;

  font-size: 9px;
  font-weight: 800;
}

.industry-benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;

  margin-bottom: 24px;

  font-size: 19px;

  border-radius: 14px;
}

.industry-benefit-card h3 {
  margin-bottom: 11px;

  color: var(--industry-navy);

  font-size: 17px;
  font-weight: 800;
}

.industry-benefit-card p {
  margin-bottom: 0;

  color: var(--industry-muted);

  font-size: 12px;
  line-height: 1.75;
}

/* =========================================================
   22. INDUSTRY RESOURCES
========================================================= */

.industry-resources {
  background: #f8fafc;
}

.industry-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 15px;
}

.industry-resource-card {
  display: grid;
  grid-template-columns: 48px 1fr 20px;
  align-items: start;

  gap: 16px;

  min-height: 220px;

  padding: 25px;

  color: var(--industry-text);

  border: 1px solid var(--industry-border);
  border-radius: var(--industry-radius);

  background: #fff;

  box-shadow: var(--industry-shadow-sm);

  transition:
    transform var(--industry-transition),
    box-shadow var(--industry-transition),
    border-color var(--industry-transition);
}

.industry-resource-card:hover {
  transform: translateY(-6px);

  border-color: rgba(37, 99, 235, 0.2);

  box-shadow: 0 25px 55px rgba(15, 23, 42, 0.09);
}

.industry-resource-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  font-size: 18px;

  border-radius: 13px;
}

.industry-resource-card div > span {
  display: block;

  margin-bottom: 8px;

  color: var(--industry-blue);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.industry-resource-card h3 {
  margin-bottom: 8px;

  color: var(--industry-navy);

  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

.industry-resource-card p {
  margin-bottom: 0;

  color: var(--industry-muted);

  font-size: 11px;
  line-height: 1.7;
}

.industry-resource-card > strong {
  align-self: center;

  color: var(--industry-blue);

  font-size: 18px;

  transition: transform var(--industry-transition);
}

.industry-resource-card:hover > strong {
  transform: translateX(4px);
}

/* =========================================================
   23. CTA
========================================================= */

.industry-cta {
  position: relative;

  padding: 110px 0 !important;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 85% 30%,
      rgba(37, 99, 235, 0.35),
      transparent 30%
    ),
    radial-gradient(
      circle at 15% 80%,
      rgba(124, 58, 237, 0.25),
      transparent 30%
    ),
    #07172d;
}

.industry-cta::before {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    120deg,
    rgba(37, 99, 235, 0.12),
    transparent 45%,
    rgba(124, 58, 237, 0.08)
  );
}

.resource-cta-grid {
  position: absolute;
  inset: 0;

  opacity: 0.2;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);

  background-size: 55px 55px;

  mask-image: radial-gradient(circle at center, black, transparent 75%);
}

.resource-cta-content {
  position: relative;
  z-index: 2;

  max-width: 760px;

  margin: 0 auto;

  text-align: center;
}

.resource-cta-mark {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 56px;
  height: 56px;

  margin: 0 auto 23px;

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 22px;
  font-weight: 800;

  border-radius: 15px;

  background: linear-gradient(135deg, #2563eb, #4f46e5);

  box-shadow: 0 15px 35px rgba(37, 99, 235, 0.3);
}

.industry-cta .eyebrow {
  color: #8db9ff;
}

.industry-cta .eyebrow::before {
  background: currentColor;
}

.resource-cta-content h2 {
  margin-bottom: 20px;

  color: #fff;

  font-size: clamp(36px, 5vw, 58px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.06;
}

.resource-cta-content h2 span {
  display: block;

  color: #65a1ff;
}

.resource-cta-content > p {
  max-width: 650px;

  margin: 0 auto 32px;

  color: #9bb0c9;

  font-size: 15px;
  line-height: 1.8;
}

.resource-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 22px;
}

.industries-page .btn-light {
  color: var(--industry-navy);

  background: #fff;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.industries-page .btn-light:hover {
  background: #f8fafc;
}

.resource-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  color: #fff;

  font-size: 13px;
  font-weight: 700;

  transition:
    gap var(--industry-transition),
    color var(--industry-transition);
}

.resource-cta-link:hover {
  gap: 14px;

  color: #8db9ff;
}

/* =========================================================
   24. SCROLL REVEAL
========================================================= */

.industries-page .reveal {
  opacity: 0;

  transform: translateY(28px);

  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.industries-page .reveal.revealed {
  opacity: 1;

  transform: translateY(0);
}

/* =========================================================
   25. HEADER ACTIVE STATE
========================================================= */

.industries-page .mega-trigger.active {
  color: var(--industry-blue);
}

.industries-page .mega-trigger.active svg {
  transform: rotate(180deg);
}

.industries-page .mega-trigger svg {
  transition: transform 220ms ease;
}

/* =========================================================
   26. ACCESSIBILITY
========================================================= */

.industries-page a:focus-visible,
.industries-page button:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .industries-page *,
  .industries-page *::before,
  .industries-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .industries-page .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   27. LARGE TABLET
========================================================= */

@media (max-width: 1100px) {
  .industries-page .container {
    width: min(100% - 40px, 1050px);
  }

  .resource-hero-container {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(380px, 0.9fr);

    gap: 45px;
  }

  .resource-hero-content h1 {
    font-size: 54px;
  }

  .industry-detail {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(350px, 0.85fr);

    gap: 55px;
  }

  .industry-detail.reverse {
    grid-template-columns:
      minmax(350px, 0.85fr)
      minmax(0, 1fr);
  }

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

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

/* =========================================================
   28. TABLET
========================================================= */

@media (max-width: 900px) {
  .industries-page .section {
    padding: 80px 0;
  }

  .industries-hero {
    min-height: auto;

    padding: 120px 0 80px !important;
  }

  .resource-hero-container {
    grid-template-columns: 1fr;

    gap: 60px;
  }

  .resource-hero-content {
    max-width: 760px;
  }

  .resource-hero-content h1 {
    max-width: 700px;

    font-size: clamp(45px, 7vw, 62px);
  }

  .resource-hero-visual {
    width: min(100%, 650px);

    margin-inline: auto;
  }

  .resource-intro-grid {
    grid-template-columns: 1fr;

    gap: 15px;
  }

  .resource-intro-content {
    padding-top: 0;
  }

  .industry-detail,
  .industry-detail.reverse {
    grid-template-columns: 1fr;

    gap: 50px;

    min-height: auto;

    padding: 75px 0;
  }

  .industry-detail.reverse .industry-detail-content,
  .industry-detail.reverse .industry-detail-visual {
    grid-column: auto;
    grid-row: auto;
  }

  .industry-detail-content {
    max-width: 720px;
  }

  .industry-detail-visual {
    width: min(100%, 600px);

    margin-inline: auto;
  }

  .industry-resource-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   29. MOBILE
========================================================= */

@media (max-width: 640px) {
  .industries-page .container {
    width: min(100% - 30px, 560px);
  }

  .industries-page .section {
    padding: 65px 0;
  }

  .industries-hero {
    padding: 105px 0 65px !important;
  }

  .resource-hero-content h1 {
    margin-bottom: 20px;

    font-size: clamp(39px, 11vw, 52px);

    letter-spacing: -0.055em;
  }

  .resource-hero-content > p {
    font-size: 14px;
    line-height: 1.75;
  }

  .resource-label {
    margin-bottom: 20px;

    font-size: 9px;
  }

  .resource-hero-actions {
    align-items: stretch;
    flex-direction: column;

    margin-bottom: 32px;
  }

  .resource-hero-actions .btn {
    width: 100%;
  }

  .resource-hero-meta {
    grid-template-columns: 1fr;

    gap: 15px;
  }

  .resource-hero-meta-item {
    padding: 0;
  }

  .resource-hero-meta-item:not(:last-child)::after {
    display: none;
  }

  .resource-hero-meta-item strong {
    font-size: 13px;
  }

  .resource-hero-meta-item span {
    font-size: 10px;
  }

  /* Dashboard */

  .industry-dashboard {
    border-radius: 18px;

    transform: none;
  }

  .industry-dashboard:hover {
    transform: translateY(-3px);
  }

  .industry-dashboard-header {
    min-height: 70px;

    padding: 14px 15px;
  }

  .industry-dashboard-brand strong {
    font-size: 11px;
  }

  .industry-dashboard-status {
    display: none;
  }

  .industry-dashboard-body {
    padding: 20px 15px;
  }

  .industry-dashboard-title h3 {
    font-size: 20px;
  }

  .industry-dashboard-mark {
    width: 42px;
    height: 42px;

    font-size: 23px;
  }

  .industry-preview-card {
    grid-template-columns: 35px 1fr auto;

    min-height: 58px;

    padding: 8px 9px;
  }

  .industry-preview-icon {
    width: 35px;
    height: 35px;

    font-size: 15px;
  }

  .industry-preview-card strong {
    font-size: 10px;
  }

  .industry-preview-card small {
    font-size: 8px;
  }

  .industry-preview-note {
    padding: 11px;
  }

  /* Intro */

  .resource-intro-heading h2,
  .section-heading h2 {
    font-size: 34px;
  }

  .resource-intro-content p {
    font-size: 14px;
  }

  /* Category */

  .industry-category-section {
    padding-bottom: 65px;
  }

  .industry-category-grid {
    grid-template-columns: 1fr;

    gap: 9px;
  }

  .industry-category-card {
    grid-template-columns: auto 44px 1fr;

    min-height: 82px;
  }

  .industry-category-icon {
    width: 44px;
    height: 44px;
  }

  /* Detail */

  .industry-detail,
  .industry-detail.reverse {
    gap: 35px;

    padding: 55px 0;
  }

  .industry-detail-content h2 {
    font-size: 34px;
  }

  .industry-detail-content > p {
    font-size: 14px;
  }

  .industry-detail-visual {
    min-height: 400px;
  }

  .industry-number {
    top: 0;
    right: 0;

    font-size: 110px;
  }

  .industry-visual-card {
    min-height: 380px;

    padding: 17px;

    border-radius: 19px;

    transform: none;
  }

  .industry-visual-card:hover {
    transform: translateY(-4px);
  }

  .industry-visual-main {
    padding: 35px 10px 32px;
  }

  .industry-big-icon {
    width: 58px;
    height: 58px;

    margin-bottom: 18px;

    font-size: 25px;
  }

  .industry-visual-main h3 {
    font-size: 28px;
  }

  .industry-stat-grid > div {
    padding: 0 7px;
  }

  .industry-stat-grid strong {
    font-size: 9px;
  }

  .industry-stat-grid small {
    font-size: 7px;
  }

  /* Benefits */

  .industry-benefit-grid {
    grid-template-columns: 1fr;

    gap: 10px;
  }

  .industry-benefit-card {
    min-height: auto;

    padding: 24px 21px;
  }

  /* Resources */

  .industry-resource-grid {
    gap: 10px;
  }

  .industry-resource-card {
    min-height: auto;

    padding: 20px;
  }

  /* CTA */

  .industry-cta {
    padding: 75px 0 !important;
  }

  .resource-cta-content h2 {
    font-size: 37px;
  }

  .resource-cta-content > p {
    font-size: 13px;
  }

  .resource-cta-actions {
    flex-direction: column;

    gap: 18px;
  }

  .resource-cta-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   30. VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {
  .industries-page .container {
    width: calc(100% - 24px);
  }

  .resource-hero-content h1 {
    font-size: 36px;
  }

  .industry-dashboard-title h3 {
    font-size: 18px;
  }

  .industry-preview-card small {
    max-width: 150px;
  }

  .industry-detail-content h2 {
    font-size: 30px;
  }

  .industry-visual-main h3 {
    font-size: 25px;
  }

  .resource-cta-content h2 {
    font-size: 32px;
  }
}

/* =========================================================
   31. PRINT
========================================================= */

@media print {
  .industries-page .resource-hero-grid,
  .industries-page .resource-visual-glow,
  .industries-page .resource-cta-grid {
    display: none;
  }

  .industries-page .reveal {
    opacity: 1;
    transform: none;
  }

  .industries-page .industry-dashboard,
  .industries-page .industry-visual-card {
    box-shadow: none;
  }
}

/* =========================================================
   SOLUTIONS PAGE
   KAMAL GROUP OF CORPORATE
========================================================= */

/* =========================================================
   PAGE VARIABLES
========================================================= */

.solutions-page {
  --solution-blue: #1769ff;
  --solution-blue-dark: #0b4dcc;
  --solution-purple: #7c3aed;
  --solution-green: #10a36f;
  --solution-orange: #f59e0b;

  --solution-navy: #081a33;
  --solution-navy-2: #0d2547;
  --solution-text: #14213d;
  --solution-muted: #64748b;

  --solution-border: #e6ebf2;
  --solution-bg: #f7f9fc;
  --solution-white: #ffffff;

  --solution-shadow: 0 20px 60px rgba(8, 26, 51, 0.1);

  --solution-shadow-hover: 0 30px 80px rgba(8, 26, 51, 0.16);
}

/* =========================================================
   GENERAL
========================================================= */

.solutions-page {
  overflow-x: hidden;
}

.solutions-page a {
  text-decoration: none;
}

.solutions-page .section {
  position: relative;
}

.solutions-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 18px;

  color: var(--solution-blue);

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.solutions-page h1,
.solutions-page h2,
.solutions-page h3 {
  letter-spacing: -0.035em;
}

.solutions-page h1 span,
.solutions-page h2 span,
.solutions-page h3 span {
  color: var(--solution-blue);
}

/* =========================================================
   HERO
========================================================= */

.solutions-page .solutions-hero {
  position: relative;

  min-height: 760px;

  display: flex;
  align-items: center;

  padding: 150px 0 100px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 85% 35%,
      rgba(23, 105, 255, 0.12),
      transparent 30%
    ),
    linear-gradient(135deg, #f8fbff 0%, #eef5ff 50%, #ffffff 100%);
}

/* HERO GRID */

.solutions-page .resource-hero-grid {
  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.55;

  background-image:
    linear-gradient(rgba(23, 105, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 105, 255, 0.055) 1px, transparent 1px);

  background-size: 48px 48px;

  mask-image: linear-gradient(to right, black, transparent 90%);
}

/* HERO CONTAINER */

.solutions-page .resource-hero-container {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, 0.9fr);

  gap: 70px;

  align-items: center;
}

/* HERO CONTENT */

.solutions-page .resource-hero-content {
  max-width: 680px;
}

.solutions-page .resource-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 20px;

  color: var(--solution-navy);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.15em;
}

.solutions-page .resource-label-mark {
  width: 30px;
  height: 30px;

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

  border-radius: 8px;

  color: #ffffff;
  background: var(--solution-navy);

  font-size: 13px;
  font-weight: 800;

  box-shadow: 0 8px 20px rgba(8, 26, 51, 0.18);
}

.solutions-page .resource-hero-content h1 {
  max-width: 720px;

  margin: 0 0 24px;

  color: var(--solution-navy);

  font-size: clamp(44px, 5vw, 72px);

  line-height: 1.04;
  font-weight: 800;
}

.solutions-page .resource-hero-content h1 span {
  display: block;
}

.solutions-page .resource-hero-content > p {
  max-width: 640px;

  margin: 0 0 32px;

  color: var(--solution-muted);

  font-size: 18px;
  line-height: 1.75;
}

/* HERO ACTIONS */

.solutions-page .resource-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 14px;

  margin-bottom: 42px;
}

.solutions-page .btn-large {
  min-height: 54px;

  padding: 0 24px;
}

/* HERO META */

.solutions-page .resource-hero-meta {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  max-width: 650px;

  border-top: 1px solid rgba(8, 26, 51, 0.1);

  padding-top: 24px;
}

.solutions-page .resource-hero-meta-item {
  display: flex;
  flex-direction: column;

  gap: 5px;

  padding-right: 20px;

  border-right: 1px solid rgba(8, 26, 51, 0.1);
}

.solutions-page .resource-hero-meta-item:last-child {
  border-right: 0;
}

.solutions-page .resource-hero-meta-item strong {
  color: var(--solution-navy);

  font-size: 13px;
  font-weight: 800;
}

.solutions-page .resource-hero-meta-item span {
  color: var(--solution-muted);

  font-size: 11px;
  line-height: 1.5;
}

/* =========================================================
   HERO DASHBOARD
========================================================= */

.solutions-page .resource-hero-visual {
  position: relative;

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

  min-height: 540px;
}

.solutions-page .resource-visual-glow {
  position: absolute;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(23, 105, 255, 0.2),
    rgba(23, 105, 255, 0.04) 55%,
    transparent 70%
  );

  filter: blur(8px);
}

/* DASHBOARD */

.solutions-page .solution-dashboard {
  position: relative;
  z-index: 2;

  width: min(100%, 500px);

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.75);

  border-radius: 22px;

  background: linear-gradient(145deg, #ffffff, #f3f7fc);

  box-shadow:
    0 35px 80px rgba(8, 26, 51, 0.18),
    0 8px 20px rgba(23, 105, 255, 0.08);

  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);

  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease;
}

.solutions-page .solution-dashboard:hover {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(-8px);

  box-shadow: 0 45px 100px rgba(8, 26, 51, 0.22);
}

/* DASHBOARD HEADER */

.solutions-page .solution-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 20px 22px;

  color: #ffffff;

  background: linear-gradient(135deg, #081a33, #10345f);
}

.solutions-page .solution-dashboard-brand {
  display: flex;
  align-items: center;

  gap: 11px;
}

.solutions-page .solution-dashboard-logo {
  width: 38px;
  height: 38px;

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

  flex: 0 0 auto;

  border-radius: 10px;

  color: #ffffff;

  background: linear-gradient(135deg, var(--solution-blue), #4e8cff);

  font-size: 16px;
  font-weight: 800;
}

.solutions-page .solution-dashboard-brand small {
  display: block;

  margin-bottom: 3px;

  color: rgba(255, 255, 255, 0.58);

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.13em;
}

.solutions-page .solution-dashboard-brand strong {
  display: block;

  color: #ffffff;

  font-size: 13px;
  font-weight: 700;
}

.solutions-page .solution-dashboard-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 7px 10px;

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 30px;

  color: rgba(255, 255, 255, 0.75);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.12em;
}

.solutions-page .solution-dashboard-status span {
  color: #35d99a;

  font-size: 8px;
}

/* DASHBOARD BODY */

.solutions-page .solution-dashboard-body {
  padding: 25px;
}

.solutions-page .solution-dashboard-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 20px;
}

.solutions-page .solution-dashboard-title small {
  display: block;

  margin-bottom: 6px;

  color: var(--solution-muted);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.12em;
}

.solutions-page .solution-dashboard-title h3 {
  margin: 0;

  color: var(--solution-navy);

  font-size: 22px;
  line-height: 1.15;
}

.solutions-page .solution-dashboard-mark {
  width: 46px;
  height: 46px;

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

  flex: 0 0 auto;

  border-radius: 14px;

  color: var(--solution-blue);

  background: #eaf2ff;

  font-size: 18px;
  font-weight: 800;
}

/* PREVIEW CARDS */

.solutions-page .solution-preview-card {
  display: grid;

  grid-template-columns: 42px minmax(0, 1fr) auto;

  align-items: center;

  gap: 12px;

  margin-top: 11px;

  padding: 13px;

  border: 1px solid var(--solution-border);

  border-radius: 13px;

  background: #ffffff;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.solutions-page .solution-preview-card:hover {
  transform: translateX(5px);

  border-color: rgba(23, 105, 255, 0.22);

  box-shadow: 0 10px 25px rgba(8, 26, 51, 0.07);
}

.solutions-page .solution-preview-icon {
  width: 42px;
  height: 42px;

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

  border-radius: 11px;

  font-size: 18px;
}

.solutions-page .solution-preview-icon.blue {
  background: #eaf2ff;
}

.solutions-page .solution-preview-icon.purple {
  background: #f2eaff;
}

.solutions-page .solution-preview-icon.green {
  background: #e5f8f0;
}

.solutions-page .solution-preview-card strong {
  display: block;

  margin-bottom: 3px;

  color: var(--solution-navy);

  font-size: 12px;
}

.solutions-page .solution-preview-card small {
  display: block;

  color: var(--solution-muted);

  font-size: 9px;
  line-height: 1.4;
}

.solutions-page .solution-preview-card > span {
  color: var(--solution-blue);

  font-size: 17px;
  font-weight: 700;
}

/* DASHBOARD NOTE */

.solutions-page .solution-preview-note {
  display: flex;
  align-items: flex-start;

  gap: 11px;

  margin-top: 16px;

  padding: 14px;

  border-radius: 13px;

  background: linear-gradient(135deg, #f1f6ff, #f8fbff);
}

.solutions-page .solution-note-icon {
  width: 30px;
  height: 30px;

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

  flex: 0 0 auto;

  border-radius: 9px;

  color: var(--solution-blue);

  background: #ffffff;

  box-shadow: 0 4px 12px rgba(8, 26, 51, 0.07);
}

.solutions-page .solution-preview-note strong {
  display: block;

  margin-bottom: 3px;

  color: var(--solution-navy);

  font-size: 11px;
}

.solutions-page .solution-preview-note small {
  display: block;

  color: var(--solution-muted);

  font-size: 9px;
  line-height: 1.5;
}

/* DASHBOARD FOOTER */

.solutions-page .solution-dashboard-footer {
  display: flex;
  justify-content: space-between;

  padding: 12px 22px;

  border-top: 1px solid var(--solution-border);

  color: #94a3b8;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.12em;
}

/* =========================================================
   INTRO
========================================================= */

.solutions-page .resource-intro {
  padding: 110px 0 90px;

  background: #ffffff;
}

.solutions-page .resource-intro-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  gap: 100px;

  align-items: start;
}

.solutions-page .resource-intro-heading h2 {
  max-width: 650px;

  margin: 0;

  color: var(--solution-navy);

  font-size: clamp(34px, 4vw, 52px);

  line-height: 1.1;
}

.solutions-page .resource-intro-heading h2 span {
  display: block;
}

.solutions-page .resource-intro-content {
  max-width: 650px;
}

.solutions-page .resource-intro-content p {
  margin: 0 0 22px;

  color: var(--solution-muted);

  font-size: 16px;
  line-height: 1.85;
}

.solutions-page .resource-intro-content p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   CATEGORY NAVIGATION
========================================================= */

.solutions-page .solution-category-section {
  padding: 0 0 100px;

  background: #ffffff;
}

.solutions-page .solution-category-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;
}

.solutions-page .solution-category-card {
  position: relative;

  display: grid;

  grid-template-columns: auto auto minmax(0, 1fr);

  align-items: center;

  gap: 15px;

  min-height: 115px;

  padding: 22px;

  border: 1px solid var(--solution-border);

  border-radius: 16px;

  color: var(--solution-navy);

  background: #ffffff;

  overflow: hidden;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

.solutions-page .solution-category-card::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 0;
  height: 3px;

  background: var(--solution-blue);

  transition: width 0.3s ease;
}

.solutions-page .solution-category-card:hover,
.solutions-page .solution-category-card.active {
  transform: translateY(-4px);

  border-color: rgba(23, 105, 255, 0.25);

  box-shadow: 0 20px 45px rgba(8, 26, 51, 0.08);
}

.solutions-page .solution-category-card.active {
  background: linear-gradient(135deg, #ffffff, #f6f9ff);
}

.solutions-page .solution-category-card:hover::after,
.solutions-page .solution-category-card.active::after {
  width: 100%;
}

.solutions-page .solution-category-number {
  align-self: start;

  color: #a5b1c2;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.08em;
}

.solutions-page .solution-category-icon {
  width: 46px;
  height: 46px;

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

  border-radius: 13px;

  font-size: 20px;
}

.solutions-page .solution-category-icon.blue {
  background: #eaf2ff;
}

.solutions-page .solution-category-icon.purple {
  background: #f1eaff;
}

.solutions-page .solution-category-icon.green {
  background: #e4f8ef;
}

.solutions-page .solution-category-card strong {
  display: block;

  margin-bottom: 5px;

  font-size: 14px;
  font-weight: 800;
}

.solutions-page .solution-category-card small {
  display: block;

  color: var(--solution-muted);

  font-size: 10px;
  line-height: 1.5;
}

/* =========================================================
   SOLUTION LIST
========================================================= */

.solutions-page .solution-list-section {
  padding: 110px 0;

  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.solutions-page .solution-detail {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 0.9fr);

  gap: 100px;

  align-items: center;

  padding: 90px 0;

  border-bottom: 1px solid var(--solution-border);
}

.solutions-page .solution-detail:first-child {
  padding-top: 0;
}

.solutions-page .solution-detail:last-child {
  padding-bottom: 0;

  border-bottom: 0;
}

.solutions-page .solution-detail.reverse {
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1fr);
}

.solutions-page .solution-detail.reverse .solution-detail-content {
  order: 2;
}

.solutions-page .solution-detail.reverse .solution-detail-visual {
  order: 1;
}

/* DETAIL CONTENT */

.solutions-page .solution-detail-content {
  max-width: 650px;
}

.solutions-page .solution-detail-content h2 {
  margin: 0 0 20px;

  color: var(--solution-navy);

  font-size: clamp(34px, 4vw, 52px);

  line-height: 1.1;
}

.solutions-page .solution-detail-content h2 span {
  display: block;
}

.solutions-page .solution-detail-content > p {
  margin: 0 0 16px;

  color: var(--solution-muted);

  font-size: 15px;
  line-height: 1.8;
}

/* =========================================================
   FEATURE LIST
========================================================= */

.solutions-page .solution-feature-list {
  margin-top: 30px;

  border-top: 1px solid var(--solution-border);
}

.solutions-page .solution-feature {
  display: grid;

  grid-template-columns: 34px minmax(0, 1fr);

  gap: 15px;

  padding: 17px 0;

  border-bottom: 1px solid var(--solution-border);
}

.solutions-page .solution-feature > span {
  width: 30px;
  height: 30px;

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

  border-radius: 8px;

  color: var(--solution-blue);

  background: #edf4ff;

  font-size: 9px;
  font-weight: 800;
}

.solutions-page .solution-feature strong {
  display: block;

  margin-bottom: 4px;

  color: var(--solution-navy);

  font-size: 13px;
}

.solutions-page .solution-feature small {
  display: block;

  color: var(--solution-muted);

  font-size: 11px;
  line-height: 1.6;
}

/* DETAIL LINK */

.solutions-page .solution-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 30px;

  color: var(--solution-blue);

  font-size: 13px;
  font-weight: 800;
}

.solutions-page .solution-detail-link span {
  transition: transform 0.25s ease;
}

.solutions-page .solution-detail-link:hover span {
  transform: translateX(5px);
}

/* =========================================================
   SOLUTION VISUAL CARDS
========================================================= */

.solutions-page .solution-detail-visual {
  position: relative;

  min-height: 500px;

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

.solutions-page .solution-number {
  position: absolute;

  top: 10px;
  right: 10px;

  color: rgba(8, 26, 51, 0.045);

  font-size: 150px;
  font-weight: 800;

  line-height: 1;

  pointer-events: none;
}

.solutions-page .solution-visual-card {
  position: relative;
  z-index: 2;

  width: min(100%, 450px);

  min-height: 410px;

  padding: 30px;

  overflow: hidden;

  border-radius: 25px;

  color: #ffffff;

  box-shadow: 0 30px 70px rgba(8, 26, 51, 0.16);

  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.solutions-page .solution-visual-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 40px 90px rgba(8, 26, 51, 0.22);
}

/* CARD COLORS */

.solutions-page .solution-visual-card.blue {
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(94, 156, 255, 0.45),
      transparent 35%
    ),
    linear-gradient(145deg, #0a55d8, #1769ff 55%, #0947bb);
}

.solutions-page .solution-visual-card.purple {
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(201, 157, 255, 0.42),
      transparent 35%
    ),
    linear-gradient(145deg, #5b21b6, #7c3aed 55%, #4c1d95);
}

.solutions-page .solution-visual-card.green {
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(92, 229, 175, 0.4),
      transparent 35%
    ),
    linear-gradient(145deg, #087a52, #10a36f 55%, #056c49);
}

/* VISUAL TOP */

.solutions-page .solution-visual-top {
  display: flex;
  justify-content: space-between;

  padding-bottom: 18px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  color: rgba(255, 255, 255, 0.65);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.13em;
}

/* VISUAL MAIN */

.solutions-page .solution-visual-main {
  padding: 48px 0 45px;
}

.solutions-page .solution-big-icon {
  width: 68px;
  height: 68px;

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

  margin-bottom: 22px;

  border: 1px solid rgba(255, 255, 255, 0.22);

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.12);

  font-size: 31px;

  backdrop-filter: blur(10px);
}

.solutions-page .solution-visual-main h3 {
  max-width: 350px;

  margin: 0 0 10px;

  color: #ffffff;

  font-size: 34px;
  line-height: 1.05;
}

.solutions-page .solution-visual-main h3 span {
  display: block;

  color: #ffffff;

  opacity: 0.72;
}

.solutions-page .solution-visual-main p {
  max-width: 300px;

  margin: 0;

  color: rgba(255, 255, 255, 0.68);

  font-size: 12px;
  line-height: 1.6;
}

/* STAT GRID */

.solutions-page .solution-stat-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 8px;
}

.solutions-page .solution-stat-grid > div {
  padding: 13px 10px;

  border: 1px solid rgba(255, 255, 255, 0.14);

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.08);
}

.solutions-page .solution-stat-grid strong {
  display: block;

  margin-bottom: 4px;

  color: #ffffff;

  font-size: 10px;
}

.solutions-page .solution-stat-grid small {
  display: block;

  color: rgba(255, 255, 255, 0.55);

  font-size: 8px;
}

/* =========================================================
   WHY KAMAL
========================================================= */

.solutions-page .solution-benefits {
  padding: 115px 0;

  background: #ffffff;
}

.solutions-page .section-heading {
  max-width: 750px;

  margin: 0 auto 55px;

  text-align: center;
}

.solutions-page .section-heading h2 {
  margin: 0 0 18px;

  color: var(--solution-navy);

  font-size: clamp(34px, 4vw, 52px);

  line-height: 1.1;
}

.solutions-page .section-heading h2 span {
  display: block;
}

.solutions-page .section-heading p {
  max-width: 650px;

  margin: 0 auto;

  color: var(--solution-muted);

  font-size: 15px;
  line-height: 1.8;
}

/* BENEFIT GRID */

.solutions-page .solution-benefit-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 18px;
}

.solutions-page .solution-benefit-card {
  position: relative;

  min-height: 280px;

  padding: 28px;

  overflow: hidden;

  border: 1px solid var(--solution-border);

  border-radius: 18px;

  background: #ffffff;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.solutions-page .solution-benefit-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 3px;

  background: linear-gradient(90deg, var(--solution-blue), transparent);

  opacity: 0;

  transition: opacity 0.3s ease;
}

.solutions-page .solution-benefit-card:hover {
  transform: translateY(-7px);

  border-color: rgba(23, 105, 255, 0.2);

  box-shadow: 0 25px 55px rgba(8, 26, 51, 0.09);
}

.solutions-page .solution-benefit-card:hover::before {
  opacity: 1;
}

.solutions-page .solution-benefit-number {
  position: absolute;

  top: 24px;
  right: 24px;

  color: #cbd5e1;

  font-size: 10px;
  font-weight: 800;
}

.solutions-page .solution-benefit-icon {
  width: 50px;
  height: 50px;

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

  margin-bottom: 28px;

  border-radius: 14px;

  font-size: 20px;
}

.solutions-page .solution-benefit-icon.blue {
  color: var(--solution-blue);

  background: #eaf2ff;
}

.solutions-page .solution-benefit-icon.purple {
  color: var(--solution-purple);

  background: #f1eaff;
}

.solutions-page .solution-benefit-icon.green {
  color: var(--solution-green);

  background: #e5f8f0;
}

.solutions-page .solution-benefit-icon.orange {
  color: var(--solution-orange);

  background: #fff5df;
}

.solutions-page .solution-benefit-card h3 {
  margin: 0 0 10px;

  color: var(--solution-navy);

  font-size: 17px;
}

.solutions-page .solution-benefit-card p {
  margin: 0;

  color: var(--solution-muted);

  font-size: 12px;
  line-height: 1.7;
}

/* =========================================================
   PRODUCTS
========================================================= */

.solutions-page .solution-products {
  padding: 110px 0;

  background: linear-gradient(180deg, #f7f9fc, #ffffff);
}

.solutions-page .solution-product-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;
}

.solutions-page .solution-product-card {
  display: grid;

  grid-template-columns:
    auto minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 17px;

  min-height: 185px;

  padding: 25px;

  border: 1px solid var(--solution-border);

  border-radius: 18px;

  color: var(--solution-navy);

  background: #ffffff;

  box-shadow: 0 10px 30px rgba(8, 26, 51, 0.04);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.solutions-page .solution-product-card:hover {
  transform: translateY(-6px);

  border-color: rgba(23, 105, 255, 0.2);

  box-shadow: 0 25px 55px rgba(8, 26, 51, 0.09);
}

.solutions-page .solution-product-icon {
  width: 50px;
  height: 50px;

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

  align-self: start;

  border-radius: 14px;

  font-size: 21px;
}

.solutions-page .solution-product-icon.blue {
  background: #eaf2ff;
}

.solutions-page .solution-product-icon.purple {
  background: #f1eaff;
}

.solutions-page .solution-product-icon.green {
  background: #e5f8f0;
}

.solutions-page .solution-product-card > div > span {
  display: block;

  margin-bottom: 6px;

  color: var(--solution-blue);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.13em;
}

.solutions-page .solution-product-card h3 {
  margin: 0 0 7px;

  color: var(--solution-navy);

  font-size: 17px;
}

.solutions-page .solution-product-card p {
  margin: 0;

  color: var(--solution-muted);

  font-size: 11px;
  line-height: 1.6;
}

.solutions-page .solution-product-card > strong {
  color: var(--solution-blue);

  font-size: 20px;

  transition: transform 0.25s ease;
}

.solutions-page .solution-product-card:hover > strong {
  transform: translateX(5px);
}

/* =========================================================
   FINAL CTA
========================================================= */

.solutions-page .solution-cta {
  position: relative;

  padding: 120px 0;

  overflow: hidden;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(23, 105, 255, 0.35),
      transparent 30%
    ),
    linear-gradient(135deg, #06152b, #0b2850);
}

.solutions-page .solution-cta .resource-cta-grid {
  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.35;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);

  background-size: 48px 48px;
}

.solutions-page .resource-cta-content {
  position: relative;
  z-index: 2;

  max-width: 780px;

  margin: 0 auto;

  text-align: center;
}

.solutions-page .resource-cta-mark {
  width: 58px;
  height: 58px;

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

  margin: 0 auto 25px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 16px;

  color: #ffffff;

  background: rgba(255, 255, 255, 0.08);

  font-size: 20px;
  font-weight: 800;
}

.solutions-page .solution-cta .eyebrow {
  color: #73a5ff;
}

.solutions-page .resource-cta-content h2 {
  margin: 0 0 20px;

  color: #ffffff;

  font-size: clamp(38px, 5vw, 62px);

  line-height: 1.08;
}

.solutions-page .resource-cta-content h2 span {
  display: block;

  color: #70a0ff;
}

.solutions-page .resource-cta-content > p {
  max-width: 650px;

  margin: 0 auto 30px;

  color: rgba(255, 255, 255, 0.66);

  font-size: 15px;
  line-height: 1.8;
}

.solutions-page .resource-cta-actions {
  display: flex;
  justify-content: center;
  align-items: center;

  flex-wrap: wrap;

  gap: 22px;
}

.solutions-page .resource-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #ffffff;

  font-size: 13px;
  font-weight: 700;
}

.solutions-page .resource-cta-link span {
  transition: transform 0.25s ease;
}

.solutions-page .resource-cta-link:hover span {
  transform: translateX(5px);
}

/* =========================================================
   REVEAL ANIMATION
========================================================= */

.solutions-page .reveal {
  opacity: 0;

  transform: translateY(25px);

  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}

.solutions-page .reveal.revealed {
  opacity: 1;

  transform: translateY(0);
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .solutions-page *,
  .solutions-page *::before,
  .solutions-page *::after {
    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;
  }

  .solutions-page .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (max-width: 1200px) {
  .solutions-page .resource-hero-container {
    gap: 45px;
  }

  .solutions-page .solution-detail {
    gap: 60px;
  }

  .solutions-page .solution-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {
  /* HERO */

  .solutions-page .solutions-hero {
    min-height: auto;

    padding: 130px 0 80px;
  }

  .solutions-page .resource-hero-container {
    grid-template-columns: 1fr;

    gap: 65px;
  }

  .solutions-page .resource-hero-content {
    max-width: 750px;

    margin: 0 auto;

    text-align: center;
  }

  .solutions-page .resource-hero-actions {
    justify-content: center;
  }

  .solutions-page .resource-hero-meta {
    margin: 0 auto;

    text-align: left;
  }

  .solutions-page .resource-hero-visual {
    min-height: 470px;
  }

  /* INTRO */

  .solutions-page .resource-intro-grid {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  /* CATEGORY */

  .solutions-page .solution-category-grid {
    grid-template-columns: 1fr;
  }

  /* SOLUTION DETAILS */

  .solutions-page .solution-detail,
  .solutions-page .solution-detail.reverse {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .solutions-page .solution-detail.reverse .solution-detail-content {
    order: 1;
  }

  .solutions-page .solution-detail.reverse .solution-detail-visual {
    order: 2;
  }

  .solutions-page .solution-detail-content {
    max-width: 750px;
  }

  /* PRODUCTS */

  .solutions-page .solution-product-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  /* GENERAL */

  .solutions-page .eyebrow {
    margin-bottom: 13px;

    font-size: 10px;
  }

  /* HERO */

  .solutions-page .solutions-hero {
    padding: 110px 0 65px;
  }

  .solutions-page .resource-hero-content h1 {
    font-size: clamp(38px, 11vw, 52px);
  }

  .solutions-page .resource-hero-content > p {
    font-size: 15px;

    line-height: 1.7;
  }

  .solutions-page .resource-hero-actions {
    flex-direction: column;

    width: 100%;
  }

  .solutions-page .resource-hero-actions .btn {
    width: 100%;

    justify-content: center;
  }

  .solutions-page .resource-hero-meta {
    grid-template-columns: 1fr;

    gap: 16px;
  }

  .solutions-page .resource-hero-meta-item {
    padding: 0 0 16px;

    border-right: 0;

    border-bottom: 1px solid rgba(8, 26, 51, 0.1);
  }

  .solutions-page .resource-hero-meta-item:last-child {
    padding-bottom: 0;

    border-bottom: 0;
  }

  /* DASHBOARD */

  .solutions-page .resource-hero-visual {
    min-height: 430px;
  }

  .solutions-page .solution-dashboard {
    width: 100%;

    border-radius: 18px;

    transform: none;
  }

  .solutions-page .solution-dashboard:hover {
    transform: translateY(-4px);
  }

  .solutions-page .solution-dashboard-body {
    padding: 18px;
  }

  .solutions-page .solution-dashboard-header {
    padding: 16px;
  }

  .solutions-page .solution-dashboard-status {
    display: none;
  }

  .solutions-page .solution-dashboard-title h3 {
    font-size: 19px;
  }

  .solutions-page .solution-preview-card {
    grid-template-columns: 38px minmax(0, 1fr) auto;

    padding: 11px;
  }

  .solutions-page .solution-preview-icon {
    width: 38px;
    height: 38px;
  }

  /* INTRO */

  .solutions-page .resource-intro {
    padding: 75px 0 60px;
  }

  .solutions-page .resource-intro-heading h2 {
    font-size: 35px;
  }

  .solutions-page .resource-intro-content p {
    font-size: 14px;
  }

  /* CATEGORY */

  .solutions-page .solution-category-section {
    padding-bottom: 70px;
  }

  .solutions-page .solution-category-card {
    grid-template-columns: auto 45px minmax(0, 1fr);

    min-height: 100px;

    padding: 17px;
  }

  /* SOLUTIONS */

  .solutions-page .solution-list-section {
    padding: 75px 0;
  }

  .solutions-page .solution-detail {
    padding: 65px 0;
  }

  .solutions-page .solution-detail:first-child {
    padding-top: 0;
  }

  .solutions-page .solution-detail-content h2 {
    font-size: 35px;
  }

  .solutions-page .solution-detail-content > p {
    font-size: 14px;
  }

  /* VISUAL */

  .solutions-page .solution-detail-visual {
    min-height: 420px;
  }

  .solutions-page .solution-number {
    font-size: 100px;

    top: 0;
    right: 0;
  }

  .solutions-page .solution-visual-card {
    min-height: 380px;

    padding: 23px;

    border-radius: 20px;
  }

  .solutions-page .solution-visual-main {
    padding: 35px 0;
  }

  .solutions-page .solution-visual-main h3 {
    font-size: 30px;
  }

  .solutions-page .solution-big-icon {
    width: 58px;
    height: 58px;

    font-size: 26px;
  }

  /* BENEFITS */

  .solutions-page .solution-benefits {
    padding: 80px 0;
  }

  .solutions-page .section-heading {
    margin-bottom: 40px;
  }

  .solutions-page .section-heading h2 {
    font-size: 35px;
  }

  .solutions-page .section-heading p {
    font-size: 14px;
  }

  .solutions-page .solution-benefit-grid {
    grid-template-columns: 1fr;
  }

  .solutions-page .solution-benefit-card {
    min-height: 245px;
  }

  /* PRODUCTS */

  .solutions-page .solution-products {
    padding: 80px 0;
  }

  .solutions-page .solution-product-card {
    grid-template-columns: auto minmax(0, 1fr);

    padding: 20px;
  }

  .solutions-page .solution-product-card > strong {
    display: none;
  }

  /* CTA */

  .solutions-page .solution-cta {
    padding: 85px 0;
  }

  .solutions-page .resource-cta-content h2 {
    font-size: 39px;
  }

  .solutions-page .resource-cta-content > p {
    font-size: 14px;
  }

  .solutions-page .resource-cta-actions {
    flex-direction: column;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .solutions-page .solutions-hero {
    padding-top: 100px;
  }

  .solutions-page .resource-hero-content h1 {
    font-size: 38px;
  }

  .solutions-page .resource-hero-visual {
    min-height: 390px;
  }

  .solutions-page .solution-dashboard-footer {
    padding: 10px 15px;

    font-size: 7px;
  }

  .solutions-page .solution-dashboard-brand strong {
    font-size: 11px;
  }

  .solutions-page .solution-dashboard-title h3 {
    font-size: 17px;
  }

  .solutions-page .solution-preview-card strong {
    font-size: 11px;
  }

  .solutions-page .solution-preview-card small {
    font-size: 8px;
  }

  .solutions-page .solution-category-card {
    grid-template-columns: 25px 40px minmax(0, 1fr);

    gap: 10px;

    padding: 14px;
  }

  .solutions-page .solution-category-icon {
    width: 40px;
    height: 40px;

    font-size: 17px;
  }

  .solutions-page .solution-category-card strong {
    font-size: 12px;
  }

  .solutions-page .solution-category-card small {
    font-size: 9px;
  }

  .solutions-page .solution-detail-content h2 {
    font-size: 32px;
  }

  .solutions-page .solution-feature {
    grid-template-columns: 30px minmax(0, 1fr);

    gap: 11px;
  }

  .solutions-page .solution-feature > span {
    width: 27px;
    height: 27px;
  }

  .solutions-page .solution-visual-card {
    padding: 20px;
  }

  .solutions-page .solution-stat-grid {
    gap: 5px;
  }

  .solutions-page .solution-stat-grid > div {
    padding: 10px 7px;
  }

  .solutions-page .solution-stat-grid strong {
    font-size: 8px;
  }

  .solutions-page .solution-stat-grid small {
    font-size: 7px;
  }

  .solutions-page .resource-cta-content h2 {
    font-size: 34px;
  }
}

/* =========================================================
   PRINT
========================================================= */

@media print {
  .solutions-page .solutions-hero,
  .solutions-page .solution-cta {
    color: #000;

    background: #fff;
  }

  .solutions-page .resource-hero-grid,
  .solutions-page .resource-visual-glow,
  .solutions-page .solution-number,
  .solutions-page .resource-cta-grid {
    display: none;
  }

  .solutions-page .reveal {
    opacity: 1;

    transform: none;
  }
}

/* =========================================================
   KAMAL GROUP OF CORPORATE
   PRODUCTS PAGE
   Complete Products Page Stylesheet
========================================================= */

/* =========================================================
   01. PRODUCTS PAGE VARIABLES
========================================================= */

.products-page {
  --product-navy: #081a33;
  --product-navy-2: #0d2748;
  --product-blue: #1769e0;
  --product-blue-dark: #0e56c7;
  --product-blue-light: #eaf3ff;

  --product-purple: #7357d8;
  --product-purple-light: #f1edff;

  --product-green: #16966a;
  --product-green-light: #e8f8f1;

  --product-orange: #e77b32;
  --product-orange-light: #fff1e7;

  --product-white: #ffffff;
  --product-bg: #f7f9fc;
  --product-bg-2: #f1f5fa;

  --product-text: #10233f;
  --product-text-light: #53647a;
  --product-muted: #7b899b;

  --product-border: #dfe6ef;
  --product-border-light: #e9eef5;

  --product-shadow-sm: 0 8px 25px rgba(8, 26, 51, 0.06);

  --product-shadow: 0 20px 60px rgba(8, 26, 51, 0.09);

  --product-shadow-lg: 0 30px 90px rgba(8, 26, 51, 0.13);

  --product-radius-sm: 10px;
  --product-radius: 18px;
  --product-radius-lg: 28px;

  --product-container: 1240px;
}

/* =========================================================
   02. PAGE BASE
========================================================= */

.products-page {
  background: var(--product-white);
  color: var(--product-text);
  overflow-x: hidden;
}

.products-page *,
.products-page *::before,
.products-page *::after {
  box-sizing: border-box;
}

.products-page img {
  max-width: 100%;
}

.products-page a {
  text-decoration: none;
}

.products-page button {
  font-family: inherit;
}

.products-page .container {
  width: min(calc(100% - 48px), var(--product-container));
  margin-inline: auto;
}

/* =========================================================
   03. COMMON BUTTON OVERRIDES
========================================================= */

.products-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 48px;
  padding: 0 22px;

  border-radius: 10px;

  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;

  line-height: 1;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.products-page .btn:hover {
  transform: translateY(-2px);
}

.products-page .btn-large {
  min-height: 54px;
  padding: 0 26px;
}

.products-page .btn-primary {
  background: var(--product-blue);
  color: #fff;
  box-shadow: 0 10px 25px rgba(23, 105, 224, 0.2);
}

.products-page .btn-primary:hover {
  background: var(--product-blue-dark);
  box-shadow: 0 15px 32px rgba(23, 105, 224, 0.28);
}

.products-page .btn-secondary {
  background: #fff;
  color: var(--product-navy);
  border: 1px solid var(--product-border);
}

.products-page .btn-secondary:hover {
  border-color: var(--product-blue);
  color: var(--product-blue);
}

.products-page .btn-light {
  background: #fff;
  color: var(--product-navy);
}

.products-page .btn-light:hover {
  background: #eef5ff;
}

/* =========================================================
   04. HEADER COMPATIBILITY
   Keeps Products page compatible with global navigation.css
========================================================= */

.products-page .site-header {
  position: relative;
  z-index: 1000;
}

.products-page .site-header.scrolled {
  box-shadow: 0 10px 35px rgba(8, 26, 51, 0.08);
}

/* =========================================================
   05. PRODUCTS HERO
========================================================= */

.products-page .products-hero {
  position: relative;

  min-height: 720px;
  padding: 110px 0 100px;

  display: flex;
  align-items: center;

  background:
    radial-gradient(
      circle at 75% 35%,
      rgba(23, 105, 224, 0.13),
      transparent 32%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(115, 87, 216, 0.07),
      transparent 30%
    ),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);

  overflow: hidden;
}

.products-page .products-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(90deg, rgba(8, 26, 51, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(8, 26, 51, 0.025) 1px, transparent 1px);

  background-size: 48px 48px;

  pointer-events: none;

  mask-image: linear-gradient(90deg, black, transparent 85%);
}

.products-page .resource-hero-grid {
  position: absolute;
  inset: 0;

  opacity: 0.5;

  pointer-events: none;
}

.products-page .resource-hero-container {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(480px, 0.9fr);

  align-items: center;

  gap: 80px;
}

/* =========================================================
   06. HERO CONTENT
========================================================= */

.products-page .resource-hero-content {
  max-width: 650px;
}

.products-page .resource-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 22px;

  color: var(--product-muted);

  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.16em;
}

.products-page .resource-label-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  border-radius: 8px;

  background: var(--product-navy);
  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.products-page .eyebrow {
  display: inline-block;

  margin-bottom: 15px;

  color: var(--product-blue);

  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.products-page .resource-hero-content h1 {
  max-width: 650px;

  margin: 0;

  color: var(--product-navy);

  font-family: "Manrope", sans-serif;
  font-size: clamp(48px, 5.4vw, 78px);
  font-weight: 800;

  line-height: 0.98;
  letter-spacing: -0.055em;
}

.products-page .resource-hero-content h1 span {
  display: block;

  color: var(--product-blue);
}

.products-page .resource-hero-content > p {
  max-width: 620px;

  margin: 28px 0 0;

  color: var(--product-text-light);

  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.75;
}

.products-page .resource-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;

  margin-top: 32px;
}

/* =========================================================
   07. HERO META
========================================================= */

.products-page .resource-hero-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  max-width: 620px;

  margin-top: 48px;

  border-top: 1px solid var(--product-border);
  padding-top: 22px;
}

.products-page .resource-hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 5px;

  padding-right: 20px;
}

.products-page .resource-hero-meta-item + .resource-hero-meta-item {
  padding-left: 20px;
  border-left: 1px solid var(--product-border);
}

.products-page .resource-hero-meta-item strong {
  color: var(--product-navy);

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.products-page .resource-hero-meta-item span {
  color: var(--product-muted);

  font-family: "Inter", sans-serif;
  font-size: 11px;
  line-height: 1.4;
}

/* =========================================================
   08. HERO PRODUCT DASHBOARD
========================================================= */

.products-page .resource-hero-visual {
  position: relative;

  min-width: 0;
}

.products-page .resource-visual-glow {
  position: absolute;

  width: 500px;
  height: 500px;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(23, 105, 224, 0.18),
    rgba(23, 105, 224, 0.04) 45%,
    transparent 70%
  );

  filter: blur(10px);

  pointer-events: none;
}

.products-page .product-dashboard {
  position: relative;

  width: 100%;
  max-width: 540px;

  margin-left: auto;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.8);

  border-radius: 24px;

  background: linear-gradient(145deg, #102b4e 0%, #081a33 100%);

  box-shadow:
    0 40px 90px rgba(8, 26, 51, 0.22),
    0 10px 30px rgba(8, 26, 51, 0.12);

  transform: perspective(1400px) rotateY(-4deg) rotateX(2deg);

  transition:
    transform 0.5s ease,
    box-shadow 0.5s ease;
}

.products-page .product-dashboard:hover {
  transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateY(-5px);

  box-shadow:
    0 50px 100px rgba(8, 26, 51, 0.25),
    0 15px 40px rgba(8, 26, 51, 0.15);
}

/* =========================================================
   09. DASHBOARD HEADER
========================================================= */

.products-page .product-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 20px 22px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.products-page .product-dashboard-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.products-page .product-dashboard-logo {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 35px;
  height: 35px;

  border-radius: 9px;

  background: #fff;
  color: var(--product-navy);

  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.products-page .product-dashboard-brand div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.products-page .product-dashboard-brand small {
  color: rgba(255, 255, 255, 0.52);

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.12em;
}

.products-page .product-dashboard-brand strong {
  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.products-page .product-dashboard-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: rgba(255, 255, 255, 0.62);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.1em;
}

.products-page .product-dashboard-status span {
  color: #43d39e;
  font-size: 8px;
}

/* =========================================================
   10. DASHBOARD BODY
========================================================= */

.products-page .product-dashboard-body {
  padding: 30px;
}

.products-page .product-dashboard-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  margin-bottom: 25px;
}

.products-page .product-dashboard-title small {
  display: block;

  margin-bottom: 8px;

  color: rgba(255, 255, 255, 0.45);

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.13em;
}

.products-page .product-dashboard-title h3 {
  margin: 0;

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 30px;
  font-weight: 800;

  line-height: 1.05;
  letter-spacing: -0.04em;
}

.products-page .product-dashboard-title h3 span {
  color: #5fa1ff;
}

.products-page .product-dashboard-mark {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 14px;

  color: rgba(255, 255, 255, 0.3);

  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 800;
}

/* =========================================================
   11. PRODUCT PREVIEW CARDS
========================================================= */

.products-page .product-preview-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;

  gap: 13px;

  padding: 14px;

  margin-top: 10px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 13px;

  background: rgba(255, 255, 255, 0.055);

  transition:
    background 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
}

.products-page .product-preview-card:hover {
  background: rgba(255, 255, 255, 0.09);

  border-color: rgba(255, 255, 255, 0.15);

  transform: translateX(4px);
}

.products-page .product-preview-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  border-radius: 12px;

  font-size: 20px;
}

.products-page .product-preview-icon.blue {
  background: rgba(23, 105, 224, 0.18);
}

.products-page .product-preview-icon.purple {
  background: rgba(115, 87, 216, 0.18);
}

.products-page .product-preview-icon.green {
  background: rgba(22, 150, 106, 0.18);
  color: #55d9a9;
}

.products-page .product-preview-card > div:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.products-page .product-preview-card strong {
  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.products-page .product-preview-card small {
  color: rgba(255, 255, 255, 0.45);

  font-size: 10px;
}

.products-page .product-preview-card > span:last-child {
  color: rgba(255, 255, 255, 0.4);

  font-size: 18px;
}

/* =========================================================
   12. DASHBOARD NOTE
========================================================= */

.products-page .product-preview-note {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-top: 18px;
  padding: 14px;

  border-radius: 13px;

  background: rgba(23, 105, 224, 0.1);
  border: 1px solid rgba(23, 105, 224, 0.16);
}

.products-page .product-note-icon {
  color: #5fa1ff;
  font-size: 17px;
}

.products-page .product-preview-note div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.products-page .product-preview-note strong {
  color: #fff;
  font-size: 11px;
}

.products-page .product-preview-note small {
  color: rgba(255, 255, 255, 0.43);
  font-size: 9px;
  line-height: 1.4;
}

/* =========================================================
   13. DASHBOARD FOOTER
========================================================= */

.products-page .product-dashboard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 13px 22px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  color: rgba(255, 255, 255, 0.32);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.15em;
}

/* =========================================================
   14. INTRO SECTION
========================================================= */

.products-page .resource-intro {
  padding: 115px 0;

  background: #fff;
}

.products-page .resource-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

  gap: 100px;

  align-items: start;
}

.products-page .resource-intro-heading h2 {
  max-width: 520px;

  margin: 0;

  color: var(--product-navy);

  font-family: "Manrope", sans-serif;
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 800;

  line-height: 1.03;
  letter-spacing: -0.045em;
}

.products-page .resource-intro-heading h2 span {
  display: block;
  color: var(--product-blue);
}

.products-page .resource-intro-content {
  padding-top: 32px;
}

.products-page .resource-intro-content p {
  max-width: 650px;

  margin: 0;

  color: var(--product-text-light);

  font-family: "Inter", sans-serif;
  font-size: 16px;

  line-height: 1.85;
}

.products-page .resource-intro-content p + p {
  margin-top: 22px;
}

/* =========================================================
   15. PRODUCT CATEGORY SECTION
========================================================= */

.products-page .product-category-section {
  padding: 0 0 80px;

  background: #fff;
}

.products-page .product-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  border-top: 1px solid var(--product-border);
  border-bottom: 1px solid var(--product-border);
}

.products-page .product-category-card {
  position: relative;

  display: grid;
  grid-template-columns: auto 54px 1fr;
  align-items: center;

  gap: 16px;

  min-height: 120px;

  padding: 20px 25px;

  color: var(--product-text);

  border-right: 1px solid var(--product-border);

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.products-page .product-category-card:last-child {
  border-right: 0;
}

.products-page .product-category-card:hover,
.products-page .product-category-card.active {
  background: #f8fbff;
}

.products-page .product-category-card.active::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: -1px;

  height: 3px;

  background: var(--product-blue);
}

.products-page .product-category-number {
  align-self: start;

  color: #a6b1c0;

  font-family: "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 800;
}

.products-page .product-category-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;

  border-radius: 15px;

  font-size: 22px;
}

.products-page .product-category-icon.blue {
  background: var(--product-blue-light);
}

.products-page .product-category-icon.purple {
  background: var(--product-purple-light);
}

.products-page .product-category-icon.green {
  background: var(--product-green-light);
}

.products-page .product-category-card div:last-child {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.products-page .product-category-card strong {
  color: var(--product-navy);

  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.products-page .product-category-card small {
  color: var(--product-muted);

  font-size: 11px;
  line-height: 1.4;
}

/* =========================================================
   16. PRODUCT LIST SECTION
========================================================= */

.products-page .product-list-section {
  padding: 80px 0 120px;

  background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
}

.products-page .product-detail {
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(440px, 0.9fr);

  gap: 100px;

  align-items: center;

  padding: 105px 0;

  border-bottom: 1px solid var(--product-border);
}

.products-page .product-detail:last-child {
  border-bottom: 0;
}

.products-page .product-detail.reverse {
  grid-template-columns:
    minmax(440px, 0.9fr)
    minmax(0, 1fr);
}

.products-page .product-detail.reverse .product-detail-content {
  order: 2;
}

.products-page .product-detail.reverse .product-detail-visual {
  order: 1;
}

.products-page .product-detail-content {
  max-width: 650px;
}

.products-page .product-detail-content h2 {
  margin: 0;

  color: var(--product-navy);

  font-family: "Manrope", sans-serif;
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 800;

  line-height: 1.04;
  letter-spacing: -0.045em;
}

.products-page .product-detail-content h2 span {
  display: block;
  color: var(--product-blue);
}

.products-page .product-detail:nth-child(2) .product-detail-content h2 span {
  color: var(--product-purple);
}

.products-page .product-detail:nth-child(3) .product-detail-content h2 span {
  color: var(--product-green);
}

.products-page .product-detail-content > p {
  margin: 24px 0 0;

  color: var(--product-text-light);

  font-family: "Inter", sans-serif;
  font-size: 15px;

  line-height: 1.8;
}

.products-page .product-detail-content > p + p {
  margin-top: 15px;
}

/* =========================================================
   17. PRODUCT FEATURE LIST
========================================================= */

.products-page .product-feature-list {
  display: flex;
  flex-direction: column;

  margin-top: 32px;
}

.products-page .product-feature {
  display: grid;
  grid-template-columns: 36px 1fr;

  gap: 15px;

  padding: 16px 0;

  border-top: 1px solid var(--product-border);
}

.products-page .product-feature:last-child {
  border-bottom: 1px solid var(--product-border);
}

.products-page .product-feature > span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  border-radius: 8px;

  background: var(--product-bg-2);

  color: var(--product-blue);

  font-family: "Manrope", sans-serif;
  font-size: 9px;
  font-weight: 800;
}

.products-page .product-feature > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.products-page .product-feature strong {
  color: var(--product-navy);

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.products-page .product-feature small {
  max-width: 500px;

  color: var(--product-muted);

  font-size: 11px;
  line-height: 1.6;
}

.products-page .product-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 28px;

  color: var(--product-blue);

  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;

  transition:
    gap 0.25s ease,
    color 0.25s ease;
}

.products-page .product-detail-link:hover {
  gap: 15px;
  color: var(--product-blue-dark);
}

/* =========================================================
   18. PRODUCT VISUAL
========================================================= */

.products-page .product-detail-visual {
  position: relative;

  min-width: 0;
}

.products-page .product-number {
  position: absolute;

  top: -55px;
  right: -15px;

  color: rgba(8, 26, 51, 0.055);

  font-family: "Manrope", sans-serif;
  font-size: 150px;
  font-weight: 800;

  line-height: 1;

  pointer-events: none;
}

.products-page .product-visual-card {
  position: relative;

  min-height: 500px;

  padding: 26px;

  overflow: hidden;

  border-radius: 28px;

  color: #fff;

  box-shadow: var(--product-shadow-lg);
}

.products-page .product-visual-card.blue {
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(95, 161, 255, 0.25),
      transparent 30%
    ),
    linear-gradient(145deg, #1769e0, #0c4ea9);
}

.products-page .product-visual-card.purple {
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(204, 186, 255, 0.22),
      transparent 30%
    ),
    linear-gradient(145deg, #7357d8, #5138ac);
}

.products-page .product-visual-card.green {
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(117, 239, 190, 0.2),
      transparent 30%
    ),
    linear-gradient(145deg, #16966a, #08734f);
}

.products-page .product-visual-card::before {
  content: "";

  position: absolute;

  width: 280px;
  height: 280px;

  right: -130px;
  bottom: -140px;

  border: 1px solid rgba(255, 255, 255, 0.13);

  border-radius: 50%;
}

.products-page .product-visual-card::after {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  right: -70px;
  bottom: -90px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 50%;
}

/* =========================================================
   19. PRODUCT VISUAL HEADER
========================================================= */

.products-page .product-visual-top {
  position: relative;
  z-index: 2;

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

  color: rgba(255, 255, 255, 0.58);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.15em;
}

/* =========================================================
   20. PRODUCT VISUAL MAIN
========================================================= */

.products-page .product-visual-main {
  position: relative;
  z-index: 2;

  padding-top: 80px;
}

.products-page .product-big-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 78px;
  height: 78px;

  margin-bottom: 28px;

  border: 1px solid rgba(255, 255, 255, 0.18);

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(10px);

  font-size: 32px;
}

.products-page .product-visual-main h3 {
  max-width: 360px;

  margin: 0;

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 48px;
  font-weight: 800;

  line-height: 0.98;
  letter-spacing: -0.045em;
}

.products-page .product-visual-main h3 span {
  display: block;

  color: rgba(255, 255, 255, 0.55);
}

.products-page .product-visual-main p {
  max-width: 340px;

  margin: 20px 0 0;

  color: rgba(255, 255, 255, 0.62);

  font-size: 13px;
  line-height: 1.65;
}

/* =========================================================
   21. PRODUCT STATS
========================================================= */

.products-page .product-stat-grid {
  position: absolute;

  z-index: 3;

  left: 26px;
  right: 26px;
  bottom: 26px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  border-top: 1px solid rgba(255, 255, 255, 0.17);
  padding-top: 18px;
}

.products-page .product-stat-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.products-page .product-stat-grid > div + div {
  padding-left: 18px;

  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.products-page .product-stat-grid strong {
  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.products-page .product-stat-grid small {
  color: rgba(255, 255, 255, 0.48);

  font-size: 9px;
}

/* =========================================================
   22. BENEFITS SECTION
========================================================= */

.products-page .product-benefits {
  padding: 120px 0;

  background: #fff;
}

.products-page .section-heading {
  max-width: 720px;

  margin: 0 auto 60px;

  text-align: center;
}

.products-page .section-heading h2 {
  margin: 0;

  color: var(--product-navy);

  font-family: "Manrope", sans-serif;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 800;

  line-height: 1.05;
  letter-spacing: -0.045em;
}

.products-page .section-heading h2 span {
  display: block;
  color: var(--product-blue);
}

.products-page .section-heading p {
  max-width: 650px;

  margin: 22px auto 0;

  color: var(--product-text-light);

  font-size: 15px;
  line-height: 1.8;
}

.products-page .product-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 18px;
}

.products-page .product-benefit-card {
  position: relative;

  min-height: 290px;

  padding: 28px;

  border: 1px solid var(--product-border);

  border-radius: 18px;

  background: #fff;

  overflow: hidden;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.products-page .product-benefit-card:hover {
  transform: translateY(-7px);

  border-color: #d1dce9;

  box-shadow: var(--product-shadow);
}

.products-page .product-benefit-number {
  position: absolute;

  top: 22px;
  right: 24px;

  color: #dce3eb;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.products-page .product-benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  margin-bottom: 35px;

  border-radius: 14px;

  font-size: 21px;
}

.products-page .product-benefit-icon.blue {
  background: var(--product-blue-light);
  color: var(--product-blue);
}

.products-page .product-benefit-icon.purple {
  background: var(--product-purple-light);
  color: var(--product-purple);
}

.products-page .product-benefit-icon.green {
  background: var(--product-green-light);
  color: var(--product-green);
}

.products-page .product-benefit-icon.orange {
  background: var(--product-orange-light);
  color: var(--product-orange);
}

.products-page .product-benefit-card h3 {
  margin: 0;

  color: var(--product-navy);

  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.products-page .product-benefit-card p {
  margin: 12px 0 0;

  color: var(--product-text-light);

  font-size: 12px;
  line-height: 1.7;
}

/* =========================================================
   23. PRODUCT OVERVIEW
========================================================= */

.products-page .product-overview {
  padding: 120px 0;

  background: var(--product-bg);
}

.products-page .product-overview-table {
  width: 100%;

  overflow: hidden;

  border: 1px solid var(--product-border);

  border-radius: 18px;

  background: #fff;

  box-shadow: var(--product-shadow-sm);
}

.products-page .product-overview-row {
  display: grid;
  grid-template-columns:
    1.2fr
    1.25fr
    1.25fr
    0.75fr;

  align-items: center;

  min-height: 84px;

  border-top: 1px solid var(--product-border);
}

.products-page .product-overview-row:first-child {
  border-top: 0;
}

.products-page .product-overview-row > div {
  min-width: 0;

  padding: 18px 20px;

  color: var(--product-text-light);

  font-size: 12px;
  line-height: 1.5;
}

.products-page .product-overview-head {
  min-height: 56px;

  background: var(--product-navy);
}

.products-page .product-overview-head > div {
  color: rgba(255, 255, 255, 0.68);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.12em;
}

.products-page .product-overview-product {
  display: flex;
  align-items: center;
  gap: 11px;
}

.products-page .product-overview-product strong {
  color: var(--product-navy);

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.products-page .product-table-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  border-radius: 10px;

  font-size: 16px;
}

.products-page .product-table-icon.blue {
  background: var(--product-blue-light);
}

.products-page .product-table-icon.purple {
  background: var(--product-purple-light);
}

.products-page .product-overview-row a {
  color: var(--product-blue);

  font-size: 12px;
  font-weight: 800;

  transition: color 0.2s ease;
}

.products-page .product-overview-row a:hover {
  color: var(--product-blue-dark);
}

/* =========================================================
   24. PRODUCT CTA
========================================================= */

.products-page .product-cta {
  position: relative;

  padding: 120px 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 80% 40%,
      rgba(23, 105, 224, 0.18),
      transparent 30%
    ),
    linear-gradient(135deg, #081a33 0%, #0d294c 100%);
}

.products-page .resource-cta-grid {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);

  background-size: 45px 45px;

  opacity: 0.35;
}

.products-page .resource-cta-content {
  position: relative;
  z-index: 2;

  max-width: 850px;

  margin: 0 auto;

  text-align: center;
}

.products-page .resource-cta-mark {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;

  margin: 0 auto 25px;

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 15px;

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 19px;
  font-weight: 800;
}

.products-page .product-cta .eyebrow {
  color: #71a9ff;
}

.products-page .resource-cta-content h2 {
  margin: 0;

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 800;

  line-height: 1.02;
  letter-spacing: -0.045em;
}

.products-page .resource-cta-content h2 span {
  display: block;
  color: #67a6ff;
}

.products-page .resource-cta-content > p {
  max-width: 650px;

  margin: 24px auto 0;

  color: rgba(255, 255, 255, 0.58);

  font-size: 15px;
  line-height: 1.8;
}

.products-page .resource-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 25px;

  margin-top: 34px;
}

.products-page .resource-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  color: #fff;

  font-size: 13px;
  font-weight: 800;

  transition:
    gap 0.25s ease,
    color 0.25s ease;
}

.products-page .resource-cta-link:hover {
  gap: 14px;
  color: #72aaff;
}

/* =========================================================
   25. REVEAL ANIMATION
========================================================= */

.products-page .reveal {
  opacity: 0;

  transform: translateY(25px);

  transition:
    opacity 0.75s ease,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.products-page .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   26. FOCUS STATES
========================================================= */

.products-page a:focus-visible,
.products-page button:focus-visible {
  outline: 3px solid rgba(23, 105, 224, 0.35);
  outline-offset: 4px;
}

/* =========================================================
   27. TABLET
========================================================= */

@media (max-width: 1100px) {
  .products-page .container {
    width: min(calc(100% - 40px), var(--product-container));
  }

  .products-page .resource-hero-container {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(390px, 0.85fr);

    gap: 50px;
  }

  .products-page .resource-hero-content h1 {
    font-size: clamp(44px, 5.8vw, 64px);
  }

  .products-page .resource-intro-grid {
    gap: 60px;
  }

  .products-page .product-detail {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(360px, 0.85fr);

    gap: 60px;
  }

  .products-page .product-detail.reverse {
    grid-template-columns:
      minmax(360px, 0.85fr)
      minmax(0, 1fr);
  }

  .products-page .product-visual-card {
    min-height: 460px;
  }

  .products-page .product-benefit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   28. TABLET / MOBILE NAV COMPATIBILITY
========================================================= */

@media (max-width: 900px) {
  .products-page .resource-hero {
    min-height: auto;
    padding: 90px 0 80px;
  }

  .products-page .resource-hero-container {
    grid-template-columns: 1fr;
    gap: 65px;
  }

  .products-page .resource-hero-content {
    max-width: 760px;
  }

  .products-page .product-dashboard {
    margin: 0 auto;
    transform: none;
  }

  .products-page .resource-intro {
    padding: 90px 0;
  }

  .products-page .resource-intro-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .products-page .resource-intro-content {
    padding-top: 0;
  }

  .products-page .product-category-grid {
    grid-template-columns: 1fr;
  }

  .products-page .product-category-card {
    border-right: 0;
    border-bottom: 1px solid var(--product-border);
  }

  .products-page .product-category-card:last-child {
    border-bottom: 0;
  }

  .products-page .product-detail,
  .products-page .product-detail.reverse {
    grid-template-columns: 1fr;
    gap: 55px;
    padding: 80px 0;
  }

  .products-page .product-detail.reverse .product-detail-content,
  .products-page .product-detail.reverse .product-detail-visual {
    order: initial;
  }

  .products-page .product-detail-content {
    max-width: 760px;
  }

  .products-page .product-detail-visual {
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
  }

  .products-page .product-overview-row {
    grid-template-columns:
      1.2fr
      1fr
      1fr
      0.75fr;
  }
}

/* =========================================================
   29. MOBILE
========================================================= */

@media (max-width: 700px) {
  .products-page .container {
    width: calc(100% - 32px);
  }

  /* HERO */

  .products-page .products-hero {
    padding: 70px 0 65px;
  }

  .products-page .resource-hero-content h1 {
    font-size: clamp(40px, 12vw, 58px);
    line-height: 0.99;
  }

  .products-page .resource-hero-content > p {
    margin-top: 22px;

    font-size: 15px;
    line-height: 1.7;
  }

  .products-page .resource-hero-actions {
    align-items: stretch;
    flex-direction: column;

    width: 100%;
  }

  .products-page .resource-hero-actions .btn {
    width: 100%;
  }

  .products-page .resource-hero-meta {
    grid-template-columns: 1fr;

    gap: 14px;

    margin-top: 35px;
  }

  .products-page .resource-hero-meta-item {
    padding: 0 0 14px;
    border-bottom: 1px solid var(--product-border);
  }

  .products-page .resource-hero-meta-item + .resource-hero-meta-item {
    padding-left: 0;
    border-left: 0;
  }

  .products-page .resource-hero-meta-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  /* DASHBOARD */

  .products-page .product-dashboard {
    border-radius: 18px;
  }

  .products-page .product-dashboard-header {
    padding: 16px;
  }

  .products-page .product-dashboard-body {
    padding: 20px;
  }

  .products-page .product-dashboard-title h3 {
    font-size: 25px;
  }

  .products-page .product-dashboard-mark {
    width: 40px;
    height: 40px;
  }

  .products-page .product-preview-card {
    grid-template-columns: 42px 1fr auto;
    padding: 11px;
  }

  .products-page .product-preview-icon {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .products-page .product-dashboard-footer {
    padding: 12px 16px;
  }

  /* INTRO */

  .products-page .resource-intro {
    padding: 70px 0;
  }

  .products-page .resource-intro-heading h2 {
    font-size: 37px;
  }

  /* CATEGORY */

  .products-page .product-category-section {
    padding-bottom: 55px;
  }

  .products-page .product-category-card {
    grid-template-columns: auto 48px 1fr;

    gap: 12px;

    min-height: 95px;

    padding: 16px;
  }

  .products-page .product-category-icon {
    width: 48px;
    height: 48px;
  }

  /* PRODUCT DETAILS */

  .products-page .product-list-section {
    padding: 45px 0 70px;
  }

  .products-page .product-detail,
  .products-page .product-detail.reverse {
    padding: 65px 0;

    gap: 45px;
  }

  .products-page .product-detail-content h2 {
    font-size: 36px;
  }

  .products-page .product-detail-content > p {
    font-size: 14px;
  }

  .products-page .product-number {
    top: -20px;
    right: 0;

    font-size: 95px;
  }

  .products-page .product-visual-card {
    min-height: 430px;

    padding: 21px;

    border-radius: 20px;
  }

  .products-page .product-visual-main {
    padding-top: 55px;
  }

  .products-page .product-big-icon {
    width: 64px;
    height: 64px;

    margin-bottom: 22px;

    font-size: 27px;
  }

  .products-page .product-visual-main h3 {
    font-size: 40px;
  }

  .products-page .product-stat-grid {
    left: 21px;
    right: 21px;
    bottom: 21px;
  }

  .products-page .product-stat-grid > div + div {
    padding-left: 10px;
  }

  .products-page .product-stat-grid strong {
    font-size: 9px;
  }

  .products-page .product-stat-grid small {
    font-size: 8px;
  }

  /* BENEFITS */

  .products-page .product-benefits {
    padding: 75px 0;
  }

  .products-page .section-heading {
    margin-bottom: 40px;
  }

  .products-page .section-heading h2 {
    font-size: 36px;
  }

  .products-page .section-heading p {
    font-size: 14px;
  }

  .products-page .product-benefit-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .products-page .product-benefit-card {
    min-height: 250px;
  }

  /* OVERVIEW */

  .products-page .product-overview {
    padding: 75px 0;
  }

  .products-page .product-overview-table {
    overflow-x: auto;
    border-radius: 14px;
  }

  .products-page .product-overview-row {
    min-width: 760px;

    grid-template-columns:
      1.2fr
      1.25fr
      1.25fr
      0.75fr;
  }

  /* CTA */

  .products-page .product-cta {
    padding: 80px 0;
  }

  .products-page .resource-cta-content h2 {
    font-size: 39px;
  }

  .products-page .resource-cta-content > p {
    font-size: 14px;
  }

  .products-page .resource-cta-actions {
    flex-direction: column;
    gap: 20px;
  }

  .products-page .resource-cta-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   30. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .products-page .container {
    width: calc(100% - 28px);
  }

  .products-page .products-hero {
    padding: 55px 0;
  }

  .products-page .resource-label {
    margin-bottom: 18px;
  }

  .products-page .resource-hero-content h1 {
    font-size: 42px;
  }

  .products-page .resource-hero-content > p {
    font-size: 14px;
  }

  .products-page .resource-intro-heading h2,
  .products-page .product-detail-content h2,
  .products-page .section-heading h2 {
    font-size: 33px;
  }

  .products-page .product-dashboard-title h3 {
    font-size: 23px;
  }

  .products-page .product-dashboard-title small {
    font-size: 7px;
  }

  .products-page .product-preview-card strong {
    font-size: 11px;
  }

  .products-page .product-preview-card small {
    font-size: 9px;
  }

  .products-page .product-feature {
    grid-template-columns: 30px 1fr;
    gap: 11px;
  }

  .products-page .product-feature > span {
    width: 28px;
    height: 28px;
  }

  .products-page .product-visual-card {
    min-height: 400px;
  }

  .products-page .product-visual-main h3 {
    font-size: 35px;
  }

  .products-page .product-big-icon {
    width: 58px;
    height: 58px;

    font-size: 24px;
  }

  .products-page .product-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .products-page .product-stat-grid strong {
    font-size: 8px;
  }

  .products-page .product-stat-grid small {
    font-size: 7px;
  }

  .products-page .resource-cta-content h2 {
    font-size: 34px;
  }
}

/* =========================================================
   31. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .products-page *,
  .products-page *::before,
  .products-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .products-page .reveal {
    opacity: 1;
    transform: none;
  }

  .products-page .product-dashboard {
    transform: none;
  }
}

/* =========================================================
   32. PRINT
========================================================= */

@media print {
  .products-page .site-header,
  .products-page .resource-cta,
  .products-page .site-footer {
    display: none !important;
  }

  .products-page .products-hero,
  .products-page .resource-intro,
  .products-page .product-list-section,
  .products-page .product-benefits,
  .products-page .product-overview {
    padding: 30px 0;
  }

  .products-page .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   KAMAL GROUP OF CORPORATE
   PRIVACY POLICY PAGE
   Complete stylesheet for the supplied HTML
========================================================= */

/* =========================================================
   01. PAGE VARIABLES
========================================================= */

:root {
  --privacy-navy: #081a33;
  --privacy-navy-2: #0d2748;
  --privacy-blue: #1769e0;
  --privacy-blue-dark: #0d4fb8;
  --privacy-blue-light: #eaf3ff;

  --privacy-green: #15956b;
  --privacy-green-light: #e9f9f3;

  --privacy-purple: #7658d8;
  --privacy-purple-light: #f1edff;

  --privacy-white: #ffffff;
  --privacy-bg: #f7f9fc;
  --privacy-bg-2: #f1f5fa;

  --privacy-text: #152338;
  --privacy-text-soft: #526174;
  --privacy-text-muted: #7b8797;

  --privacy-border: #e1e7ef;
  --privacy-border-dark: #cdd6e2;

  --privacy-shadow-sm: 0 8px 25px rgba(8, 26, 51, 0.06);

  --privacy-shadow: 0 20px 55px rgba(8, 26, 51, 0.1);

  --privacy-shadow-lg: 0 30px 80px rgba(8, 26, 51, 0.15);

  --privacy-radius-sm: 10px;
  --privacy-radius: 18px;
  --privacy-radius-lg: 28px;

  --privacy-container: 1240px;
}

/* =========================================================
   02. PAGE BASE
========================================================= */

body.privacy-page {
  background: var(--privacy-bg);
  color: var(--privacy-text);
}

body.privacy-page main {
  overflow: hidden;
}

body.privacy-page *,
body.privacy-page *::before,
body.privacy-page *::after {
  box-sizing: border-box;
}

body.privacy-page img {
  max-width: 100%;
}

/* =========================================================
   03. CONTAINER
========================================================= */

body.privacy-page .container {
  width: min(calc(100% - 40px), var(--privacy-container));

  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   04. ACCESSIBILITY
========================================================= */

body.privacy-page a {
  text-decoration: none;
}

body.privacy-page button {
  font: inherit;
}

/* =========================================================
   05. REVEAL ANIMATION
   IMPORTANT:
   Content is visible by default.
   This prevents the page disappearing if JS fails.
========================================================= */

body.privacy-page .reveal {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  body.privacy-page .reveal {
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px);
    transition:
      opacity 0.7s ease,
      transform 0.7s ease,
      visibility 0.7s ease;
  }

  body.privacy-page .reveal.revealed {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /*
     Safety fallback:
     If JavaScript has not initialized within a short period,
     don't permanently hide the content.
  */
  body.privacy-page.js-ready .reveal {
    opacity: 0;
    visibility: hidden;
  }

  body.privacy-page.js-ready .reveal.revealed {
    opacity: 1;
    visibility: visible;
  }
}

/* =========================================================
   06. PRIVACY HERO
========================================================= */

body.privacy-page .legal-hero {
  position: relative;

  padding: 145px 0 105px;

  min-height: 650px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 78% 25%,
      rgba(40, 111, 226, 0.2),
      transparent 32%
    ),
    radial-gradient(
      circle at 15% 85%,
      rgba(29, 111, 215, 0.12),
      transparent 35%
    ),
    linear-gradient(135deg, #06152b 0%, #081a33 50%, #0c2444 100%);

  color: #ffffff;
}

/* =========================================================
   07. HERO GRID
========================================================= */

body.privacy-page .legal-hero-grid {
  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.34;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);

  background-size: 55px 55px;

  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 25%,
    black 75%,
    transparent 100%
  );
}

/* =========================================================
   08. HERO CONTAINER
========================================================= */

body.privacy-page .legal-hero-container {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, 0.82fr);

  align-items: center;

  gap: 90px;
}

/* =========================================================
   09. HERO CONTENT
========================================================= */

body.privacy-page .legal-hero-content {
  max-width: 690px;
}

/* =========================================================
   10. LEGAL LABEL
========================================================= */

body.privacy-page .legal-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 22px;

  color: rgba(255, 255, 255, 0.72);

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.privacy-page .legal-label-mark {
  width: 30px;
  height: 30px;

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

  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;

  background: rgba(255, 255, 255, 0.08);

  color: #ffffff;

  font-size: 13px;
  font-weight: 800;
}

/* =========================================================
   11. EYEBROW
========================================================= */

body.privacy-page .legal-hero .eyebrow,
body.privacy-page .resource-cta .eyebrow {
  display: block;

  margin-bottom: 15px;

  color: #73aaff;

  font-family: "Manrope", sans-serif;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 0.17em;

  text-transform: uppercase;
}

/* =========================================================
   12. HERO TITLE
========================================================= */

body.privacy-page .legal-hero h1 {
  margin: 0;

  color: #ffffff;

  font-family: "Manrope", "Inter", sans-serif;

  font-size: clamp(48px, 6vw, 78px);

  line-height: 0.98;

  letter-spacing: -0.045em;

  font-weight: 800;
}

body.privacy-page .legal-hero h1 span {
  display: block;

  color: #5d9df6;
}

/* =========================================================
   13. HERO DESCRIPTION
========================================================= */

body.privacy-page .legal-hero-content > p {
  max-width: 650px;

  margin: 28px 0 0;

  color: rgba(255, 255, 255, 0.72);

  font-family: "Inter", sans-serif;

  font-size: 17px;

  line-height: 1.8;
}

/* =========================================================
   14. HERO META
========================================================= */

body.privacy-page .legal-meta {
  display: flex;
  flex-wrap: wrap;

  gap: 14px;

  margin-top: 34px;
}

body.privacy-page .legal-meta-item {
  min-width: 180px;

  padding: 15px 18px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.055);

  backdrop-filter: blur(10px);
}

body.privacy-page .legal-meta-item span {
  display: block;

  margin-bottom: 5px;

  color: rgba(255, 255, 255, 0.48);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}

body.privacy-page .legal-meta-item strong {
  color: #ffffff;

  font-size: 13px;

  font-weight: 700;
}

/* =========================================================
   15. HERO VISUAL
========================================================= */

body.privacy-page .legal-hero-visual {
  width: 100%;

  display: flex;
  justify-content: flex-end;

  perspective: 1000px;
}

/* =========================================================
   16. PRIVACY VISUAL CARD
========================================================= */

body.privacy-page .privacy-visual-card {
  width: min(100%, 500px);

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 24px;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.11),
    rgba(255, 255, 255, 0.045)
  );

  box-shadow:
    0 35px 80px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(18px);

  transform: rotateY(-4deg) rotateX(2deg);
}

/* =========================================================
   17. VISUAL TOP
========================================================= */

body.privacy-page .privacy-visual-top {
  min-height: 78px;

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

  padding: 20px 24px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

body.privacy-page .privacy-visual-brand {
  display: flex;
  align-items: center;

  gap: 12px;
}

body.privacy-page .privacy-visual-brand > span {
  width: 38px;
  height: 38px;

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

  border-radius: 11px;

  background: #ffffff;

  color: var(--privacy-navy);

  font-family: "Manrope", sans-serif;

  font-size: 16px;
  font-weight: 800;
}

body.privacy-page .privacy-visual-brand small {
  display: block;

  margin-bottom: 3px;

  color: rgba(255, 255, 255, 0.48);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.14em;
}

body.privacy-page .privacy-visual-brand strong {
  display: block;

  color: #ffffff;

  font-size: 13px;

  font-weight: 700;
}

body.privacy-page .privacy-status {
  color: #6ee2b6;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.12em;
}

/* =========================================================
   18. VISUAL BODY
========================================================= */

body.privacy-page .privacy-visual-body {
  padding: 40px 32px 34px;
}

body.privacy-page .privacy-shield {
  width: 68px;
  height: 68px;

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

  margin-bottom: 23px;

  border: 1px solid rgba(91, 159, 247, 0.35);

  border-radius: 20px;

  background: linear-gradient(
    145deg,
    rgba(45, 122, 230, 0.28),
    rgba(45, 122, 230, 0.08)
  );

  box-shadow: 0 15px 30px rgba(20, 94, 180, 0.18);
}

body.privacy-page .privacy-shield span {
  width: 38px;
  height: 42px;

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

  color: #ffffff;

  background: var(--privacy-blue);

  clip-path: polygon(
    50% 0%,
    92% 15%,
    88% 60%,
    70% 83%,
    50% 100%,
    30% 83%,
    12% 60%,
    8% 15%
  );

  font-size: 18px;
  font-weight: 800;
}

body.privacy-page .privacy-visual-body h3 {
  margin: 0;

  color: #ffffff;

  font-family: "Manrope", sans-serif;

  font-size: 27px;

  line-height: 1.15;

  letter-spacing: -0.025em;
}

body.privacy-page .privacy-visual-body h3 span {
  color: #69a7ff;
}

body.privacy-page .privacy-visual-body > p {
  margin: 14px 0 27px;

  color: rgba(255, 255, 255, 0.6);

  font-size: 14px;

  line-height: 1.7;
}

/* =========================================================
   19. PROTECTION LIST
========================================================= */

body.privacy-page .privacy-protection-list {
  display: grid;

  gap: 9px;
}

body.privacy-page .privacy-protection-list > div {
  display: flex;
  align-items: center;

  gap: 13px;

  padding: 13px 14px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.045);
}

body.privacy-page .privacy-protection-list span {
  color: #5f9ff8;

  font-family: "Manrope", sans-serif;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.05em;
}

body.privacy-page .privacy-protection-list strong {
  color: rgba(255, 255, 255, 0.85);

  font-size: 12px;

  font-weight: 600;
}

/* =========================================================
   20. VISUAL FOOTER
========================================================= */

body.privacy-page .privacy-visual-footer {
  min-height: 50px;

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

  padding: 0 24px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  color: rgba(255, 255, 255, 0.35);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 0.14em;
}

/* =========================================================
   21. CONTENT SECTION
========================================================= */

body.privacy-page .legal-content-section {
  position: relative;

  padding: 100px 0 120px;

  background: var(--privacy-bg);
}

/* =========================================================
   22. LEGAL LAYOUT
========================================================= */

body.privacy-page .legal-layout {
  display: grid;

  grid-template-columns: 260px minmax(0, 1fr);

  gap: 70px;

  align-items: start;
}

/* =========================================================
   23. SIDEBAR
========================================================= */

body.privacy-page .legal-sidebar {
  position: sticky;

  top: 105px;

  align-self: start;
}

body.privacy-page .legal-sidebar-inner {
  padding: 24px 0;
}

body.privacy-page .legal-sidebar .eyebrow {
  display: block;

  margin-bottom: 17px;

  color: var(--privacy-text-muted);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}

/* =========================================================
   24. TABLE OF CONTENTS
========================================================= */

body.privacy-page .legal-toc {
  display: flex;

  flex-direction: column;

  border-left: 1px solid var(--privacy-border);
}

body.privacy-page .legal-toc a {
  position: relative;

  display: block;

  padding: 9px 0 9px 18px;

  color: var(--privacy-text-muted);

  font-size: 12px;

  line-height: 1.4;

  font-weight: 600;

  transition:
    color 0.25s ease,
    padding-left 0.25s ease;
}

body.privacy-page .legal-toc a::before {
  content: "";

  position: absolute;

  left: -1px;

  top: 0;

  width: 2px;

  height: 100%;

  background: transparent;

  border-radius: 2px;

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

body.privacy-page .legal-toc a:hover {
  color: var(--privacy-blue);

  padding-left: 22px;
}

body.privacy-page .legal-toc a.active {
  color: var(--privacy-blue);

  padding-left: 22px;
}

body.privacy-page .legal-toc a.active::before {
  background: var(--privacy-blue);
}

/* =========================================================
   25. DOCUMENT
========================================================= */

body.privacy-page .legal-document {
  min-width: 0;

  max-width: 850px;

  padding: 0 0 30px;
}

/* =========================================================
   26. UPDATED NOTICE
========================================================= */

body.privacy-page .legal-updated {
  display: flex;
  align-items: center;
  gap: 9px;

  width: fit-content;

  margin-bottom: 42px;

  padding: 9px 14px;

  border: 1px solid var(--privacy-border);

  border-radius: 999px;

  background: #ffffff;

  box-shadow: var(--privacy-shadow-sm);

  color: var(--privacy-text-muted);

  font-size: 11px;

  line-height: 1;
}

body.privacy-page .legal-updated strong {
  color: var(--privacy-text);

  font-weight: 700;
}

/* =========================================================
   27. LEGAL SECTION
========================================================= */

body.privacy-page .legal-section {
  position: relative;

  padding: 0 0 64px;

  margin-bottom: 64px;

  border-bottom: 1px solid var(--privacy-border);
}

body.privacy-page .legal-section:last-of-type {
  margin-bottom: 0;

  border-bottom: 0;
}

/* =========================================================
   28. SECTION NUMBER
========================================================= */

body.privacy-page .legal-section-number {
  display: block;

  margin-bottom: 11px;

  color: var(--privacy-blue);

  font-family: "Manrope", sans-serif;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.14em;
}

/* =========================================================
   29. DOCUMENT HEADINGS
========================================================= */

body.privacy-page .legal-document h2 {
  margin: 0 0 22px;

  color: var(--privacy-navy);

  font-family: "Manrope", "Inter", sans-serif;

  font-size: clamp(27px, 3vw, 38px);

  line-height: 1.15;

  letter-spacing: -0.035em;

  font-weight: 800;
}

body.privacy-page .legal-document h3 {
  margin: 32px 0 12px;

  color: var(--privacy-navy);

  font-family: "Manrope", sans-serif;

  font-size: 19px;

  line-height: 1.3;

  font-weight: 800;
}

/* =========================================================
   30. DOCUMENT PARAGRAPHS
========================================================= */

body.privacy-page .legal-document p {
  margin: 0 0 18px;

  color: var(--privacy-text-soft);

  font-family: "Inter", sans-serif;

  font-size: 15px;

  line-height: 1.85;
}

body.privacy-page .legal-document p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   31. LEGAL LIST
========================================================= */

body.privacy-page .legal-list {
  display: grid;

  gap: 11px;

  margin: 22px 0 25px;

  padding: 0;

  list-style: none;
}

body.privacy-page .legal-list li {
  position: relative;

  padding-left: 27px;

  color: var(--privacy-text-soft);

  font-size: 14px;

  line-height: 1.7;
}

body.privacy-page .legal-list li::before {
  content: "";

  position: absolute;

  left: 1px;

  top: 0.65em;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--privacy-blue);

  box-shadow: 0 0 0 4px var(--privacy-blue-light);
}

/* =========================================================
   32. INLINE LINKS
========================================================= */

body.privacy-page .legal-document a {
  color: var(--privacy-blue);

  font-weight: 600;

  text-decoration: underline;

  text-decoration-color: rgba(23, 105, 224, 0.25);

  text-underline-offset: 3px;

  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}

body.privacy-page .legal-document a:hover {
  color: var(--privacy-blue-dark);

  text-decoration-color: var(--privacy-blue);
}

/* =========================================================
   33. CONTACT CARD
========================================================= */

body.privacy-page .legal-contact-card {
  display: flex;
  align-items: flex-start;

  gap: 18px;

  margin-top: 28px;

  padding: 24px;

  border: 1px solid var(--privacy-border);

  border-radius: 18px;

  background: #ffffff;

  box-shadow: var(--privacy-shadow-sm);
}

body.privacy-page .legal-contact-icon {
  flex: 0 0 50px;

  width: 50px;
  height: 50px;

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

  border-radius: 14px;

  background: linear-gradient(135deg, var(--privacy-navy), var(--privacy-blue));

  color: #ffffff;

  font-family: "Manrope", sans-serif;

  font-size: 18px;

  font-weight: 800;
}

body.privacy-page .legal-contact-card strong {
  display: block;

  margin-bottom: 10px;

  color: var(--privacy-navy);

  font-family: "Manrope", sans-serif;

  font-size: 15px;
}

body.privacy-page .legal-contact-card p {
  margin: 5px 0;

  font-size: 13px;
}

/* =========================================================
   34. FINAL NOTE
========================================================= */

body.privacy-page .legal-final-note {
  display: flex;
  align-items: flex-start;

  gap: 18px;

  margin-top: 25px;

  padding: 25px;

  border: 1px solid #d7e5f8;

  border-radius: 18px;

  background: linear-gradient(135deg, #f4f8ff, #edf5ff);
}

body.privacy-page .legal-final-note > span {
  flex: 0 0 42px;

  width: 42px;
  height: 42px;

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

  border-radius: 12px;

  background: var(--privacy-navy);

  color: #ffffff;

  font-family: "Manrope", sans-serif;

  font-size: 15px;

  font-weight: 800;
}

body.privacy-page .legal-final-note strong {
  display: block;

  margin-bottom: 5px;

  color: var(--privacy-navy);

  font-family: "Manrope", sans-serif;

  font-size: 16px;
}

body.privacy-page .legal-final-note p {
  margin: 0;

  color: var(--privacy-text-soft);

  font-size: 13px;

  line-height: 1.7;
}

/* =========================================================
   35. PRIVACY CTA
========================================================= */

body.privacy-page .privacy-cta {
  position: relative;

  overflow: hidden;

  padding: 105px 0;

  background:
    radial-gradient(
      circle at 80% 50%,
      rgba(51, 123, 229, 0.22),
      transparent 32%
    ),
    linear-gradient(135deg, #07172e 0%, #081a33 50%, #0c2546 100%);

  color: #ffffff;
}

/* =========================================================
   36. CTA GRID
========================================================= */

body.privacy-page .resource-cta-grid {
  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.22;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);

  background-size: 60px 60px;
}

/* =========================================================
   37. CTA CONTENT
========================================================= */

body.privacy-page .resource-cta-content {
  position: relative;

  z-index: 2;

  max-width: 780px;

  text-align: center;

  margin: 0 auto;
}

body.privacy-page .resource-cta-mark {
  width: 56px;
  height: 56px;

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

  margin: 0 auto 22px;

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.08);

  color: #ffffff;

  font-family: "Manrope", sans-serif;

  font-size: 20px;

  font-weight: 800;
}

body.privacy-page .resource-cta-content .eyebrow {
  margin-bottom: 13px;
}

body.privacy-page .resource-cta-content h2 {
  margin: 0;

  color: #ffffff;

  font-family: "Manrope", sans-serif;

  font-size: clamp(38px, 5vw, 62px);

  line-height: 1;

  letter-spacing: -0.045em;

  font-weight: 800;
}

body.privacy-page .resource-cta-content h2 span {
  color: #62a2ff;
}

body.privacy-page .resource-cta-content > p {
  max-width: 590px;

  margin: 22px auto 0;

  color: rgba(255, 255, 255, 0.65);

  font-size: 15px;

  line-height: 1.8;
}

/* =========================================================
   38. CTA ACTIONS
========================================================= */

body.privacy-page .resource-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 24px;

  margin-top: 32px;
}

body.privacy-page .resource-cta-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 52px;

  padding: 0 24px;

  border-radius: 10px;

  font-size: 13px;

  font-weight: 700;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

body.privacy-page .resource-cta-actions .btn:hover {
  transform: translateY(-2px);
}

body.privacy-page .btn-light {
  background: #ffffff;

  color: var(--privacy-navy);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

body.privacy-page .resource-cta-link {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 13px;

  font-weight: 700;

  transition: color 0.2s ease;
}

body.privacy-page .resource-cta-link:hover {
  color: #ffffff;
}

/* =========================================================
   39. DESKTOP DOCUMENT WIDTH
========================================================= */

@media (min-width: 1200px) {
  body.privacy-page .legal-document {
    padding-right: 45px;
  }
}

/* =========================================================
   40. TABLET
========================================================= */

@media (max-width: 1100px) {
  body.privacy-page .legal-hero {
    padding: 130px 0 90px;
  }

  body.privacy-page .legal-hero-container {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(350px, 0.8fr);

    gap: 50px;
  }

  body.privacy-page .legal-layout {
    grid-template-columns: 220px minmax(0, 1fr);

    gap: 45px;
  }

  body.privacy-page .privacy-visual-card {
    transform: none;
  }
}

/* =========================================================
   41. TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {
  body.privacy-page .legal-hero {
    padding: 120px 0 80px;
  }

  body.privacy-page .legal-hero-container {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  body.privacy-page .legal-hero-content {
    max-width: 760px;
  }

  body.privacy-page .legal-hero-visual {
    justify-content: flex-start;
  }

  body.privacy-page .privacy-visual-card {
    width: min(100%, 540px);
  }

  body.privacy-page .legal-layout {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  body.privacy-page .legal-sidebar {
    position: relative;

    top: auto;
  }

  body.privacy-page .legal-sidebar-inner {
    padding: 0;
  }

  body.privacy-page .legal-toc {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-left: 0;

    border: 1px solid var(--privacy-border);

    border-radius: 14px;

    overflow: hidden;

    background: #ffffff;
  }

  body.privacy-page .legal-toc a {
    border-bottom: 1px solid var(--privacy-border);

    padding: 13px 15px;
  }

  body.privacy-page .legal-toc a:nth-child(odd) {
    border-right: 1px solid var(--privacy-border);
  }

  body.privacy-page .legal-toc a:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  body.privacy-page .legal-toc a::before {
    display: none;
  }

  body.privacy-page .legal-toc a:hover,
  body.privacy-page .legal-toc a.active {
    padding-left: 15px;

    background: var(--privacy-blue-light);
  }

  body.privacy-page .legal-document {
    max-width: none;
  }
}

/* =========================================================
   42. MOBILE
========================================================= */

@media (max-width: 640px) {
  body.privacy-page .container {
    width: min(calc(100% - 30px), var(--privacy-container));
  }

  body.privacy-page .legal-hero {
    min-height: auto;

    padding: 105px 0 65px;
  }

  body.privacy-page .legal-label {
    margin-bottom: 18px;
  }

  body.privacy-page .legal-hero h1 {
    font-size: 48px;

    letter-spacing: -0.05em;
  }

  body.privacy-page .legal-hero-content > p {
    margin-top: 22px;

    font-size: 14px;

    line-height: 1.75;
  }

  body.privacy-page .legal-meta {
    display: grid;

    grid-template-columns: 1fr;

    margin-top: 25px;
  }

  body.privacy-page .legal-meta-item {
    min-width: 0;
  }

  body.privacy-page .legal-hero-container {
    gap: 40px;
  }

  body.privacy-page .privacy-visual-card {
    width: 100%;

    border-radius: 19px;
  }

  body.privacy-page .privacy-visual-top {
    padding: 16px 17px;
  }

  body.privacy-page .privacy-visual-body {
    padding: 30px 22px 25px;
  }

  body.privacy-page .privacy-visual-body h3 {
    font-size: 23px;
  }

  body.privacy-page .privacy-visual-footer {
    padding: 0 17px;
  }

  body.privacy-page .legal-content-section {
    padding: 65px 0 75px;
  }

  body.privacy-page .legal-layout {
    gap: 30px;
  }

  body.privacy-page .legal-toc {
    grid-template-columns: 1fr;
  }

  body.privacy-page .legal-toc a,
  body.privacy-page .legal-toc a:nth-child(odd) {
    border-right: 0;

    border-bottom: 1px solid var(--privacy-border);
  }

  body.privacy-page .legal-toc a:last-child {
    border-bottom: 0;
  }

  body.privacy-page .legal-document {
    width: 100%;
  }

  body.privacy-page .legal-updated {
    margin-bottom: 32px;
  }

  body.privacy-page .legal-section {
    padding-bottom: 45px;

    margin-bottom: 45px;
  }

  body.privacy-page .legal-document h2 {
    font-size: 29px;
  }

  body.privacy-page .legal-document h3 {
    font-size: 18px;
  }

  body.privacy-page .legal-document p {
    font-size: 14px;

    line-height: 1.8;
  }

  body.privacy-page .legal-list li {
    font-size: 13.5px;
  }

  body.privacy-page .legal-contact-card {
    padding: 19px;

    gap: 13px;
  }

  body.privacy-page .legal-contact-icon {
    flex-basis: 43px;

    width: 43px;
    height: 43px;
  }

  body.privacy-page .legal-final-note {
    padding: 19px;

    gap: 13px;
  }

  body.privacy-page .legal-final-note > span {
    flex-basis: 38px;

    width: 38px;
    height: 38px;
  }

  body.privacy-page .privacy-cta {
    padding: 75px 0;
  }

  body.privacy-page .resource-cta-content h2 {
    font-size: 42px;
  }

  body.privacy-page .resource-cta-actions {
    flex-direction: column;

    gap: 18px;
  }

  body.privacy-page .resource-cta-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   43. VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {
  body.privacy-page .legal-hero h1 {
    font-size: 42px;
  }

  body.privacy-page .privacy-visual-body {
    padding: 25px 18px 22px;
  }

  body.privacy-page .privacy-protection-list > div {
    padding: 11px;
  }

  body.privacy-page .resource-cta-content h2 {
    font-size: 37px;
  }
}

/* =========================================================
   44. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  body.privacy-page .reveal {
    opacity: 1 !important;

    visibility: visible !important;

    transform: none !important;

    transition: none !important;
  }

  body.privacy-page .privacy-visual-card {
    transform: none;
  }

  body.privacy-page .legal-toc a,
  body.privacy-page .resource-cta-actions .btn,
  body.privacy-page .resource-cta-link {
    transition: none;
  }
}

/* =========================================================
   45. PRINT
========================================================= */

@media print {
  body.privacy-page {
    background: #ffffff;
  }

  body.privacy-page .legal-hero {
    min-height: auto;

    padding: 40px 0;

    color: #000000;

    background: #ffffff;
  }

  body.privacy-page .legal-hero h1,
  body.privacy-page .legal-hero-content > p,
  body.privacy-page .legal-meta-item strong {
    color: #000000;
  }

  body.privacy-page .legal-hero-grid,
  body.privacy-page .legal-hero-visual,
  body.privacy-page .privacy-cta {
    display: none;
  }

  body.privacy-page .legal-layout {
    display: block;
  }

  body.privacy-page .legal-sidebar {
    display: none;
  }

  body.privacy-page .legal-document {
    max-width: none;
  }

  body.privacy-page .legal-section {
    break-inside: avoid;
  }

  body.privacy-page .legal-document a {
    color: #000000;
  }
}

/* =========================================================
   KAMAL GROUP OF CORPORATE
   TERMS & CONDITIONS PAGE
   COMPLETE PAGE CSS
========================================================= */

/* =========================================================
   ROOT / PAGE VARIABLES
========================================================= */

:root {
  --terms-navy: #081a33;
  --terms-navy-2: #0b2345;
  --terms-blue: #1261ff;
  --terms-blue-dark: #0b4ed8;
  --terms-blue-soft: #eaf2ff;
  --terms-green: #17a673;

  --terms-text: #17243a;
  --terms-text-soft: #536176;
  --terms-muted: #718096;

  --terms-white: #ffffff;
  --terms-bg: #f7f9fc;
  --terms-border: #e5eaf1;
  --terms-border-dark: #d6deea;

  --terms-shadow-sm: 0 8px 24px rgba(8, 26, 51, 0.06);

  --terms-shadow: 0 20px 60px rgba(8, 26, 51, 0.1);

  --terms-radius: 18px;
  --terms-radius-lg: 26px;

  --terms-container: 1240px;
}

/* =========================================================
   GLOBAL TERMS PAGE
========================================================= */

.terms-page {
  background: var(--terms-white);
  color: var(--terms-text);
  overflow-x: hidden;
}

.terms-page main {
  overflow: hidden;
}

.terms-page .container {
  width: min(calc(100% - 48px), var(--terms-container));
  margin-inline: auto;
}

/* =========================================================
   HEADER
   Keeps your existing header structure compatible
========================================================= */

.terms-page .site-header {
  position: relative;
  z-index: 1000;
}

.terms-page .site-header.scrolled {
  box-shadow: 0 10px 30px rgba(8, 26, 51, 0.08);
}

/* =========================================================
   LEGAL HERO
========================================================= */

.terms-page .legal-hero {
  position: relative;
  isolation: isolate;
  min-height: 650px;
  padding: 150px 0 100px;
  background:
    radial-gradient(
      circle at 78% 25%,
      rgba(18, 97, 255, 0.16),
      transparent 32%
    ),
    radial-gradient(
      circle at 10% 85%,
      rgba(23, 166, 115, 0.08),
      transparent 28%
    ),
    linear-gradient(135deg, #06152b 0%, #081a33 48%, #0b2345 100%);
  color: #fff;
}

.terms-page .legal-hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);

  background-size: 70px 70px;

  mask-image: linear-gradient(
    to bottom,
    black 0%,
    rgba(0, 0, 0, 0.7) 65%,
    transparent 100%
  );
}

.terms-page .legal-hero-container {
  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(420px, 0.95fr);
  align-items: center;
  gap: 80px;
}

/* =========================================================
   HERO CONTENT
========================================================= */

.terms-page .legal-hero-content {
  max-width: 680px;
}

.terms-page .legal-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;

  color: rgba(255, 255, 255, 0.72);

  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.terms-page .legal-label-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9px;

  background: rgba(255, 255, 255, 0.08);

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.terms-page .legal-hero .eyebrow {
  display: block;
  margin-bottom: 14px;

  color: #72a4ff;

  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.terms-page .legal-hero h1 {
  margin: 0;

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: clamp(48px, 6vw, 82px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.terms-page .legal-hero h1 span {
  display: block;
  color: #6fa1ff;
}

.terms-page .legal-hero-content > p {
  max-width: 620px;
  margin: 30px 0 0;

  color: rgba(255, 255, 255, 0.7);

  font-family: "Inter", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
}

/* =========================================================
   LEGAL META
========================================================= */

.terms-page .legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

.terms-page .legal-meta-item {
  min-width: 190px;
  padding: 16px 18px;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.055);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.terms-page .legal-meta-item span {
  display: block;
  margin-bottom: 6px;

  color: rgba(255, 255, 255, 0.48);

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.terms-page .legal-meta-item strong {
  color: #fff;

  font-size: 14px;
  font-weight: 700;
}

/* =========================================================
   HERO VISUAL
========================================================= */

.terms-page .legal-hero-visual {
  display: flex;
  justify-content: flex-end;
}

.terms-page .terms-visual-card {
  position: relative;
  width: min(100%, 500px);

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 26px;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.045)
  );

  box-shadow:
    0 35px 100px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.terms-page .terms-visual-card::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  top: -100px;
  right: -80px;

  border-radius: 50%;

  background: rgba(65, 129, 255, 0.18);

  filter: blur(5px);
}

.terms-page .privacy-visual-top {
  position: relative;
  z-index: 1;

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

  padding: 24px 26px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.terms-page .privacy-visual-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.terms-page .privacy-visual-brand > span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  border-radius: 11px;

  background: #fff;
  color: var(--terms-navy);

  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.terms-page .privacy-visual-brand small {
  display: block;

  color: rgba(255, 255, 255, 0.42);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.terms-page .privacy-visual-brand strong {
  display: block;
  margin-top: 3px;

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 13px;
}

.terms-page .privacy-status {
  color: #62e2b0;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.terms-page .privacy-visual-body {
  position: relative;
  z-index: 1;

  padding: 40px 34px 34px;
}

.terms-page .privacy-shield {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 66px;
  height: 66px;

  margin-bottom: 26px;

  border: 1px solid rgba(111, 161, 255, 0.24);
  border-radius: 18px;

  background: linear-gradient(
    145deg,
    rgba(74, 132, 255, 0.22),
    rgba(74, 132, 255, 0.08)
  );

  color: #7eacff;

  font-size: 26px;
}

.terms-page .privacy-visual-body h3 {
  max-width: 380px;
  margin: 0;

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.terms-page .privacy-visual-body h3 span {
  color: #6fa1ff;
}

.terms-page .privacy-visual-body > p {
  margin: 18px 0 28px;

  color: rgba(255, 255, 255, 0.58);

  font-size: 14px;
  line-height: 1.75;
}

.terms-page .privacy-protection-list {
  display: grid;
  gap: 9px;
}

.terms-page .privacy-protection-list > div {
  display: flex;
  align-items: center;
  gap: 14px;

  padding: 12px 14px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;

  background: rgba(255, 255, 255, 0.035);
}

.terms-page .privacy-protection-list span {
  color: #6fa1ff;

  font-size: 10px;
  font-weight: 800;
}

.terms-page .privacy-protection-list strong {
  color: rgba(255, 255, 255, 0.78);

  font-size: 12px;
  font-weight: 600;
}

.terms-page .privacy-visual-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 16px 26px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  color: rgba(255, 255, 255, 0.36);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* =========================================================
   LEGAL CONTENT SECTION
========================================================= */

.terms-page .legal-content-section {
  position: relative;
  padding: 105px 0 120px;

  background: #fff;
}

.terms-page .legal-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 820px);
  justify-content: space-between;
  align-items: start;
  gap: 70px;
}

/* =========================================================
   SIDEBAR
========================================================= */

.terms-page .legal-sidebar {
  position: sticky;
  top: 115px;
}

.terms-page .legal-sidebar-inner {
  padding: 25px 0;
}

.terms-page .legal-sidebar .eyebrow {
  display: block;
  margin-bottom: 20px;

  color: #8490a3;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.terms-page .legal-toc {
  display: flex;
  flex-direction: column;

  border-left: 1px solid var(--terms-border);
}

.terms-page .legal-toc a {
  position: relative;

  display: block;

  padding: 9px 0 9px 18px;

  color: #657286;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;

  text-decoration: none;

  transition:
    color 0.25s ease,
    padding-left 0.25s ease;
}

.terms-page .legal-toc a::before {
  content: "";

  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;

  width: 2px;

  background: var(--terms-blue);

  opacity: 0;

  transition: opacity 0.25s ease;
}

.terms-page .legal-toc a:hover {
  padding-left: 22px;
  color: var(--terms-blue);
}

.terms-page .legal-toc a.active {
  padding-left: 22px;
  color: var(--terms-blue);
}

.terms-page .legal-toc a.active::before {
  opacity: 1;
}

/* =========================================================
   LEGAL DOCUMENT
========================================================= */

.terms-page .legal-document {
  min-width: 0;
}

.terms-page .legal-updated {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 54px;
  padding: 15px 18px;

  border: 1px solid var(--terms-border);
  border-radius: 12px;

  background: var(--terms-bg);

  color: var(--terms-muted);

  font-size: 12px;
}

.terms-page .legal-updated strong {
  color: var(--terms-text);
  font-weight: 700;
}

/* =========================================================
   LEGAL SECTION
========================================================= */

.terms-page .legal-section {
  position: relative;

  padding: 0 0 58px;
  margin-bottom: 58px;

  border-bottom: 1px solid var(--terms-border);
  scroll-margin-top: 120px;
}

.terms-page .legal-section:last-of-type {
  border-bottom: 0;
}

.terms-page .legal-section-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 28px;

  margin-bottom: 16px;

  border-radius: 7px;

  background: var(--terms-blue-soft);
  color: var(--terms-blue);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.terms-page .legal-section h2 {
  margin: 0 0 20px;

  color: var(--terms-navy);

  font-family: "Manrope", sans-serif;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.035em;
}

.terms-page .legal-section p {
  max-width: 800px;
  margin: 0 0 18px;

  color: var(--terms-text-soft);

  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.85;
}

.terms-page .legal-section p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   LEGAL LIST
========================================================= */

.terms-page .legal-list {
  display: grid;
  gap: 11px;

  margin: 24px 0 26px;
  padding: 0;

  list-style: none;
}

.terms-page .legal-list li {
  position: relative;

  padding: 15px 18px 15px 46px;

  border: 1px solid var(--terms-border);
  border-radius: 11px;

  background: #fafbfd;

  color: #536176;

  font-size: 14px;
  line-height: 1.65;
}

.terms-page .legal-list li::before {
  content: "✓";

  position: absolute;
  left: 17px;
  top: 15px;

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

  width: 19px;
  height: 19px;

  border-radius: 50%;

  background: #e7f7f0;
  color: var(--terms-green);

  font-size: 10px;
  font-weight: 800;
}

/* =========================================================
   LEGAL CONTACT CARD
========================================================= */

.terms-page .legal-contact-card {
  display: flex;
  align-items: center;
  gap: 18px;

  margin-top: 28px;
  padding: 24px;

  border: 1px solid var(--terms-border);
  border-radius: 16px;

  background: linear-gradient(135deg, #f7faff, #ffffff);

  box-shadow: var(--terms-shadow-sm);
}

.terms-page .legal-contact-icon {
  flex: 0 0 auto;

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

  width: 52px;
  height: 52px;

  border-radius: 14px;

  background: var(--terms-navy);
  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.terms-page .legal-contact-card strong {
  display: block;
  margin-bottom: 8px;

  color: var(--terms-navy);

  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.terms-page .legal-contact-card p {
  margin: 4px 0 !important;

  font-size: 13px !important;
  line-height: 1.6 !important;
}

.terms-page .legal-contact-card a {
  color: var(--terms-blue);
  font-weight: 600;
  text-decoration: none;
}

.terms-page .legal-contact-card a:hover {
  text-decoration: underline;
}

/* =========================================================
   FINAL LEGAL NOTE
========================================================= */

.terms-page .legal-final-note {
  display: flex;
  align-items: flex-start;
  gap: 18px;

  margin-top: 20px;
  padding: 25px;

  border: 1px solid #dce7fb;
  border-radius: 17px;

  background: linear-gradient(135deg, #f2f7ff, #f9fbff);
}

.terms-page .legal-final-note > span {
  flex: 0 0 auto;

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

  width: 42px;
  height: 42px;

  border-radius: 11px;

  background: var(--terms-blue);
  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.terms-page .legal-final-note strong {
  display: block;
  margin-bottom: 5px;

  color: var(--terms-navy);

  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.terms-page .legal-final-note p {
  margin: 0;

  color: var(--terms-text-soft);

  font-size: 13px;
  line-height: 1.7;
}

/* =========================================================
   CTA
========================================================= */

.terms-page .terms-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding: 100px 0;

  background:
    radial-gradient(
      circle at 85% 30%,
      rgba(49, 112, 255, 0.25),
      transparent 32%
    ),
    linear-gradient(135deg, #07172f, #081a33 55%, #0b2449);

  color: #fff;
}

.terms-page .resource-cta-grid {
  position: absolute;
  inset: 0;
  z-index: -1;

  opacity: 0.45;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);

  background-size: 60px 60px;
}

.terms-page .resource-cta-content {
  max-width: 760px;
  margin: 0 auto;

  text-align: center;
}

.terms-page .resource-cta-mark {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;

  margin: 0 auto 25px;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 15px;

  background: rgba(255, 255, 255, 0.08);

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 800;

  backdrop-filter: blur(10px);
}

.terms-page .resource-cta .eyebrow {
  display: block;
  margin-bottom: 14px;

  color: #78a7ff;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.terms-page .resource-cta h2 {
  margin: 0;

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
}

.terms-page .resource-cta h2 span {
  color: #6fa1ff;
}

.terms-page .resource-cta-content > p {
  max-width: 590px;
  margin: 22px auto 0;

  color: rgba(255, 255, 255, 0.62);

  font-size: 15px;
  line-height: 1.8;
}

.terms-page .resource-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;

  margin-top: 34px;
}

.terms-page .btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  min-height: 54px;
  padding: 0 25px;

  border-radius: 10px;

  background: #fff;
  color: var(--terms-navy);

  font-size: 13px;
  font-weight: 700;

  text-decoration: none;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.terms-page .btn-light:hover {
  transform: translateY(-3px);

  background: #f4f7fb;

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

.terms-page .resource-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 13px;
  font-weight: 700;

  text-decoration: none;

  transition:
    color 0.25s ease,
    gap 0.25s ease;
}

.terms-page .resource-cta-link:hover {
  gap: 13px;
  color: #fff;
}

/* =========================================================
   FOOTER
========================================================= */

.terms-page .site-footer {
  background: #051326;
  color: #fff;
}

.terms-page .footer-grid {
  display: grid;

  grid-template-columns:
    minmax(260px, 1.7fr)
    repeat(5, minmax(120px, 1fr));

  gap: 45px;

  padding-top: 75px;
  padding-bottom: 65px;
}

.terms-page .footer-brand {
  max-width: 330px;
}

.terms-page .footer-brand > a {
  display: inline-flex;
}

.terms-page .footer-brand img {
  display: block;
  width: 180px;
  height: auto;
  object-fit: contain;
}

.terms-page .footer-brand > p {
  margin: 22px 0 0;

  color: rgba(255, 255, 255, 0.53);

  font-size: 13px;
  line-height: 1.8;
}

/* =========================================================
   FOOTER SOCIAL
========================================================= */

.terms-page .footer-social {
  margin-top: 27px;
}

.terms-page .footer-social-label {
  display: block;
  margin-bottom: 12px;

  color: rgba(255, 255, 255, 0.34);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.terms-page .footer-social-links {
  display: flex;
  align-items: center;
  gap: 9px;
}

.terms-page .footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 35px;
  height: 35px;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;

  background: rgba(255, 255, 255, 0.04);

  color: rgba(255, 255, 255, 0.68);

  text-decoration: none;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.terms-page .footer-social-link:hover {
  transform: translateY(-3px);

  color: #fff;

  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.terms-page .footer-social-link.linkedin:hover {
  background: #0a66c2;
}

.terms-page .footer-social-link.instagram:hover {
  background: linear-gradient(135deg, #7c3aed, #ec4899, #f97316);
}

.terms-page .footer-social-link.whatsapp:hover {
  background: #16a34a;
}

.terms-page .footer-social-link.youtube:hover {
  background: #ff0000;
}

/* =========================================================
   FOOTER COLUMNS
========================================================= */

.terms-page .footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.terms-page .footer-column h3 {
  margin: 0 0 20px;

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.terms-page .footer-column a {
  display: inline-block;

  margin-bottom: 11px;

  color: rgba(255, 255, 255, 0.48);

  font-size: 12px;
  line-height: 1.5;

  text-decoration: none;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.terms-page .footer-column a:hover {
  color: #fff;
  transform: translateX(3px);
}

/* =========================================================
   FOOTER BOTTOM
========================================================= */

.terms-page .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;

  padding-top: 22px;
  padding-bottom: 22px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.terms-page .footer-bottom p {
  margin: 0;

  color: rgba(255, 255, 255, 0.34);

  font-size: 11px;
  line-height: 1.5;
}

.terms-page .footer-bottom > div {
  display: flex;
  align-items: center;
  gap: 22px;
}

.terms-page .footer-bottom a {
  color: rgba(255, 255, 255, 0.4);

  font-size: 11px;
  font-weight: 600;

  text-decoration: none;

  transition: color 0.25s ease;
}

.terms-page .footer-bottom a:hover,
.terms-page .footer-bottom a[aria-current="page"] {
  color: #fff;
}

/* =========================================================
   REVEAL ANIMATION
========================================================= */

.terms-page .reveal {
  opacity: 0;
  transform: translateY(25px);

  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.terms-page .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

.terms-page a:focus-visible,
.terms-page button:focus-visible {
  outline: 3px solid rgba(66, 133, 255, 0.45);
  outline-offset: 3px;
}

.terms-page ::selection {
  background: #1261ff;
  color: #fff;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .terms-page .legal-hero {
    padding: 135px 0 85px;
  }

  .terms-page .legal-hero-container {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(350px, 0.8fr);

    gap: 45px;
  }

  .terms-page .legal-layout {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 45px;
  }

  .terms-page .footer-grid {
    grid-template-columns:
      minmax(250px, 1.5fr)
      repeat(3, 1fr);

    row-gap: 50px;
  }

  .terms-page .footer-brand {
    grid-column: 1 / -1;
    max-width: 550px;
  }
}

/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {
  .terms-page .legal-hero-container {
    grid-template-columns: 1fr;
  }

  .terms-page .legal-hero-content {
    max-width: 720px;
  }

  .terms-page .legal-hero-visual {
    justify-content: flex-start;
    margin-top: 15px;
  }

  .terms-page .terms-visual-card {
    max-width: 620px;
  }

  .terms-page .legal-layout {
    grid-template-columns: 1fr;
  }

  .terms-page .legal-sidebar {
    position: relative;
    top: auto;
  }

  .terms-page .legal-sidebar-inner {
    padding: 0;
    margin-bottom: 15px;
  }

  .terms-page .legal-toc {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    border: 0;

    gap: 4px 10px;
  }

  .terms-page .legal-toc a {
    padding: 10px 12px;

    border: 1px solid var(--terms-border);
    border-radius: 8px;

    background: #fafbfd;
  }

  .terms-page .legal-toc a::before {
    display: none;
  }

  .terms-page .legal-toc a:hover,
  .terms-page .legal-toc a.active {
    padding-left: 12px;

    border-color: #cbdcff;

    background: var(--terms-blue-soft);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .terms-page .container {
    width: min(calc(100% - 32px), var(--terms-container));
  }

  .terms-page .legal-hero {
    min-height: auto;

    padding: 120px 0 70px;
  }

  .terms-page .legal-hero h1 {
    font-size: clamp(42px, 14vw, 60px);
  }

  .terms-page .legal-hero-content > p {
    margin-top: 22px;

    font-size: 14px;
    line-height: 1.75;
  }

  .terms-page .legal-meta {
    display: grid;
    grid-template-columns: 1fr;

    margin-top: 28px;
  }

  .terms-page .legal-meta-item {
    min-width: 0;
  }

  .terms-page .legal-hero-visual {
    margin-top: 10px;
  }

  .terms-page .terms-visual-card {
    border-radius: 20px;
  }

  .terms-page .privacy-visual-top {
    padding: 18px 20px;
  }

  .terms-page .privacy-visual-body {
    padding: 30px 22px 25px;
  }

  .terms-page .privacy-visual-body h3 {
    font-size: 25px;
  }

  .terms-page .privacy-visual-footer {
    padding: 14px 20px;
  }

  .terms-page .legal-content-section {
    padding: 70px 0 80px;
  }

  .terms-page .legal-toc {
    grid-template-columns: 1fr;
  }

  .terms-page .legal-updated {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;

    margin-bottom: 40px;
  }

  .terms-page .legal-section {
    padding-bottom: 42px;
    margin-bottom: 42px;
  }

  .terms-page .legal-section h2 {
    font-size: 26px;
  }

  .terms-page .legal-section p {
    font-size: 14px;
    line-height: 1.8;
  }

  .terms-page .legal-list li {
    padding: 13px 14px 13px 43px;

    font-size: 13px;
  }

  .terms-page .legal-contact-card {
    align-items: flex-start;
    padding: 19px;

    gap: 14px;
  }

  .terms-page .legal-contact-icon {
    width: 44px;
    height: 44px;
  }

  .terms-page .legal-final-note {
    padding: 20px;

    gap: 13px;
  }

  .terms-page .legal-final-note > span {
    width: 38px;
    height: 38px;
  }

  .terms-page .terms-cta {
    padding: 75px 0;
  }

  .terms-page .resource-cta h2 {
    font-size: 42px;
  }

  .terms-page .resource-cta-content > p {
    font-size: 14px;
  }

  .terms-page .resource-cta-actions {
    flex-direction: column;
    gap: 18px;
  }

  .terms-page .btn-light {
    width: 100%;
    max-width: 280px;
  }

  .terms-page .footer-grid {
    grid-template-columns: repeat(2, 1fr);

    gap: 38px 25px;

    padding-top: 60px;
    padding-bottom: 50px;
  }

  .terms-page .footer-brand {
    grid-column: 1 / -1;
  }

  .terms-page .footer-column h3 {
    margin-bottom: 16px;
  }

  .terms-page .footer-column a {
    font-size: 11px;
  }

  .terms-page .footer-bottom {
    align-items: flex-start;
    flex-direction: column;

    gap: 13px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .terms-page .container {
    width: calc(100% - 28px);
  }

  .terms-page .legal-hero {
    padding-top: 105px;
  }

  .terms-page .legal-label {
    margin-bottom: 20px;
  }

  .terms-page .legal-hero h1 {
    font-size: 43px;
  }

  .terms-page .legal-meta-item {
    padding: 14px 15px;
  }

  .terms-page .privacy-visual-brand > span {
    width: 36px;
    height: 36px;
  }

  .terms-page .privacy-visual-brand small {
    font-size: 8px;
  }

  .terms-page .privacy-visual-brand strong {
    font-size: 12px;
  }

  .terms-page .privacy-status {
    font-size: 8px;
  }

  .terms-page .privacy-visual-body {
    padding: 25px 18px 20px;
  }

  .terms-page .privacy-shield {
    width: 55px;
    height: 55px;

    margin-bottom: 20px;
  }

  .terms-page .privacy-visual-body h3 {
    font-size: 23px;
  }

  .terms-page .privacy-visual-body > p {
    font-size: 13px;
  }

  .terms-page .privacy-protection-list > div {
    padding: 10px 11px;
  }

  .terms-page .privacy-protection-list strong {
    font-size: 11px;
  }

  .terms-page .legal-content-section {
    padding-top: 55px;
  }

  .terms-page .legal-section h2 {
    font-size: 24px;
  }

  .terms-page .legal-section p {
    font-size: 13.5px;
  }

  .terms-page .legal-contact-card {
    flex-direction: column;
  }

  .terms-page .legal-final-note {
    flex-direction: column;
  }

  .terms-page .resource-cta h2 {
    font-size: 37px;
  }

  .terms-page .footer-grid {
    grid-template-columns: 1fr;
  }

  .terms-page .footer-brand {
    grid-column: auto;
  }

  .terms-page .footer-bottom > div {
    flex-wrap: wrap;
    gap: 15px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .terms-page *,
  .terms-page *::before,
  .terms-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .terms-page .reveal {
    opacity: 1;
    transform: none;
  }
}