@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600&display=swap');

:root {
  --font-sans: 'Inter', sans-serif;
  --font-display: 'Outfit', sans-serif;
  --bg: #f9fafb;
  --ink: #0a1b33;
  --navy: #0a152d;
  --muted: #64748b;
  --line: rgba(226, 232, 240, 0.5);
  --soft-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.03);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
button { font: inherit; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.app { min-height: 100vh; background: var(--bg); }
.page { min-height: 100vh; padding-top: 61px; }
.top-pad { padding: 24px 0 0; }
.outer-pad { padding: 0 16px; }
.container { width: 100%; max-width: 100%; margin: 0; padding-left: 0; padding-right: 0; }

.site-header {
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  position: fixed;
  left: 0;
  right: 0;
  transform: none;
  z-index: 100;
}
.main-header {
  width: 100%;
  min-height: 86px;
  height: auto;
  padding: 0 clamp(18px, 1.6vw, 30px);
  border-radius: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(226,232,240,0.75);
  box-shadow: 0 18px 55px rgba(15,23,42,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: nowrap;
  overflow: visible;
}

/* @media (min-width: 1600px) {
  .site-header {
    width: min(1688px, calc(97% - 96px)) !important;
  }
} */
.site-logo {
  width: 190px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #0f172a;
  flex: 0 0 auto;
}
.logo-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #38bdf8 0%, #2563eb 58%, #0f172a 100%);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  box-shadow: 0 10px 22px rgba(37,99,235,.22);
}
.logo-copy { display: flex; flex-direction: column; line-height: 1; }
.logo-word { font-family: var(--font-display); font-size: 27px; font-weight: 600; color: #10213f; letter-spacing: 0; }
.logo-tagline { margin-top: 5px; font-size: 7px; line-height: 1; font-weight: 700; color: #64748b; letter-spacing: .12em; text-transform: uppercase; }
.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 1.25vw, 22px);
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: visible;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: color .18s ease, transform .18s ease;
}
.nav-link:hover,
.nav-link.active { color: #2563eb; }
.nav-link:hover { transform: translateY(-1px); }
.chevron { width: 12px; height: 12px; opacity: .72; }
.header-cta,
.mobile-demo {
  height: 54px;
  padding: 0 22px;
  border-radius: 999px;
  background: #07152f;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 16px 30px rgba(37,99,235,.22), 0 8px 20px rgba(7,21,47,.18);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  flex: 0 0 auto;
}
.header-cta:hover,
.mobile-demo:hover {
  transform: scale(1.03);
  background: #091b3b;
  box-shadow: 0 18px 36px rgba(37,99,235,.28), 0 10px 24px rgba(7,21,47,.2);
}
.header-arrow { width: 17px; height: 17px; }
.mobile-toggle {
  display: none;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: #07152f;
  color: white;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 12px 24px rgba(7,21,47,.18);
}
.mobile-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.mobile-open .mobile-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-open .mobile-toggle span:nth-child(2) { opacity: 0; }
.mobile-open .mobile-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-shade { display: none; position: fixed; inset: 0; z-index: 80; background: transparent; }
.mobile-menu {
  display: flex;
  position: fixed;
  top: 118px;
  left: 24px;
  right: 24px;
  z-index: 110;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  border-radius: 32px;
  background: #fff;
  border: 1px solid rgba(226,232,240,.85);
  box-shadow: 0 28px 70px rgba(15,23,42,.18);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.mobile-menu .nav-link {
  width: 100%;
  justify-content: space-between;
  padding: 15px 16px;
  border-radius: 18px;
  font-size: 15px;
}
.mobile-menu .nav-link:hover,
.mobile-menu .nav-link.active { background: #f8fafc; }
.mobile-demo { margin-top: 10px; width: 100%; }
.mobile-open .mobile-shade { display: block; }
.mobile-open .mobile-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }

.main-header {
  position: relative;
}

@media (max-width: 1280px) {
  .page {
    padding-top: 108px;
  }
  .main-header {
    padding: 0 18px 0 22px;
    gap: 14px;
  }
  .site-logo {
    width: 168px;
  }
  .desktop-nav {
    gap: 14px;
  }
  .nav-link {
    font-size: 13px;
    gap: 4px;
  }
  .header-cta {
    height: 48px;
    padding: 0 16px;
    font-size: 13px;
    gap: 8px;
  }
  .header-arrow {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 1080px) {
  .home-analytics-section { padding: 56px 28px; }
  .home-analytics-head,
  .home-analytics-board { grid-template-columns: 1fr; }
  .home-analytics-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-analytics-status { justify-self: start; }
  .home-koeskor-section {
    grid-template-columns: 1fr;
    padding: 44px 28px;
  }
  .home-koeskor-console {
    width: 100%;
  }

  .page {
    padding-top: 104px;
  }
  .site-header { width: 100%; padding-left: 0; padding-right: 0; }
  .main-header {
    padding: 0 14px 0 18px;
    gap: 10px;
  }
  .site-logo {
    width: 150px;
  }
  .desktop-nav {
    gap: 10px;
  }
  .nav-link {
    font-size: 12.5px;
  }
  .chevron {
    width: 10px;
    height: 10px;
  }
  .header-cta {
    height: 46px;
    padding: 0 14px;
  }
}

.mega-nav-item {
  position: static;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.mega-nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 22px;
}
.products-mega {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  z-index: 999;
  width: min(920px, calc(100vw - 48px));
  max-width: 920px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(226,232,240,0.8);
  box-shadow: 0 24px 70px rgba(15,23,42,0.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}
.mega-nav-item:hover .products-mega,
.mega-nav-item:focus-within .products-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.mega-products-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.mega-product-card {
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 92px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(248,250,252,0.65);
  border: 1px solid rgba(226,232,240,0.85);
  transition: all 220ms ease;
}
.mega-product-card:hover {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: rgba(37,99,235,0.28);
  box-shadow: 0 12px 30px rgba(15,23,42,0.08);
}
.mega-product-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 12px 26px rgba(37,99,235,.1);
}
.mega-product-card b,
.mega-product-card small {
  display: block;
  min-width: 0;
}
.mega-product-card b {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
}
.mega-product-card small {
  margin-top: 5px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}
.mega-products-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 92px;
  margin-top: 18px;
  padding: 20px 24px;
  border-radius: 22px;
  background: #07152f;
  color: white;
  overflow: hidden;
}
.mega-products-bottom b {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
}
.mega-products-bottom p {
  margin: 6px 0 0;
  max-width: 570px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.55;
}
.mega-products-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 22px;
  border-radius: 999px;
  background: white;
  color: #07152f;
  font-size: 14px;
  font-weight: 700;
  transition: transform .18s ease;
  white-space: nowrap;
}
.mega-products-btn:hover { transform: scale(1.04); }
.solutions-mega {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 999;
  width: min(920px, calc(100vw - 48px));
  max-width: 920px;
  padding: 24px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 24px 70px rgba(15,23,42,0.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}
.solutions-nav-item:hover .solutions-mega,
.mega-nav-item:hover .solutions-mega,
.solutions-nav-item:focus-within .solutions-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.solutions-nav-item {
  position: relative;
}
.solutions-nav-item::after {
  content: "";
  position: absolute;
  left: -24px;
  right: -24px;
  top: 100%;
  height: 28px;
}
.mega-solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.mega-solutions-column {
  display: grid;
  align-content: start;
  gap: 14px;
}
.mega-solution-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-height: 92px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(248,250,252,0.65);
  border: 1px solid rgba(226,232,240,0.85);
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.mega-solution-card:hover {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: rgba(37,99,235,0.28);
  box-shadow: 0 12px 30px rgba(15,23,42,0.08);
}
.mega-solution-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 12px 26px rgba(37,99,235,.1);
}
.mega-solution-icon i {
  color: currentColor;
  font-size: 17px;
  line-height: 1;
}
.mega-solution-card b,
.mega-solution-card small {
  display: block;
  min-width: 0;
}
.mega-solution-card b {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.15;
}
.mega-solution-card small {
  margin-top: 6px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.45;
}
.mega-solutions-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 92px;
  margin-top: 18px;
  padding: 20px 24px;
  border-radius: 22px;
  background: #07152f;
  color: white;
  overflow: hidden;
}
.mega-solutions-bottom b {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
}
.mega-solutions-bottom p {
  margin: 6px 0 0;
  max-width: 570px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.55;
}
.mega-solutions-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 22px;
  border-radius: 999px;
  background: white;
  color: #07152f;
  font-size: 14px;
  font-weight: 700;
  transition: transform .18s ease;
  white-space: nowrap;
}
.mega-solutions-btn:hover { transform: scale(1.04); }
.industries-mega {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 999;
  width: min(680px, calc(100vw - 48px));
  max-width: 680px;
  padding: 20px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 24px 70px rgba(15,23,42,0.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}
.industries-nav-item:hover .industries-mega,
.industries-nav-item:focus-within .industries-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.industries-nav-item {
  position: relative;
}
.industries-nav-item::after {
  content: "";
  position: absolute;
  left: -24px;
  right: -24px;
  top: 100%;
  height: 28px;
}
.mega-industries-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mega-industry-card {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  min-height: 84px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(248,250,252,0.65);
  border: 1px solid rgba(226,232,240,0.85);
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.mega-industry-card:hover {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: rgba(37,99,235,0.28);
  box-shadow: 0 12px 30px rgba(15,23,42,0.08);
}
.mega-industry-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 12px 26px rgba(37,99,235,.1);
}
.mega-industry-icon i {
  color: currentColor;
  font-size: 17px;
  line-height: 1;
}
.mega-industry-card b,
.mega-industry-card small {
  display: block;
  min-width: 0;
}
.mega-industry-card b {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.15;
}
.mega-industry-card small {
  margin-top: 6px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}
.mobile-products-accordion {
  display: none;
}
.mobile-solutions-accordion {
  display: none;
}
.mobile-industries-accordion {
  display: none;
}
.mobile-products-accordion summary {
  list-style: none;
  cursor: pointer;
}
.mobile-solutions-accordion summary {
  list-style: none;
  cursor: pointer;
}
.mobile-industries-accordion summary {
  list-style: none;
  cursor: pointer;
}
.mobile-products-accordion summary::-webkit-details-marker {
  display: none;
}
.mobile-solutions-accordion summary::-webkit-details-marker {
  display: none;
}
.mobile-industries-accordion summary::-webkit-details-marker {
  display: none;
}
.mobile-products-panel {
  display: grid;
  gap: 14px;
  padding: 6px 0 14px;
  position: static;
  width: 100%;
  max-width: none;
  border: 0;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
  overflow: visible;
}
.mobile-solutions-panel {
  display: grid;
  gap: 14px;
  padding: 6px 0 14px;
  position: static;
  width: 100%;
  max-width: none;
  border: 0;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
  overflow: visible;
}
.mobile-industries-panel {
  display: grid;
  gap: 14px;
  padding: 6px 0 14px;
  position: static;
  width: 100%;
  max-width: none;
  border: 0;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
  overflow: visible;
}
.mobile-products-panel .mega-products-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}
.mobile-solutions-panel .mega-solutions-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}
.mobile-industries-panel .mega-industries-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}
.mobile-solutions-panel .mega-solutions-column {
  gap: 10px;
}
.mobile-products-panel .mega-product-card {
  min-height: auto;
  grid-template-columns: 44px minmax(0,1fr);
  padding: 14px;
  border-radius: 18px;
}
.mobile-products-panel .mega-product-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
}
.mobile-products-panel .mega-product-card b {
  font-size: 15px;
}
.mobile-products-panel .mega-product-card small {
  font-size: 12px;
}
.mobile-products-panel .mega-products-bottom {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 2px;
  padding: 18px;
  border-radius: 18px;
}
.mobile-products-panel .mega-products-bottom b {
  font-size: 18px;
}
.mobile-products-panel .mega-products-btn {
  width: 100%;
}
.mobile-solutions-panel .mega-solution-card {
  min-height: auto;
  padding: 14px;
  border-radius: 18px;
}
.mobile-solutions-panel .mega-solution-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
}
.mobile-solutions-panel .mega-solution-card b {
  font-size: 15px;
}
.mobile-solutions-panel .mega-solution-card small {
  font-size: 12px;
}
.mobile-industries-panel .mega-industry-card {
  min-height: auto;
  padding: 14px;
  border-radius: 18px;
}
.mobile-industries-panel .mega-industry-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
}
.mobile-industries-panel .mega-industry-card b {
  font-size: 15px;
}
.mobile-industries-panel .mega-industry-card small {
  font-size: 12px;
}
.mobile-solutions-panel .mega-solutions-bottom {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 2px;
  padding: 18px;
  border-radius: 18px;
}
.mobile-solutions-panel .mega-solutions-bottom b {
  font-size: 18px;
}
.mobile-solutions-panel .mega-solutions-btn {
  width: 100%;
}

.solution-page {
  background:
    radial-gradient(circle at 8% 8%, rgba(59,130,246,.08), transparent 34%),
    radial-gradient(circle at 92% 18%, rgba(14,165,233,.1), transparent 30%),
    #f8fafc;
}
.solution-page .reveal {
  opacity: 1;
  transform: translateY(0);
}
body.js-ready .solution-page .reveal {
  opacity: 0;
  transform: translateY(24px);
}
body.js-ready .solution-page .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.sol-hero {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  gap: 44px;
  align-items: center;
  padding: 64px;
  border-radius: 48px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.9));
  border: 1px solid rgba(226,232,240,.85);
  box-shadow: 0 36px 100px rgba(15,23,42,.08);
  overflow: hidden;
}
.sol-hero::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,.88);
  pointer-events: none;
}
.sol-copy,
.sol-visual {
  position: relative;
  z-index: 1;
}
.sol-copy h1 {
  margin: 18px 0 18px;
  max-width: 720px;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 65px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: 0;
}
.sol-copy p {
  max-width: 690px;
  margin: 0;
  color: #475569;
  font-size: 18px;
  line-height: 1.7;
}
.sol-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid #dbeafe;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(37,99,235,.08);
}
.sol-label i {
  color: #2563eb;
}
.sol-visual {
  min-height: 460px;
}
.sol-dashboard {
  position: relative;
  min-height: 420px;
  padding: 22px;
  border-radius: 34px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 30px 80px rgba(15,23,42,.13);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transform: perspective(1000px) rotateY(-8deg) rotateX(5deg);
}
.sol-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}
.sol-window-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dbeafe;
}
.sol-window-bar span {
  margin-left: 8px;
}
.sol-window-bar b {
  margin-left: auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
}
.sol-dash-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
}
.sol-widget {
  min-height: 118px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(248,250,252,.85);
  border: 1px solid rgba(226,232,240,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.sol-widget h3,
.sol-widget b {
  display: block;
  margin: 0 0 8px;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}
.sol-widget span,
.sol-widget p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}
.sol-widget.primary {
  grid-row: span 2;
  background: linear-gradient(145deg, #07152f, #123a78);
  color: white;
}
.sol-widget.primary h3,
.sol-widget.primary b {
  color: white;
}
.sol-widget.primary span,
.sol-widget.primary p {
  color: #bfdbfe;
}
.sol-icon-orb {
  width: 76px;
  height: 76px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 26px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color: white;
  font-size: 34px;
}
.sol-bars {
  display: flex;
  align-items: end;
  gap: 9px;
  height: 82px;
  margin-top: 12px;
}
.sol-bars i {
  flex: 1;
  min-width: 12px;
  height: var(--h);
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
}
.sol-progress-ring {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  margin: 4px 0 10px;
  border-radius: 50%;
  background: conic-gradient(#2563eb var(--progress, 78%), #dbeafe 0);
  color: #0f172a;
  font-weight: 600;
}
.sol-progress-ring::before {
  content: attr(data-value);
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: white;
}
.sol-float-card {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 20px 50px rgba(15,23,42,.12);
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
}
.sol-float-card i {
  color: #2563eb;
}
.sol-float-card.one { left: -18px; top: 96px; }
.sol-float-card.two { right: -10px; top: 218px; }
.sol-float-card.three { left: 70px; bottom: 8px; }
.sol-section {
  max-width: 1400px;
  margin: 24px auto 0;
  padding: 44px;
  border-radius: 36px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: 0 24px 70px rgba(15,23,42,.05);
  overflow: hidden;
}
.sol-head {
  max-width: 820px;
  margin-bottom: 28px;
}
.sol-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.sol-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sol-head h2,
.sol-section h2 {
  margin: 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 500;
  line-height: 1.05;
}
.sol-head p,
.sol-text {
  margin: 14px 0 0;
  color: #475569;
  font-size: 16px;
  line-height: 1.75;
}
.sol-split {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  gap: 26px;
  align-items: stretch;
}
.sol-panel {
  padding: 28px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(248,250,252,.92), rgba(239,246,255,.72));
  border: 1px solid rgba(226,232,240,.9);
}
.sol-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.sol-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.sol-card,
.sol-feature,
.sol-benefit,
.sol-audience {
  padding: 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 16px 42px rgba(15,23,42,.05);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sol-card:hover,
.sol-feature:hover,
.sol-benefit:hover,
.sol-audience:hover {
  transform: translateY(-4px);
  border-color: rgba(37,99,235,.32);
  box-shadow: 0 24px 56px rgba(15,23,42,.09);
}
.sol-card i,
.sol-feature i,
.sol-benefit i,
.sol-audience i {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 17px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 20px;
}
.sol-card h3,
.sol-feature h3,
.sol-benefit h3,
.sol-audience h3 {
  margin: 0 0 9px;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}
.sol-card p,
.sol-feature p,
.sol-benefit p,
.sol-audience p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}
.sol-workflow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.sol-step {
  position: relative;
  min-height: 160px;
  padding: 18px;
  border-radius: 22px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.sol-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #07152f;
  color: white;
  font-size: 12px;
  font-weight: 600;
}
.sol-step h3 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 600;
}
.sol-step p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}
.sol-showcase {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  padding: 24px;
  border-radius: 30px;
  background: linear-gradient(135deg, #07152f, #123a78);
  color: white;
}
.sol-showcase .sol-widget {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.16);
}
.sol-showcase .sol-widget h3,
.sol-showcase .sol-widget b {
  color: white;
}
.sol-showcase .sol-widget span,
.sol-showcase .sol-widget p {
  color: #bfdbfe;
}
.sol-kpi-grid,
.sol-benefit-grid,
.sol-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.sol-faq {
  display: grid;
  gap: 12px;
}
.sol-faq details {
  padding: 20px 22px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.sol-faq summary {
  cursor: pointer;
  color: #0f172a;
  font-weight: 600;
  list-style: none;
}
.sol-faq summary::-webkit-details-marker {
  display: none;
}
.sol-faq p {
  margin: 12px 0 0;
  color: #64748b;
  line-height: 1.65;
}
.sol-cta {
  text-align: center;
  background: linear-gradient(135deg, #07152f, #123a78);
  color: white;
}
.sol-cta h2 {
  color: white;
}
.sol-cta p {
  max-width: 720px;
  margin: 14px auto 0;
  color: #bfdbfe;
}

.solution-schools .sol-hero {
  grid-template-columns: 1fr .92fr;
  background: linear-gradient(135deg, #ffffff, #eff6ff 58%, #f8fafc);
}
.solution-schools .sol-dash-grid {
  grid-template-columns: 1fr 1fr;
}
.solution-schools .sol-feature-grid {
  grid-template-columns: 1.25fr 1fr 1fr;
}
.solution-schools .sol-benefit-grid {
  grid-template-columns: 1fr 1fr;
}
.solution-schools .sol-widget.primary {
  border-radius: 30px 30px 18px 30px;
}

.solution-university .sol-hero {
  grid-template-columns: .9fr 1.1fr;
}
.solution-university .sol-showcase {
  grid-template-columns: .75fr 1.25fr;
}
.solution-university .sol-kpi-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.solution-university .sol-feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.solution-university .sol-card-grid {
  grid-template-columns: .8fr 1.2fr .8fr;
}

.solution-institute .sol-hero {
  grid-template-columns: 1.06fr .94fr;
}
.solution-institute .sol-card-grid,
.solution-institute .sol-benefit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.solution-institute .sol-workflow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.solution-institute .sol-showcase {
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
}

.solution-entrance .sol-hero {
  grid-template-columns: .88fr 1.12fr;
}
.solution-entrance .sol-workflow {
  grid-template-columns: 1fr;
  max-width: 880px;
  margin: 0 auto;
}
.solution-entrance .sol-step {
  min-height: 108px;
  display: grid;
  grid-template-columns: 52px minmax(160px, .45fr) 1fr;
  align-items: center;
  gap: 16px;
}
.solution-entrance .sol-step span {
  margin: 0;
}
.solution-entrance .sol-feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.solution-olympiad .sol-hero {
  grid-template-columns: 1fr .96fr;
}
.solution-olympiad .sol-showcase {
  grid-template-columns: .95fr 1.05fr;
  background: linear-gradient(135deg, #07152f, #1e40af);
}
.solution-olympiad .sol-benefit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.solution-olympiad .sol-widget.primary {
  background: linear-gradient(145deg, #0f172a, #2563eb);
}

.solution-aptitude .sol-hero {
  grid-template-columns: .95fr 1.05fr;
}
.solution-aptitude .sol-dash-grid {
  grid-template-columns: .9fr 1.1fr;
}
.solution-aptitude .sol-dashboard::after {
  content: "";
  position: absolute;
  right: 44px;
  bottom: 42px;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  background: conic-gradient(#2563eb 0 18%, #93c5fd 18% 42%, #dbeafe 42% 68%, #38bdf8 68% 100%);
  opacity: .5;
}
.solution-aptitude .sol-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.solution-aptitude .sol-workflow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.solution-skill .sol-hero {
  grid-template-columns: .92fr 1.08fr;
}
.solution-skill .sol-feature-grid,
.solution-skill .sol-benefit-grid,
.solution-skill .sol-audience-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.solution-skill .sol-feature {
  min-height: 190px;
}
.solution-skill .sol-showcase {
  grid-template-columns: 1fr 1fr;
}

.solution-campus .sol-hero {
  grid-template-columns: 1fr 1fr;
}
.solution-campus .sol-workflow {
  grid-template-columns: repeat(6, minmax(120px, 1fr));
}
.solution-campus .sol-step {
  border-color: #bfdbfe;
}
.solution-campus .sol-showcase {
  grid-template-columns: .85fr 1.15fr;
}
.solution-campus .sol-feature-grid {
  grid-template-columns: 1fr 1fr 1fr;
}

.school-solution-page {
  background:
    radial-gradient(circle at 10% 6%, rgba(37,99,235,.08), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(56,189,248,.1), transparent 32%),
    #f8fafc;
}
.school-solution-page .reveal {
  opacity: 1;
  transform: translateY(0);
}
body.js-ready .school-solution-page .reveal {
  opacity: 0;
  transform: translateY(24px);
}
body.js-ready .school-solution-page .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.school-hero,
.school-section,
.school-dashboard-showcase,
.school-final-cta {
  max-width: 1400px;
  margin: 0 auto;
}
.school-hero {
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: 46px;
  align-items: center;
  padding: 60px;
  border-radius: 48px;
  background: linear-gradient(135deg, #ffffff, #f1f7ff 62%, #ffffff);
  border: 1px solid rgba(226,232,240,.88);
  box-shadow: 0 34px 90px rgba(15,23,42,.08);
  overflow: hidden;
}
.school-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
}
.school-hero-copy h1 {
  margin: 18px 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 74px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}
.school-hero-copy p,
.school-section-head p,
.school-showcase-copy p {
  color: #475569;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
}
.school-hero-visual {
  position: relative;
  min-height: 460px;
}
.school-dashboard-card,
.school-showcase-board {
  border-radius: 34px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(226,232,240,.92);
  box-shadow: 0 30px 80px rgba(15,23,42,.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.school-dashboard-card {
  min-height: 420px;
  padding: 22px;
  transform: perspective(1000px) rotateY(-7deg) rotateX(5deg);
}
.school-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}
.school-window-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dbeafe;
}
.school-window-bar span {
  margin-left: 8px;
}
.school-dash-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  padding: 22px;
  border-radius: 26px;
  background: #07152f;
  color: white;
}
.school-dash-top b,
.school-dash-top span,
.school-progress-list b,
.school-progress-list span,
.school-score-row b,
.school-score-row span {
  display: block;
}
.school-dash-top b {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
}
.school-dash-top span {
  margin-top: 6px;
  color: #bfdbfe;
  font-size: 13px;
}
.school-dash-top strong {
  color: #93c5fd;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 500;
}
.school-progress-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.school-progress-list div,
.school-score-row div,
.school-kpis article,
.school-board-grid > div {
  padding: 16px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.school-progress-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.school-progress-list span,
.school-score-row b,
.school-kpis span,
.school-board-grid p,
.school-gap-card span {
  color: #64748b;
  font-size: 13px;
}
.school-progress-list b,
.school-score-row span,
.school-kpis b,
.school-gap-card b {
  color: #0f172a;
  font-weight: 600;
}
.school-score-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.school-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  border: 1px solid #e2e8f0;
  box-shadow: 0 18px 44px rgba(15,23,42,.12);
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
}
.school-float i {
  color: #2563eb;
}
.school-float-one { left: -16px; top: 80px; }
.school-float-two { right: -8px; top: 230px; }
.school-float-three { left: 86px; bottom: 6px; }
.school-section,
.school-dashboard-showcase,
.school-final-cta {
  margin-top: 24px;
  padding: 44px;
  border-radius: 36px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 24px 70px rgba(15,23,42,.05);
}
.school-section-head {
  max-width: 820px;
  margin-bottom: 26px;
}
.school-section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.school-section-head span,
.school-showcase-copy span {
  display: block;
  margin-bottom: 10px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.school-section-head h2,
.school-showcase-copy h2,
.school-final-cta h2 {
  margin: 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 500;
  line-height: 1.05;
}
.school-problem-grid,
.school-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.school-help-grid,
.school-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.school-problem-grid article,
.school-help-grid article,
.school-feature-grid article,
.school-benefit-grid article {
  padding: 24px;
  border-radius: 24px;
  background: rgba(255,255,255,.82);
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 42px rgba(15,23,42,.05);
}
.school-problem-grid i,
.school-help-grid i,
.school-feature-grid i,
.school-benefit-grid i {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 17px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 20px;
}
.school-problem-grid h3,
.school-help-grid h3,
.school-feature-grid h3,
.school-benefit-grid h3,
.school-board-grid h3 {
  margin: 0 0 9px;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}
.school-problem-grid p,
.school-help-grid p,
.school-feature-grid p,
.school-benefit-grid p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}
.school-workflow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.school-workflow::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 42px;
  height: 2px;
  background: linear-gradient(90deg, #bfdbfe, #2563eb, #bfdbfe);
}
.school-workflow article {
  position: relative;
  z-index: 1;
  padding: 18px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 14px 34px rgba(15,23,42,.05);
}
.school-workflow article > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #07152f;
  color: white;
  font-size: 12px;
  font-weight: 600;
}
.school-workflow i {
  display: block;
  margin: 18px 0 12px;
  color: #2563eb;
  font-size: 22px;
}
.school-workflow h3 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 16px;
  font-weight: 600;
}
.school-workflow p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}
.school-dashboard-showcase {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 28px;
  align-items: center;
}
.school-showcase-board {
  padding: 22px;
}
.school-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.school-kpis b {
  display: block;
  color: #2563eb;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
}
.school-board-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.school-subject-bars {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  height: 174px;
  padding-top: 10px;
}
.school-subject-bars h3 {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0 0 8px;
}
.school-subject-bars i {
  width: 100%;
  height: var(--h);
  min-height: 78px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
  box-shadow: 0 12px 24px rgba(37,99,235,.18);
}
.school-gap-card div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.school-usecase-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.school-usecase-pills span {
  padding: 13px 18px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #0f172a;
  font-size: 14px;
  font-weight: 500;
}
.school-faq {
  display: grid;
  gap: 12px;
}
.school-faq details {
  padding: 20px 22px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.school-faq summary {
  cursor: pointer;
  color: #0f172a;
  font-weight: 600;
  list-style: none;
}
.school-faq summary::-webkit-details-marker {
  display: none;
}
.school-faq p {
  margin: 12px 0 0;
  color: #64748b;
  line-height: 1.65;
}
.school-final-cta {
  text-align: center;
  background: linear-gradient(135deg, #07152f, #123a78);
  color: white;
}
.school-final-cta h2 {
  color: white;
}
.school-final-cta p {
  max-width: 720px;
  margin: 14px auto 0;
  color: #bfdbfe;
}

.university-solution-page {
  background:
    radial-gradient(circle at 8% 8%, rgba(37,99,235,.08), transparent 34%),
    radial-gradient(circle at 90% 16%, rgba(15,23,42,.06), transparent 30%),
    #f8fafc;
}
.university-solution-page .reveal {
  opacity: 1;
  transform: translateY(0);
}
body.js-ready .university-solution-page .reveal {
  opacity: 0;
  transform: translateY(24px);
}
body.js-ready .university-solution-page .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.university-hero,
.university-section,
.university-dashboard-showcase,
.university-final-cta {
  max-width: 1400px;
  margin: 0 auto;
}
.university-hero {
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(440px, 1.12fr);
  gap: 46px;
  align-items: center;
  padding: 60px;
  border-radius: 48px;
  background: linear-gradient(135deg, #ffffff, #f8fbff 52%, #eef6ff);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 34px 90px rgba(15,23,42,.08);
  overflow: hidden;
}
.university-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
}
.university-hero-copy h1 {
  margin: 18px 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 74px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}
.university-hero-copy p,
.university-showcase-copy p {
  color: #475569;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
}
.university-hero-visual {
  position: relative;
  min-height: 470px;
}
.university-console,
.university-board {
  border-radius: 34px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(226,232,240,.92);
  box-shadow: 0 30px 80px rgba(15,23,42,.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.university-console {
  min-height: 430px;
  padding: 22px;
  transform: perspective(1000px) rotateY(-7deg) rotateX(5deg);
}
.university-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}
.university-window-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dbeafe;
}
.university-window-bar span {
  margin-left: 8px;
}
.university-console-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient(135deg, #07152f, #123a78);
  color: white;
}
.university-console-top b,
.university-console-top span,
.university-analytics-strip b,
.university-analytics-strip span,
.university-kpis b,
.university-kpis span {
  display: block;
}
.university-console-top b {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
}
.university-console-top span {
  margin-top: 6px;
  color: #bfdbfe;
  font-size: 13px;
}
.university-console-top strong {
  color: #93c5fd;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 500;
}
.university-dept-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.university-dept-grid span {
  padding: 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}
.university-analytics-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.university-analytics-strip div {
  padding: 16px;
  border-radius: 18px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
}
.university-analytics-strip b {
  color: #2563eb;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
}
.university-analytics-strip span {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}
.university-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid #e2e8f0;
  box-shadow: 0 18px 44px rgba(15,23,42,.12);
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
}
.university-float i {
  color: #2563eb;
}
.university-float-one { left: -18px; top: 86px; }
.university-float-two { right: -10px; top: 230px; }
.university-float-three { left: 80px; bottom: 10px; }
.university-section,
.university-dashboard-showcase,
.university-final-cta {
  margin-top: 24px;
  padding: 44px;
  border-radius: 36px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 24px 70px rgba(15,23,42,.05);
}
.university-section-head {
  max-width: 820px;
  margin-bottom: 26px;
}
.university-section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.university-section-head span,
.university-showcase-copy span {
  display: block;
  margin-bottom: 10px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.university-section-head h2,
.university-showcase-copy h2,
.university-final-cta h2 {
  margin: 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 500;
  line-height: 1.05;
}
.university-challenge-grid,
.university-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.university-help-grid,
.university-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.university-challenge-grid article,
.university-help-grid article,
.university-feature-grid article,
.university-benefit-grid article {
  padding: 24px;
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 42px rgba(15,23,42,.05);
}
.university-challenge-grid i,
.university-help-grid i,
.university-feature-grid i,
.university-benefit-grid i {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 17px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 20px;
}
.university-challenge-grid h3,
.university-help-grid h3,
.university-feature-grid h3,
.university-benefit-grid h3,
.university-board-grid h3 {
  margin: 0 0 9px;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}
.university-challenge-grid p,
.university-help-grid p,
.university-feature-grid p,
.university-benefit-grid p,
.university-board-grid p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}
.university-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.university-timeline::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 42px;
  height: 2px;
  background: linear-gradient(90deg, #bfdbfe, #2563eb, #bfdbfe);
}
.university-timeline article {
  position: relative;
  z-index: 1;
  padding: 18px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 14px 34px rgba(15,23,42,.05);
}
.university-timeline article > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #07152f;
  color: white;
  font-size: 12px;
  font-weight: 600;
}
.university-timeline i {
  display: block;
  margin: 18px 0 12px;
  color: #2563eb;
  font-size: 22px;
}
.university-timeline h3 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 16px;
  font-weight: 600;
}
.university-timeline p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}
.university-dashboard-showcase {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 28px;
  align-items: center;
}
.university-board {
  padding: 22px;
}
.university-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.university-kpis article,
.university-board-grid div {
  padding: 16px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.university-kpis b {
  color: #2563eb;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
}
.university-kpis span {
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
}
.university-board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.university-usecase-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.university-usecase-pills span {
  padding: 13px 18px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #0f172a;
  font-size: 14px;
  font-weight: 500;
}
.university-faq {
  display: grid;
  gap: 12px;
}
.university-faq details {
  padding: 20px 22px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.university-faq summary {
  cursor: pointer;
  color: #0f172a;
  font-weight: 600;
  list-style: none;
}
.university-faq summary::-webkit-details-marker {
  display: none;
}
.university-faq p {
  margin: 12px 0 0;
  color: #64748b;
  line-height: 1.65;
}
.university-final-cta {
  text-align: center;
  background: linear-gradient(135deg, #07152f, #123a78);
  color: white;
}
.university-final-cta h2 {
  color: white;
}
.university-final-cta p {
  max-width: 760px;
  margin: 14px auto 0;
  color: #bfdbfe;
}

.institute-solution-page {
  background:
    radial-gradient(circle at 10% 8%, rgba(37,99,235,.08), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(14,165,233,.09), transparent 30%),
    #f8fafc;
}
.institute-solution-page .reveal { opacity: 1; transform: translateY(0); }
body.js-ready .institute-solution-page .reveal { opacity: 0; transform: translateY(24px); }
body.js-ready .institute-solution-page .reveal.visible { opacity: 1; transform: translateY(0); }
.institute-hero,
.institute-section,
.institute-dashboard-showcase,
.institute-final-cta {
  max-width: 1400px;
  margin: 0 auto;
}
.institute-hero {
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(420px, 1.06fr);
  gap: 46px;
  align-items: center;
  padding: 60px;
  border-radius: 48px;
  background: linear-gradient(135deg, #ffffff, #f1f7ff 58%, #ffffff);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 34px 90px rgba(15,23,42,.08);
  overflow: hidden;
}
.institute-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
}
.institute-hero-copy h1 {
  margin: 18px 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}
.institute-hero-copy p,
.institute-showcase-copy p {
  color: #475569;
  font-size: 17px;
  line-height: 1.7;
}
.institute-hero-visual { position: relative; min-height: 470px; }
.institute-console,
.institute-board {
  border-radius: 34px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(226,232,240,.92);
  box-shadow: 0 30px 80px rgba(15,23,42,.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.institute-console {
  min-height: 430px;
  padding: 22px;
  transform: perspective(1000px) rotateY(-7deg) rotateX(5deg);
}
.institute-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}
.institute-window-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dbeafe;
}
.institute-window-bar span { margin-left: 8px; }
.institute-course-card {
  margin-top: 22px;
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient(135deg, #07152f, #123a78);
  color: white;
}
.institute-course-card b,
.institute-course-card span,
.institute-progress-grid b,
.institute-progress-grid span,
.institute-batch-list span,
.institute-batch-list b,
.institute-kpis b,
.institute-kpis span {
  display: block;
}
.institute-course-card b {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
}
.institute-course-card span {
  margin-top: 6px;
  color: #bfdbfe;
  font-size: 13px;
}
.institute-course-card strong {
  display: block;
  margin-top: 18px;
  color: #93c5fd;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
}
.institute-progress-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 16px;
}
.institute-progress-grid article,
.institute-batch-list div,
.institute-kpis article,
.institute-board-grid div {
  padding: 16px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.institute-progress-grid b,
.institute-kpis b {
  color: #2563eb;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
}
.institute-progress-grid span,
.institute-kpis span,
.institute-board-grid p {
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}
.institute-batch-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.institute-batch-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.institute-batch-list span { color: #64748b; font-size: 13px; }
.institute-batch-list b { color: #0f172a; font-weight: 600; }
.institute-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid #e2e8f0;
  box-shadow: 0 18px 44px rgba(15,23,42,.12);
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
}
.institute-float i { color: #2563eb; }
.institute-float-one { left: -18px; top: 88px; }
.institute-float-two { right: -12px; top: 230px; }
.institute-float-three { left: 82px; bottom: 10px; }
.institute-section,
.institute-dashboard-showcase,
.institute-final-cta {
  margin-top: 24px;
  padding: 44px;
  border-radius: 36px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 24px 70px rgba(15,23,42,.05);
}
.institute-section-head { max-width: 820px; margin-bottom: 26px; }
.institute-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.institute-section-head span,
.institute-showcase-copy span {
  display: block;
  margin-bottom: 10px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.institute-section-head h2,
.institute-showcase-copy h2,
.institute-final-cta h2 {
  margin: 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 500;
  line-height: 1.05;
}
.institute-challenge-grid,
.institute-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.institute-help-grid,
.institute-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}
.institute-challenge-grid article,
.institute-help-grid article,
.institute-feature-grid article,
.institute-benefit-grid article {
  padding: 24px;
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 42px rgba(15,23,42,.05);
}
.institute-challenge-grid i,
.institute-help-grid i,
.institute-feature-grid i,
.institute-benefit-grid i {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 17px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 20px;
}
.institute-challenge-grid h3,
.institute-help-grid h3,
.institute-feature-grid h3,
.institute-benefit-grid h3,
.institute-board-grid h3 {
  margin: 0 0 9px;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}
.institute-challenge-grid p,
.institute-help-grid p,
.institute-feature-grid p,
.institute-benefit-grid p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}
.institute-process-section {
  max-width: 1400px;
}
.institute-process-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0 auto;
}
.institute-process-row::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 42px;
  height: 2px;
  background: linear-gradient(90deg, #dbeafe, #2563eb, #dbeafe);
}
.institute-process-row article {
  position: relative;
  z-index: 1;
  min-height: 210px;
  padding: 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.86);
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 42px rgba(15,23,42,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.institute-process-row article:hover {
  transform: translateY(-4px);
  border-color: rgba(37,99,235,.28);
  box-shadow: 0 24px 56px rgba(15,23,42,.1);
}
.institute-process-row article:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 30px;
  right: -18px;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #2563eb;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.institute-process-row article > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #07152f;
  color: white;
  font-size: 12px;
  font-weight: 600;
}
.institute-process-row i {
  display: block;
  margin-bottom: 14px;
  color: #2563eb;
  font-size: 24px;
}
.institute-process-row h3 {
  margin: 0 0 8px;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}
.institute-process-row p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}
.institute-dashboard-showcase {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 28px;
  align-items: center;
}
.institute-board { padding: 22px; }
.institute-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 18px;
}
.institute-board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}
.institute-usecase-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.institute-usecase-pills span {
  padding: 13px 18px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #0f172a;
  font-size: 14px;
  font-weight: 500;
}
.institute-faq { display: grid; gap: 12px; }
.institute-faq details {
  padding: 20px 22px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.institute-faq summary {
  cursor: pointer;
  color: #0f172a;
  font-weight: 600;
  list-style: none;
}
.institute-faq summary::-webkit-details-marker { display: none; }
.institute-faq p { margin: 12px 0 0; color: #64748b; line-height: 1.65; }
.institute-final-cta {
  text-align: center;
  background: linear-gradient(135deg, #07152f, #123a78);
  color: white;
}
.institute-final-cta h2 { color: white; }
.institute-final-cta p {
  max-width: 760px;
  margin: 14px auto 0;
  color: #bfdbfe;
}

.entrance-solution-page {
  background:
    radial-gradient(circle at 8% 8%, rgba(37,99,235,.08), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(14,165,233,.09), transparent 30%),
    #f8fafc;
}
.entrance-solution-page .reveal { opacity: 1; transform: translateY(0); }
body.js-ready .entrance-solution-page .reveal { opacity: 0; transform: translateY(24px); }
body.js-ready .entrance-solution-page .reveal.visible { opacity: 1; transform: translateY(0); }
.entrance-hero,
.entrance-section,
.entrance-command-center,
.entrance-final-cta {
  max-width: 1400px;
  margin: 0 auto;
}
.entrance-hero {
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(460px,1.1fr);
  gap: 46px;
  align-items: center;
  padding: 60px;
  border-radius: 48px;
  background: linear-gradient(135deg, #ffffff, #f1f7ff 58%, #ffffff);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 34px 90px rgba(15,23,42,.08);
  overflow: hidden;
}
.entrance-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
}
.entrance-hero-copy h1 {
  margin: 18px 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(42px,5vw,74px);
  font-weight: 500;
  line-height: 1;
}
.entrance-hero-copy p,
.entrance-command-copy p {
  color: #475569;
  font-size: 17px;
  line-height: 1.7;
}
.entrance-hero-visual { position: relative; min-height: 480px; }
.entrance-pipeline-card,
.entrance-command-board {
  border-radius: 34px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(226,232,240,.92);
  box-shadow: 0 30px 80px rgba(15,23,42,.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.entrance-pipeline-card {
  min-height: 440px;
  padding: 22px;
  transform: perspective(1000px) rotateY(-7deg) rotateX(5deg);
}
.entrance-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}
.entrance-window-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dbeafe;
}
.entrance-window-bar span { margin-left: 8px; }
.entrance-pipeline-stages {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin-top: 22px;
}
.entrance-pipeline-stages span {
  padding: 12px;
  border-radius: 16px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #0f172a;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}
.entrance-ticket {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  padding: 22px;
  border-radius: 26px;
  background: linear-gradient(135deg, #07152f, #123a78);
  color: white;
}
.entrance-ticket i {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  color: #bfdbfe;
  font-size: 24px;
}
.entrance-ticket b,
.entrance-ticket p,
.entrance-ticket strong { display: block; margin: 0; }
.entrance-ticket b { font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.entrance-ticket p { margin-top: 5px; color: #bfdbfe; font-size: 13px; }
.entrance-ticket strong { color: #93c5fd; font-family: var(--font-display); font-size: 34px; font-weight: 500; }
.entrance-mini-grid,
.entrance-command-kpis {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin-top: 16px;
}
.entrance-mini-grid article,
.entrance-command-kpis article,
.entrance-widget-grid article {
  padding: 16px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.entrance-mini-grid b,
.entrance-command-kpis b {
  display: block;
  color: #2563eb;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
}
.entrance-mini-grid span,
.entrance-command-kpis span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}
.entrance-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid #e2e8f0;
  box-shadow: 0 18px 44px rgba(15,23,42,.12);
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
}
.entrance-float i { color: #2563eb; }
.entrance-float-one { left: -18px; top: 92px; }
.entrance-float-two { right: -12px; top: 244px; }
.entrance-float-three { left: 88px; bottom: 10px; }
.entrance-section,
.entrance-command-center,
.entrance-final-cta {
  margin-top: 24px;
  padding: 44px;
  border-radius: 36px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 24px 70px rgba(15,23,42,.05);
}
.entrance-section-head { max-width: 840px; margin-bottom: 26px; }
.entrance-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.entrance-section-head span,
.entrance-command-copy span {
  display: block;
  margin-bottom: 10px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.entrance-section-head h2,
.entrance-command-copy h2,
.entrance-final-cta h2 {
  margin: 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(30px,3vw,48px);
  font-weight: 500;
  line-height: 1.05;
}
.entrance-complex-grid,
.entrance-security-grid,
.entrance-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}
.entrance-feature-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
}
.entrance-complex-grid article,
.entrance-feature-grid article,
.entrance-security-grid article,
.entrance-benefit-grid article {
  padding: 24px;
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 42px rgba(15,23,42,.05);
}
.entrance-complex-grid i,
.entrance-feature-grid i,
.entrance-security-grid i,
.entrance-benefit-grid i {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 17px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 20px;
}
.entrance-complex-grid h3,
.entrance-feature-grid h3,
.entrance-security-grid h3,
.entrance-benefit-grid h3,
.entrance-widget-grid h3 {
  margin: 0 0 9px;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}
.entrance-complex-grid p,
.entrance-feature-grid p,
.entrance-security-grid p,
.entrance-benefit-grid p,
.entrance-widget-grid p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}
.entrance-funnel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  gap: 12px;
}
.entrance-funnel::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 44px;
  height: 2px;
  background: linear-gradient(90deg,#dbeafe,#2563eb,#dbeafe);
}
.entrance-funnel article {
  position: relative;
  z-index: 1;
  min-height: 160px;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 14px 34px rgba(15,23,42,.05);
}
.entrance-funnel article:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 32px;
  right: -17px;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #2563eb;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
}
.entrance-funnel span {
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: #07152f;
  color: white;
  font-size: 11px;
  font-weight: 600;
}
.entrance-funnel i { display: block; margin: 16px 0 10px; color: #2563eb; font-size: 22px; }
.entrance-funnel h3 { margin: 0; color: #0f172a; font-size: 15px; font-weight: 600; }
.entrance-command-center {
  display: grid;
  grid-template-columns: .74fr 1.26fr;
  gap: 28px;
  align-items: center;
}
.entrance-command-board { padding: 22px; }
.entrance-command-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
.entrance-widget-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}
.entrance-bars {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 78px;
  margin-top: 10px;
}
.entrance-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg,#60a5fa,#2563eb);
}
.entrance-usecase-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}
.entrance-usecase-grid article {
  padding: 18px;
  border-radius: 20px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #0f172a;
  font-weight: 500;
  text-align: center;
}
.entrance-faq { display: grid; gap: 12px; }
.entrance-faq details {
  padding: 20px 22px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.entrance-faq summary {
  cursor: pointer;
  color: #0f172a;
  font-weight: 600;
  list-style: none;
}
.entrance-faq summary::-webkit-details-marker { display: none; }
.entrance-faq p { margin: 12px 0 0; color: #64748b; line-height: 1.65; }
.entrance-final-cta {
  text-align: center;
  background: linear-gradient(135deg,#07152f,#123a78);
  color: white;
}
.entrance-final-cta h2 { color: white; }
.entrance-final-cta p {
  max-width: 760px;
  margin: 14px auto 0;
  color: #bfdbfe;
}

.olympiad-solution-page {
  background:
    radial-gradient(circle at 9% 8%, rgba(37,99,235,.08), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(37,99,235,.09), transparent 30%),
    #f8fafc;
}
.olympiad-solution-page .reveal { opacity: 1; transform: translateY(0); }
body.js-ready .olympiad-solution-page .reveal { opacity: 0; transform: translateY(24px); }
body.js-ready .olympiad-solution-page .reveal.visible { opacity: 1; transform: translateY(0); }
.olympiad-hero,
.olympiad-section,
.olympiad-leaderboard-showcase,
.olympiad-final-cta {
  max-width: 1400px;
  margin: 0 auto;
}
.olympiad-hero {
  min-height: 630px;
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(440px,1.08fr);
  gap: 46px;
  align-items: center;
  padding: 60px;
  border-radius: 48px;
  background: linear-gradient(135deg, #ffffff, #f1f7ff 58%, #ffffff);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 34px 90px rgba(15,23,42,.08);
  overflow: hidden;
}
.olympiad-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
}
.olympiad-hero-copy h1 {
  margin: 18px 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(42px,5vw,64px);
  font-weight: 500;
  line-height: 1;
}
.olympiad-hero-copy p,
.olympiad-showcase-copy p {
  color: #475569;
  font-size: 17px;
  line-height: 1.7;
}
.olympiad-hero-visual { position: relative; min-height: 470px; }
.olympiad-board-card,
.olympiad-leaderboard-board {
  border-radius: 34px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(226,232,240,.92);
  box-shadow: 0 30px 80px rgba(15,23,42,.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.olympiad-board-card {
  min-height: 430px;
  padding: 22px;
  transform: perspective(1000px) rotateY(-7deg) rotateX(5deg);
}
.olympiad-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}
.olympiad-window-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dbeafe;
}
.olympiad-window-bar span { margin-left: 8px; }
.olympiad-title-card {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 22px;
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient(135deg,#07152f,#123a78);
  color: white;
}
.olympiad-title-card i {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: rgba(255,255,255,.12);
  color: #bfdbfe;
  font-size: 28px;
}
.olympiad-title-card b,
.olympiad-title-card span,
.olympiad-title-card strong { display: block; }
.olympiad-title-card b { font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.olympiad-title-card span { margin-top: 5px; color: #bfdbfe; font-size: 13px; }
.olympiad-title-card strong { color: #93c5fd; font-family: var(--font-display); font-size: 40px; font-weight: 500; }
.olympiad-medal-row {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin-top: 16px;
}
.olympiad-medal-row article {
  padding: 16px;
  border-radius: 20px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
}
.olympiad-medal-row i { color: #2563eb; font-size: 20px; }
.olympiad-medal-row b,
.olympiad-medal-row span { display: block; }
.olympiad-medal-row b { margin-top: 8px; color: #0f172a; font-weight: 600; }
.olympiad-medal-row span { margin-top: 4px; color: #64748b; font-size: 13px; }
.olympiad-subject-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.olympiad-subject-row span {
  padding: 10px 13px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #0f172a;
  font-size: 12px;
  font-weight: 500;
}
.olympiad-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid #e2e8f0;
  box-shadow: 0 18px 44px rgba(15,23,42,.12);
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
}
.olympiad-float i { color: #2563eb; }
.olympiad-float-one { left: -18px; top: 88px; }
.olympiad-float-two { right: -12px; top: 238px; }
.olympiad-float-three { left: 82px; bottom: 10px; }
.olympiad-section,
.olympiad-leaderboard-showcase,
.olympiad-final-cta {
  margin-top: 24px;
  padding: 44px;
  border-radius: 36px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 24px 70px rgba(15,23,42,.05);
}
.olympiad-section-head { max-width: 840px; margin-bottom: 26px; }
.olympiad-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.olympiad-section-head span,
.olympiad-showcase-copy span {
  display: block;
  margin-bottom: 10px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.olympiad-section-head h2,
.olympiad-showcase-copy h2,
.olympiad-final-cta h2 {
  margin: 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(30px,3vw,48px);
  font-weight: 500;
  line-height: 1.05;
}
.olympiad-need-grid,
.olympiad-recognition-grid,
.olympiad-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}
.olympiad-feature-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
}
.olympiad-need-grid article,
.olympiad-feature-grid article,
.olympiad-recognition-grid article {
  padding: 24px;
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 42px rgba(15,23,42,.05);
}
.olympiad-need-grid i,
.olympiad-feature-grid i,
.olympiad-recognition-grid i {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 17px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 20px;
}
.olympiad-need-grid h3,
.olympiad-feature-grid h3,
.olympiad-recognition-grid h3,
.olympiad-board-grid h3 {
  margin: 0 0 9px;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}
.olympiad-need-grid p,
.olympiad-feature-grid p,
.olympiad-recognition-grid p,
.olympiad-board-grid p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}
.olympiad-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 12px;
}
.olympiad-flow::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 42px;
  height: 2px;
  background: linear-gradient(90deg,#dbeafe,#2563eb,#dbeafe);
}
.olympiad-flow article {
  position: relative;
  z-index: 1;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 14px 34px rgba(15,23,42,.05);
}
.olympiad-flow article:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 31px;
  right: -17px;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #2563eb;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
}
.olympiad-flow span {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #07152f;
  color: white;
  font-size: 12px;
  font-weight: 600;
}
.olympiad-flow i { display: block; margin: 16px 0 10px; color: #2563eb; font-size: 22px; }
.olympiad-flow h3 { margin: 0; color: #0f172a; font-size: 15px; font-weight: 600; }
.olympiad-leaderboard-showcase {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 28px;
  align-items: center;
}
.olympiad-leaderboard-board { padding: 22px; }
.olympiad-kpis {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin-top: 18px;
}
.olympiad-kpis article,
.olympiad-board-grid div {
  padding: 16px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.olympiad-kpis b {
  display: block;
  color: #2563eb;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
}
.olympiad-kpis span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
}
.olympiad-board-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}
.olympiad-rank-list { grid-row: span 2; }
.olympiad-benefit-grid article,
.olympiad-usecase-pills span {
  padding: 18px;
  border-radius: 20px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #0f172a;
  font-weight: 500;
}
.olympiad-benefit-grid article { text-align: center; }
.olympiad-usecase-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.olympiad-faq { display: grid; gap: 12px; }
.olympiad-faq details {
  padding: 20px 22px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.olympiad-faq summary {
  cursor: pointer;
  color: #0f172a;
  font-weight: 600;
  list-style: none;
}
.olympiad-faq summary::-webkit-details-marker { display: none; }
.olympiad-faq p { margin: 12px 0 0; color: #64748b; line-height: 1.65; }
.olympiad-final-cta {
  text-align: center;
  background: linear-gradient(135deg,#07152f,#123a78);
  color: white;
}
.olympiad-final-cta h2 { color: white; }
.olympiad-final-cta p {
  max-width: 760px;
  margin: 14px auto 0;
  color: #bfdbfe;
}

.skill-solution-page {
  background:
    radial-gradient(circle at 8% 8%, rgba(37,99,235,.08), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(14,165,233,.09), transparent 30%),
    #f8fafc;
}
.skill-solution-page .reveal { opacity: 1; transform: translateY(0); }
body.js-ready .skill-solution-page .reveal { opacity: 0; transform: translateY(24px); }
body.js-ready .skill-solution-page .reveal.visible { opacity: 1; transform: translateY(0); }
.skill-hero,
.skill-section,
.skill-matrix-showcase,
.skill-final-cta {
  max-width: 1400px;
  margin: 0 auto;
}
.skill-hero {
  min-height: 630px;
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(440px,1.08fr);
  gap: 46px;
  align-items: center;
  padding: 60px;
  border-radius: 48px;
  background: linear-gradient(135deg, #ffffff, #f1f7ff 58%, #ffffff);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 34px 90px rgba(15,23,42,.08);
  overflow: hidden;
}
.skill-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
}
.skill-hero-copy h1 {
  margin: 18px 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(42px,5vw,68px);
  font-weight: 500;
  line-height: 1;
}
.skill-hero-copy p,
.skill-showcase-copy p {
  color: #475569;
  font-size: 17px;
  line-height: 1.7;
}
.skill-hero-visual { position: relative; min-height: 470px; }
.skill-dashboard-card,
.skill-matrix-board {
  border-radius: 34px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(226,232,240,.92);
  box-shadow: 0 30px 80px rgba(15,23,42,.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.skill-dashboard-card {
  min-height: 430px;
  padding: 22px;
  transform: perspective(1000px) rotateY(-7deg) rotateX(5deg);
}
.skill-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}
.skill-window-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dbeafe;
}
.skill-window-bar span { margin-left: 8px; }
.skill-role-card {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient(135deg,#07152f,#123a78);
  color: white;
}
.skill-role-card b,
.skill-role-card span,
.skill-role-card strong { display: block; }
.skill-role-card b { font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.skill-role-card span { margin-top: 5px; color: #bfdbfe; font-size: 13px; }
.skill-role-card strong { color: #93c5fd; font-family: var(--font-display); font-size: 46px; font-weight: 500; }
.skill-matrix {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 16px;
}
.skill-matrix span,
.skill-matrix b {
  padding: 13px 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.skill-matrix span { color: #64748b; font-size: 13px; }
.skill-matrix b { color: #2563eb; font-weight: 600; }
.skill-gap-mini {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.skill-gap-mini i {
  height: 12px;
  width: var(--w);
  border-radius: 999px;
  background: linear-gradient(90deg,#bfdbfe,#2563eb);
}
.skill-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid #e2e8f0;
  box-shadow: 0 18px 44px rgba(15,23,42,.12);
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
}
.skill-float i { color: #2563eb; }
.skill-float-one { left: -18px; top: 88px; }
.skill-float-two { right: -12px; top: 238px; }
.skill-float-three { left: 82px; bottom: 10px; }
.skill-section,
.skill-matrix-showcase,
.skill-final-cta {
  margin-top: 24px;
  padding: 44px;
  border-radius: 36px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 24px 70px rgba(15,23,42,.05);
}
.skill-section-head { max-width: 840px; margin-bottom: 26px; }
.skill-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.skill-section-head span,
.skill-showcase-copy span {
  display: block;
  margin-bottom: 10px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.skill-section-head h2,
.skill-showcase-copy h2,
.skill-final-cta h2 {
  margin: 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(30px,3vw,48px);
  font-weight: 500;
  line-height: 1.05;
}
.skill-matter-grid,
.skill-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}
.skill-help-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
}
.skill-feature-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
}
.skill-matter-grid article,
.skill-help-grid article,
.skill-feature-grid article {
  padding: 24px;
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 42px rgba(15,23,42,.05);
}
.skill-matter-grid i,
.skill-help-grid i,
.skill-feature-grid i {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 17px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 20px;
}
.skill-matter-grid h3,
.skill-help-grid h3,
.skill-feature-grid h3,
.skill-board-grid h3 {
  margin: 0 0 9px;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}
.skill-matter-grid p,
.skill-help-grid p,
.skill-feature-grid p,
.skill-board-grid p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}
.skill-node-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 12px;
}
.skill-node-flow::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 43px;
  height: 2px;
  background: linear-gradient(90deg,#dbeafe,#2563eb,#dbeafe);
}
.skill-node-flow article {
  position: relative;
  z-index: 1;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 14px 34px rgba(15,23,42,.05);
}
.skill-node-flow article:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 31px;
  right: -17px;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #2563eb;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
}
.skill-node-flow span {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #07152f;
  color: white;
  font-size: 12px;
  font-weight: 600;
}
.skill-node-flow i { display: block; margin: 16px 0 10px; color: #2563eb; font-size: 22px; }
.skill-node-flow h3 { margin: 0; color: #0f172a; font-size: 15px; font-weight: 600; }
.skill-matrix-showcase {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 28px;
  align-items: center;
}
.skill-matrix-board { padding: 22px; }
.skill-board-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin-top: 18px;
}
.skill-board-grid article {
  padding: 16px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.skill-board-grid article.primary {
  background: linear-gradient(135deg,#07152f,#123a78);
  color: white;
}
.skill-board-grid article.primary b {
  display: block;
  color: #93c5fd;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 500;
}
.skill-board-grid article.primary span { color: #bfdbfe; }
.skill-benefit-grid article,
.skill-usecase-pills span {
  padding: 18px;
  border-radius: 20px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #0f172a;
  font-weight: 500;
}
.skill-benefit-grid article { text-align: center; }
.skill-usecase-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.skill-faq { display: grid; gap: 12px; }
.skill-faq details {
  padding: 20px 22px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.skill-faq summary {
  cursor: pointer;
  color: #0f172a;
  font-weight: 600;
  list-style: none;
}
.skill-faq summary::-webkit-details-marker { display: none; }
.skill-faq p { margin: 12px 0 0; color: #64748b; line-height: 1.65; }
.skill-final-cta {
  text-align: center;
  background: linear-gradient(135deg,#07152f,#123a78);
  color: white;
}
.skill-final-cta h2 { color: white; }
.skill-final-cta p {
  max-width: 760px;
  margin: 14px auto 0;
  color: #bfdbfe;
}

.campus-solution-page {
  background:
    radial-gradient(circle at 8% 8%, rgba(37,99,235,.08), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(14,165,233,.09), transparent 30%),
    #f8fafc;
}
.campus-solution-page .reveal { opacity: 1; transform: translateY(0); }
body.js-ready .campus-solution-page .reveal { opacity: 0; transform: translateY(24px); }
body.js-ready .campus-solution-page .reveal.visible { opacity: 1; transform: translateY(0); }
.campus-hero,
.campus-section,
.campus-intelligence,
.campus-final-cta {
  max-width: 1400px;
  margin: 0 auto;
}
.campus-hero {
  min-height: 630px;
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(450px,1.1fr);
  gap: 46px;
  align-items: center;
  padding: 60px;
  border-radius: 48px;
  background: linear-gradient(135deg,#ffffff,#f1f7ff 58%,#ffffff);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 34px 90px rgba(15,23,42,.08);
  overflow: hidden;
}
.campus-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  padding: 10px 14px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
}
.campus-hero-copy h1 {
  margin: 18px 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(42px,5vw,74px);
  font-weight: 500;
  line-height: 1;
}
.campus-hero-copy p,
.campus-intelligence-copy p {
  color: #475569;
  font-size: 17px;
  line-height: 1.7;
}
.campus-hero-visual { position: relative; min-height: 470px; }
.campus-funnel-card,
.campus-intelligence-board {
  border-radius: 34px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(226,232,240,.92);
  box-shadow: 0 30px 80px rgba(15,23,42,.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.campus-funnel-card {
  min-height: 430px;
  padding: 22px;
  transform: perspective(1000px) rotateY(-7deg) rotateX(5deg);
}
.campus-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}
.campus-window-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dbeafe;
}
.campus-window-bar span { margin-left: 8px; }
.campus-funnel-stages {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin-top: 22px;
}
.campus-funnel-stages span {
  padding: 12px;
  border-radius: 16px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #0f172a;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}
.campus-highlight {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  padding: 22px;
  border-radius: 26px;
  background: linear-gradient(135deg,#07152f,#123a78);
  color: white;
}
.campus-highlight i {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  color: #bfdbfe;
  font-size: 24px;
}
.campus-highlight b,
.campus-highlight p,
.campus-highlight strong { display: block; margin: 0; }
.campus-highlight b { font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.campus-highlight p { margin-top: 5px; color: #bfdbfe; font-size: 13px; }
.campus-highlight strong { color: #93c5fd; font-family: var(--font-display); font-size: 34px; font-weight: 500; }
.campus-mini-grid,
.campus-kpis {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin-top: 16px;
}
.campus-mini-grid article,
.campus-kpis article,
.campus-widget-grid article {
  padding: 16px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.campus-mini-grid b,
.campus-kpis b {
  display: block;
  color: #2563eb;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
}
.campus-mini-grid span,
.campus-kpis span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}
.campus-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid #e2e8f0;
  box-shadow: 0 18px 44px rgba(15,23,42,.12);
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
}
.campus-float i { color: #2563eb; }
.campus-float-one { left: -18px; top: 88px; }
.campus-float-two { right: -12px; top: 238px; }
.campus-float-three { left: 82px; bottom: 10px; }
.campus-section,
.campus-intelligence,
.campus-final-cta {
  margin-top: 24px;
  padding: 44px;
  border-radius: 36px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 24px 70px rgba(15,23,42,.05);
}
.campus-section-head { max-width: 840px; margin-bottom: 26px; }
.campus-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.campus-section-head span,
.campus-intelligence-copy span {
  display: block;
  margin-bottom: 10px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.campus-section-head h2,
.campus-intelligence-copy h2,
.campus-final-cta h2 {
  margin: 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(30px,3vw,48px);
  font-weight: 500;
  line-height: 1.05;
}
.campus-challenge-grid,
.campus-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}
.campus-help-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
}
.campus-feature-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
}
.campus-challenge-grid article,
.campus-help-grid article,
.campus-feature-grid article {
  padding: 24px;
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 42px rgba(15,23,42,.05);
}
.campus-challenge-grid i,
.campus-help-grid i,
.campus-feature-grid i {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 17px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 20px;
}
.campus-challenge-grid h3,
.campus-help-grid h3,
.campus-feature-grid h3,
.campus-widget-grid h3 {
  margin: 0 0 9px;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}
.campus-challenge-grid p,
.campus-help-grid p,
.campus-feature-grid p,
.campus-widget-grid p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}
.campus-pipeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 12px;
}
.campus-pipeline::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 43px;
  height: 2px;
  background: linear-gradient(90deg,#dbeafe,#2563eb,#dbeafe);
}
.campus-pipeline article {
  position: relative;
  z-index: 1;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 14px 34px rgba(15,23,42,.05);
}
.campus-pipeline article:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 31px;
  right: -17px;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #2563eb;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
}
.campus-pipeline span {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #07152f;
  color: white;
  font-size: 12px;
  font-weight: 600;
}
.campus-pipeline i { display: block; margin: 16px 0 10px; color: #2563eb; font-size: 22px; }
.campus-pipeline h3 { margin: 0; color: #0f172a; font-size: 15px; font-weight: 600; }
.campus-intelligence {
  display: grid;
  grid-template-columns: .74fr 1.26fr;
  gap: 28px;
  align-items: center;
}
.campus-intelligence-board { padding: 22px; }
.campus-kpis { grid-template-columns: repeat(5,minmax(0,1fr)); }
.campus-widget-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}
.campus-bars {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 78px;
  margin-top: 10px;
}
.campus-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg,#60a5fa,#2563eb);
}
.campus-benefit-grid article,
.campus-usecase-grid article {
  padding: 18px;
  border-radius: 20px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #0f172a;
  font-weight: 500;
  text-align: center;
}
.campus-usecase-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
}
.campus-faq { display: grid; gap: 12px; }
.campus-faq details {
  padding: 20px 22px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.campus-faq summary {
  cursor: pointer;
  color: #0f172a;
  font-weight: 600;
  list-style: none;
}
.campus-faq summary::-webkit-details-marker { display: none; }
.campus-faq p { margin: 12px 0 0; color: #64748b; line-height: 1.65; }
.campus-final-cta {
  text-align: center;
  background: linear-gradient(135deg,#07152f,#123a78);
  color: white;
}
.campus-final-cta h2 { color: white; }
.campus-final-cta p {
  max-width: 760px;
  margin: 14px auto 0;
  color: #bfdbfe;
}

@media (max-width: 1100px) {
  .school-hero,
  .school-dashboard-showcase {
    grid-template-columns: 1fr;
  }
  .school-hero {
    padding: 42px;
  }
  .school-problem-grid,
  .school-feature-grid,
  .school-help-grid,
  .school-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .school-workflow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .school-workflow::before {
    display: none;
  }
  .university-hero,
  .university-dashboard-showcase {
    grid-template-columns: 1fr;
  }
  .university-hero {
    padding: 42px;
  }
  .university-challenge-grid,
  .university-feature-grid,
  .university-help-grid,
  .university-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .university-timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .university-timeline::before {
    display: none;
  }
  .institute-hero,
  .institute-dashboard-showcase {
    grid-template-columns: 1fr;
  }
  .institute-hero {
    padding: 42px;
  }
  .institute-challenge-grid,
  .institute-feature-grid,
  .institute-help-grid,
  .institute-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .institute-process-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .institute-process-row::before,
  .institute-process-row article::after {
    display: none;
  }
  .entrance-hero,
  .entrance-command-center {
    grid-template-columns: 1fr;
  }
  .entrance-hero {
    padding: 42px;
  }
  .entrance-complex-grid,
  .entrance-security-grid,
  .entrance-benefit-grid,
  .entrance-feature-grid,
  .entrance-usecase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .entrance-funnel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .entrance-funnel::before,
  .entrance-funnel article::after {
    display: none;
  }
  .olympiad-hero,
  .olympiad-leaderboard-showcase {
    grid-template-columns: 1fr;
  }
  .olympiad-hero {
    padding: 42px;
  }
  .olympiad-need-grid,
  .olympiad-recognition-grid,
  .olympiad-benefit-grid,
  .olympiad-feature-grid,
  .olympiad-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .olympiad-flow::before,
  .olympiad-flow article::after {
    display: none;
  }
  .skill-hero,
  .skill-matrix-showcase {
    grid-template-columns: 1fr;
  }
  .skill-hero {
    padding: 42px;
  }
  .skill-matter-grid,
  .skill-benefit-grid,
  .skill-help-grid,
  .skill-feature-grid,
  .skill-node-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .skill-node-flow::before,
  .skill-node-flow article::after {
    display: none;
  }
  .campus-hero,
  .campus-intelligence {
    grid-template-columns: 1fr;
  }
  .campus-hero {
    padding: 42px;
  }
  .campus-challenge-grid,
  .campus-benefit-grid,
  .campus-help-grid,
  .campus-feature-grid,
  .campus-pipeline,
  .campus-usecase-grid,
  .campus-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .campus-pipeline::before,
  .campus-pipeline article::after {
    display: none;
  }
  .sol-hero,
  .sol-split,
  .sol-showcase {
    grid-template-columns: 1fr;
  }
  .sol-hero {
    padding: 42px;
  }
  .sol-visual {
    min-height: 420px;
  }
  .sol-workflow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .solution-schools .sol-hero,
  .solution-university .sol-hero,
  .solution-institute .sol-hero,
  .solution-entrance .sol-hero,
  .solution-olympiad .sol-hero,
  .solution-aptitude .sol-hero,
  .solution-skill .sol-hero,
  .solution-campus .sol-hero,
  .solution-university .sol-showcase,
  .solution-institute .sol-showcase,
  .solution-entrance .sol-showcase,
  .solution-olympiad .sol-showcase,
  .solution-skill .sol-showcase,
  .solution-campus .sol-showcase {
    grid-template-columns: 1fr;
  }
  .solution-schools .sol-feature-grid,
  .solution-university .sol-feature-grid,
  .solution-institute .sol-card-grid,
  .solution-institute .sol-benefit-grid,
  .solution-entrance .sol-feature-grid,
  .solution-skill .sol-feature-grid,
  .solution-skill .sol-benefit-grid,
  .solution-skill .sol-audience-grid,
  .solution-campus .sol-feature-grid,
  .solution-campus .sol-workflow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .solution-entrance .sol-step {
    grid-template-columns: 52px 1fr;
  }
  .solution-entrance .sol-step p {
    grid-column: 2;
  }
}

@media (max-width: 760px) {
  .school-hero {
    min-height: 0;
    padding: 30px 22px;
    border-radius: 32px;
  }
  .school-hero-copy h1 {
    font-size: 40px;
  }
  .school-hero-visual {
    min-height: 0;
  }
  .school-dashboard-card {
    min-height: 0;
    padding: 16px;
    transform: none;
  }
  .school-section,
  .school-dashboard-showcase,
  .school-final-cta {
    padding: 26px 18px;
    border-radius: 28px;
  }
  .school-problem-grid,
  .school-feature-grid,
  .school-help-grid,
  .school-benefit-grid,
  .school-workflow,
  .school-kpis,
  .school-board-grid,
  .school-score-row {
    grid-template-columns: 1fr;
  }
  .school-float {
    position: static;
    margin-top: 10px;
  }
  .school-subject-bars {
    height: 144px;
  }
  .school-subject-bars h3 {
    min-width: 0;
    font-size: 16px;
  }
  .university-hero {
    min-height: 0;
    padding: 30px 22px;
    border-radius: 32px;
  }
  .university-hero-copy h1 {
    font-size: 40px;
  }
  .university-hero-visual {
    min-height: 0;
  }
  .university-console {
    min-height: 0;
    padding: 16px;
    transform: none;
  }
  .university-section,
  .university-dashboard-showcase,
  .university-final-cta {
    padding: 26px 18px;
    border-radius: 28px;
  }
  .university-challenge-grid,
  .university-feature-grid,
  .university-help-grid,
  .university-benefit-grid,
  .university-timeline,
  .university-kpis,
  .university-board-grid,
  .university-dept-grid,
  .university-analytics-strip {
    grid-template-columns: 1fr;
  }
  .university-float {
    position: static;
    margin-top: 10px;
  }
  .institute-hero {
    min-height: 0;
    padding: 30px 22px;
    border-radius: 32px;
  }
  .institute-hero-copy h1 {
    font-size: 40px;
  }
  .institute-hero-visual {
    min-height: 0;
  }
  .institute-console {
    min-height: 0;
    padding: 16px;
    transform: none;
  }
  .institute-section,
  .institute-dashboard-showcase,
  .institute-final-cta {
    padding: 26px 18px;
    border-radius: 28px;
  }
  .institute-challenge-grid,
  .institute-feature-grid,
  .institute-help-grid,
  .institute-benefit-grid,
  .institute-progress-grid,
  .institute-kpis,
  .institute-board-grid {
    grid-template-columns: 1fr;
  }
  .institute-process-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .institute-process-row::before,
  .institute-process-row article::after {
    display: none;
  }
  .institute-float {
    position: static;
    margin-top: 10px;
  }
  .entrance-hero {
    min-height: 0;
    padding: 30px 22px;
    border-radius: 32px;
  }
  .entrance-hero-copy h1 {
    font-size: 40px;
  }
  .entrance-hero-visual {
    min-height: 0;
  }
  .entrance-pipeline-card {
    min-height: 0;
    padding: 16px;
    transform: none;
  }
  .entrance-section,
  .entrance-command-center,
  .entrance-final-cta {
    padding: 26px 18px;
    border-radius: 28px;
  }
  .entrance-pipeline-stages,
  .entrance-mini-grid,
  .entrance-command-kpis,
  .entrance-widget-grid,
  .entrance-complex-grid,
  .entrance-security-grid,
  .entrance-benefit-grid,
  .entrance-feature-grid,
  .entrance-usecase-grid,
  .entrance-funnel {
    grid-template-columns: 1fr;
  }
  .entrance-ticket {
    grid-template-columns: 1fr;
  }
  .entrance-float {
    position: static;
    margin-top: 10px;
  }
  .olympiad-hero {
    min-height: 0;
    padding: 30px 22px;
    border-radius: 32px;
  }
  .olympiad-hero-copy h1 {
    font-size: 40px;
  }
  .olympiad-hero-visual {
    min-height: 0;
  }
  .olympiad-board-card {
    min-height: 0;
    padding: 16px;
    transform: none;
  }
  .olympiad-section,
  .olympiad-leaderboard-showcase,
  .olympiad-final-cta {
    padding: 26px 18px;
    border-radius: 28px;
  }
  .olympiad-need-grid,
  .olympiad-recognition-grid,
  .olympiad-benefit-grid,
  .olympiad-feature-grid,
  .olympiad-flow,
  .olympiad-kpis,
  .olympiad-board-grid,
  .olympiad-medal-row {
    grid-template-columns: 1fr;
  }
  .olympiad-title-card {
    grid-template-columns: 1fr;
  }
  .olympiad-float {
    position: static;
    margin-top: 10px;
  }
  .skill-hero {
    min-height: 0;
    padding: 30px 22px;
    border-radius: 32px;
  }
  .skill-hero-copy h1 {
    font-size: 40px;
  }
  .skill-hero-visual {
    min-height: 0;
  }
  .skill-dashboard-card {
    min-height: 0;
    padding: 16px;
    transform: none;
  }
  .skill-section,
  .skill-matrix-showcase,
  .skill-final-cta {
    padding: 26px 18px;
    border-radius: 28px;
  }
  .skill-matter-grid,
  .skill-benefit-grid,
  .skill-help-grid,
  .skill-feature-grid,
  .skill-node-flow,
  .skill-board-grid {
    grid-template-columns: 1fr;
  }
  .skill-role-card {
    flex-direction: column;
  }
  .skill-float {
    position: static;
    margin-top: 10px;
  }
  .campus-hero {
    min-height: 0;
    padding: 30px 22px;
    border-radius: 32px;
  }
  .campus-hero-copy h1 {
    font-size: 40px;
  }
  .campus-hero-visual {
    min-height: 0;
  }
  .campus-funnel-card {
    min-height: 0;
    padding: 16px;
    transform: none;
  }
  .campus-section,
  .campus-intelligence,
  .campus-final-cta {
    padding: 26px 18px;
    border-radius: 28px;
  }
  .campus-funnel-stages,
  .campus-mini-grid,
  .campus-kpis,
  .campus-widget-grid,
  .campus-challenge-grid,
  .campus-benefit-grid,
  .campus-help-grid,
  .campus-feature-grid,
  .campus-pipeline,
  .campus-usecase-grid {
    grid-template-columns: 1fr;
  }
  .campus-highlight {
    grid-template-columns: 1fr;
  }
  .campus-float {
    position: static;
    margin-top: 10px;
  }
  .sol-hero {
    min-height: 0;
    padding: 30px 22px;
    border-radius: 32px;
  }
  .sol-copy h1 {
    font-size: 40px;
  }
  .sol-copy p {
    font-size: 16px;
  }
  .sol-section {
    padding: 26px 18px;
    border-radius: 28px;
  }
  .sol-card-grid,
  .sol-feature-grid,
  .sol-kpi-grid,
  .sol-benefit-grid,
  .sol-audience-grid,
  .sol-workflow {
    grid-template-columns: 1fr;
  }
  .sol-visual {
    min-height: 360px;
  }
  .sol-dashboard {
    min-height: 340px;
    padding: 16px;
    transform: none;
  }
  .sol-dash-grid {
    grid-template-columns: 1fr;
  }
  .sol-float-card {
    position: static;
    margin-top: 10px;
  }
  .solution-schools .sol-feature-grid,
  .solution-schools .sol-benefit-grid,
  .solution-university .sol-feature-grid,
  .solution-university .sol-kpi-grid,
  .solution-university .sol-card-grid,
  .solution-institute .sol-card-grid,
  .solution-institute .sol-benefit-grid,
  .solution-institute .sol-workflow,
  .solution-entrance .sol-feature-grid,
  .solution-entrance .sol-workflow,
  .solution-olympiad .sol-benefit-grid,
  .solution-aptitude .sol-workflow,
  .solution-skill .sol-feature-grid,
  .solution-skill .sol-benefit-grid,
  .solution-skill .sol-audience-grid,
  .solution-skill .sol-showcase,
  .solution-campus .sol-feature-grid,
  .solution-campus .sol-workflow {
    grid-template-columns: 1fr;
  }
  .solution-entrance .sol-step {
    display: block;
  }
  .solution-entrance .sol-step span {
    margin-bottom: 14px;
  }
}

.hero {
  position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; background: white;
  border: 0; box-shadow: var(--soft-shadow); overflow: hidden; min-height: 88vh; display: flex; flex-direction: column;
}
.hero-slider { isolation: isolate; }
.hero-slide-koetalent {
  background:
    radial-gradient(
      circle at center,
      #F2F3F7 0%,
      #EAECF3 60%,
      #E4E7EF 100%
    );
}
.hero-slide-koeskor {
  background: #EAECF3;
}
.hero-slide-koeskor::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* background: linear-gradient(
    90deg,
    rgba(234,236,243,0.95) 0%,
    rgba(234,236,243,0.88) 35%,
    rgba(234,236,243,0.45) 60%,
    rgba(234,236,243,0) 100%
  ); */
}
.hero-slide-koeskor .hero-content {
  z-index: 3;
  max-width: 45%;
}



.hero-slide-koekraft .hero-content h1,
.hero-slide-koekraft .hero-content p {
  color: white;
}




.hero-video { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; user-select: none; }
.hero-video video,
.hero-video img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 1000ms; }
.hero-video img { display: none; }
.hero-media-layer { opacity: 0; transition: opacity 720ms ease; }
.hero-media-layer.is-active { opacity: 1; }
.hero-media-layer.use-image video { display: none; }
.hero-media-layer.use-image img { display: block; }
.hero-content { position: relative; z-index: 20; flex: 1; padding: 48px 32px 0; display: flex; flex-direction: column; align-items: flex-start; }
.hero-slide-copy { transition: opacity 620ms ease, transform 620ms ease; }
.hero-slide-copy.is-changing { opacity: 0; transform: translateY(20px); }
.badge { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-bottom: 24px; padding: 6px 16px; border-radius: 999px; background: rgba(255,255,255,.8); backdrop-filter: blur(4px); border: 1px solid rgba(226,232,240,.6); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.badge.slate { background: #f8fafc; }
.dot { width: 6px; height: 6px; border-radius: 999px; background: #10b981; display: inline-block; }
.dot.blue { background: #3b82f6; }
.badge span:last-child, .eyebrow { font-size: 11px; font-weight: 600; color: #94a3b8; letter-spacing: .1em; text-transform: uppercase; }
.badge span:last-child { color: #475569; letter-spacing: .04em; }
.hero h1, .page-hero h1 { margin: 0; font-family: var(--font-display); font-size: 42px; font-weight: 500; letter-spacing: 0; line-height: .95; color: var(--ink); }
.hero p, .page-hero p { margin: 20px 0 0; color: var(--muted); max-width: 460px; font-size: 14px; line-height: 1.625; }
.btn-row { display: flex; align-items: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; padding: 12px 24px; font-size: 13px; font-weight: 600; transition: transform .18s, background .18s, border-color .18s; }
.btn:hover { transform: scale(1.04); }
.btn:active { transform: scale(.98); }
.btn.dark { background: var(--navy); color: white; box-shadow: 0 10px 15px -3px rgba(15,23,42,.1); }
.btn.light { background: white; color: var(--ink); border: 1px solid rgba(226,232,240,.6); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.hero-arrow {
  position: absolute;
  z-index: 35;
  top: 50%;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  color: #0f172a;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.72);
  box-shadow: 0 14px 34px rgba(15,23,42,.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.hero-arrow:hover {
  transform: translateY(-50%) scale(1.05);
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 42px rgba(15,23,42,.12);
}
.hero-arrow-left { left: 15px; }
.hero-arrow-right { right: 24px; }
.hero-dots {
  position: absolute;
  z-index: 35;
  left: 50%;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.7);
  box-shadow: 0 12px 30px rgba(15,23,42,.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateX(-50%);
}
.hero-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 999px;
  background: #cbd5e1;
  transition: width .24s ease, background .24s ease, transform .24s ease;
}
.hero-dot:hover { transform: scale(1.18); }
.hero-dot.is-active { width: 24px; background: #07152f; }

.brand-mark { width: 36px; height: 36px; border-radius: 999px; background: white; border: 1px solid #f1f5f9; box-shadow: 0 1px 2px rgba(0,0,0,.05); display: flex; align-items: center; justify-content: center; font-weight: 700; margin-right: 4px; }

.marquee { position: relative; overflow: hidden; margin-top: 40px; }
.marquee::before { content: ""; position: absolute; inset: 0; z-index: 10; pointer-events: none; backdrop-filter: none; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.marquee-track { display: flex; gap: 0; width: max-content; animation: marquee 32s linear infinite; will-change: transform; }
.marquee-track:hover { animation-play-state: paused; }
.logo-card { position: relative; height: 96px; width: 160px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 28px; background: white; border: 1px solid rgba(226,232,240,.6); box-shadow: 0 1px 2px rgba(0,0,0,.05); overflow: hidden; cursor: pointer; margin-right: 16px; }
.logo-card::before { content: ""; position: absolute; inset: 0; opacity: 0; transform: scale(1.5); transition: .5s; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.logo-card:hover::before { opacity: 1; transform: scale(1); }
.logo-card img { position: relative; z-index: 1; height: 54px; width: auto; max-width: 112px; object-fit: contain; transition: .3s; }
.logo-card:hover img { filter: brightness(0) invert(1); }

.page-hero { width: 100%; max-width: 1400px; margin: 0 auto; border-radius: 48px; background: white; border: 1px solid var(--line); box-shadow: var(--soft-shadow); overflow: hidden; padding: 64px 32px; }
.page-hero > div { max-width: 768px; }
.page-hero h1 { font-size: 44px; }
.page-hero p { margin-top: 24px; max-width: 500px; }
.section-wrap { width: 100vw; max-width: 100vw; margin: 40px calc(50% - 50vw) 0; padding: 0; }
.section-inner { width: 100%; max-width: 100%; border-radius: 0; overflow: hidden; padding: 64px 48px; background: white; border: 0; box-shadow: var(--soft-shadow); }
.section-inner.dark { background: var(--navy); border: 0; box-shadow: none; color: white; }
.section-inner.soft { background: #f8fafc; border: 0; box-shadow: none; }
.section-head { text-align: center; max-width: 672px; margin: 0 auto 56px; }
.section-head h2 { margin: 12px 0 0; font-family: var(--font-display); font-size: 32px; font-weight: 500; line-height: 1.05; color: var(--ink); }
.section-head p { margin: 16px 0 0; color: #64748b; font-size: 14px; line-height: 1.625; }
.dark .section-head h2 { color: white; }
.dark .section-head p { color: #94a3b8; }
.section-title { margin: 5px 0 0; font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: 0; line-height: 1.05; color: var(--ink); }
.dark .section-title { color: white; }
.lead { margin: 20px 0 0; color: #475569; max-width: 420px; font-size: 14px; line-height: 1.625; }
.dark .lead, .darklead { color: #94a3b8; }

.grid { display: grid; gap: 20px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 64px; align-items: center; }
.card { position: relative; border-radius: 24px; background: #f8fafc; border: 1px solid #f1f5f9; padding: 24px; transition: .3s; overflow: hidden; }
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
.product-card { border-radius: 32px; padding: 28px; background: linear-gradient(135deg, var(--g1), var(--g2)); border: 1px solid var(--border); min-height: 230px; cursor: pointer; }
.product-card.tall { min-height: 100%; padding: 32px; display: flex; flex-direction: column; }
.icon-box { width: 44px; height: 44px; border-radius: 16px; background: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,.05); margin-bottom: 20px; color: var(--icon); }
.icon-3d {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,245,249,.78)),
    radial-gradient(circle at 25% 18%, rgba(255,255,255,.9), transparent 34%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -12px 18px rgba(15,23,42,.04),
    0 18px 32px rgba(15,23,42,.12),
    0 8px 0 rgba(37,99,235,.12);
  transform: perspective(680px) rotateX(10deg) rotateY(-9deg);
}
.icon-3d svg {
  display: block;
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 8px 8px rgba(15,23,42,.12));
}
.feature-card .icon-box { width: 48px; height: 48px; background: #dbeafe; color: #2563eb; }
.card h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); }
.product-card h3 { font-size: 17px; }
.about-product-card {
  min-height: 260px;
  box-shadow: 0 20px 50px rgba(15,23,42,.07);
}
.about-product-card:hover .icon-3d,
.choose-card:hover .icon-3d {
  transform: perspective(680px) rotateX(6deg) rotateY(-4deg) translateY(-4px);
}
.card p { margin: 0; color: #64748b; font-size: 13px; line-height: 1.625; }
.muted-label { color: #64748b; font-size: 12px; font-weight: 500; margin-bottom: 12px; }
.feature-list { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 8px; }
.feature-list li { display: flex; align-items: center; gap: 8px; color: #64748b; font-size: 12px; }
.tiny-dot { width: 4px; height: 4px; border-radius: 999px; background: #94a3b8; flex: 0 0 auto; }
.link-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #334155; padding: 0; font-size: 13px; font-weight: 600; margin-top: auto; }

.mock { border-radius: 28px; background: #f8fafc; border: 1px solid #f1f5f9; padding: 24px; }
.mock.white { background: white; border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.mock.darkmock { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); padding: 4px; backdrop-filter: blur(4px); }
.panel-dark { border-radius: 24px; background: #0d1e40; border: 1px solid rgba(255,255,255,.05); overflow: hidden; }
.darkbar { padding: 20px; border-bottom: 1px solid rgba(255,255,255,.05); display: flex; align-items: center; justify-content: space-between; color: #cbd5e1; font-size: 11px; font-weight: 600; }
.video-grid { padding: 20px; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.video-cell { aspect-ratio: 16/9; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.05); position: relative; overflow: hidden; }
.video-cell::after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.1); transform: translate(-50%,-50%); }
.video-cell.alert { border: 2px solid rgba(244,63,94,.6); }
.dark-stats { display: flex; gap: 12px; padding: 0 20px 20px; }
.dark-stat { flex: 1; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.05); padding: 12px; }
.dark-stat small { color: #64748b; font-size: 10px; }
.dark-stat b { display: block; color: #34d399; font-size: 20px; font-family: var(--font-display); margin-top: 4px; }
.chip-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 16px; }
.chip { display: flex; align-items: flex-start; gap: 12px; border-radius: 16px; border: 1px solid var(--border); background: white; box-shadow: 0 1px 2px rgba(0,0,0,.05); padding: 16px; transition: .2s; }
.chip:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); }
.chip .icon-box { width: 36px; height: 36px; margin: 0; background: var(--g1); color: var(--icon); border: 1px solid var(--border); border-radius: 12px; flex: 0 0 auto; }
.chip b { display: block; font-size: 13px; color: var(--ink); }
.chip span { display: block; color: #64748b; font-size: 11px; line-height: 1.35; margin-top: 2px; }

.list { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.list li { display: flex; align-items: center; gap: 10px; color: #334155; font-size: 13px; }
.check { width: 20px; height: 20px; border-radius: 50%; background: #d1fae5; color: #059669; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pill-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 16px; font-size: 12px; font-weight: 600; color: var(--pill-ink); background: var(--pill-bg);
position:relative !important; }
.progress-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.bar { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; flex: 1; }
.bar span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--bar, #10b981); transform-origin: left; }
.mini-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border-radius: 12px;
  background: white;
  border: 1px solid #f1f5f9;
  padding: 16px 20px;
  margin-top: 12px;
}
.mini-row span { min-width: 0; }
.mini-row span b,
.mini-row span small { display: block; }
.mini-row > b {
  min-width: 42px;
  justify-self: end;
  text-align: right;
  font-family: var(--font-display);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}
.mini-row-logo {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) minmax(180px, auto) minmax(72px, 1fr);
  align-items: center;
  justify-items: center;
}
.mini-row-logo span:first-child { justify-self: start; }
.mini-row-logo span:last-child { justify-self: end; }
.mini-row-logo > b { justify-self: center; min-width: 0; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; }
.mini-row-logo > b img { display: block; width: clamp(150px, 18vw, 230px) !important; max-width: 100%; height: auto; margin: 0 auto; }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.stat { border-radius: 16px; background: #f8fafc; border: 1px solid #f1f5f9; padding: 20px; }
.stat b { display: block; font-family: var(--font-display); color: var(--ink); font-size: 24px; }
.stat span { display: block; color: #64748b; font-size: 12px; margin-top: 2px; }
.stat small { display: block; color: #059669; font-size: 11px; font-weight: 600; margin-top: 4px; }
.chart { display: flex; align-items: end; gap: 8px; height: 144px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.chart-bar { width: 100%; height: var(--h); border-radius: 8px 8px 0 0; background: #cbd5e1; }
.chart-bar.high { background: var(--navy); }
.chart-col small { color: #94a3b8; font-size: 9px; }

.home-analytics-wrap { margin-top: 52px; }
.home-analytics-section {
  position: relative;
  overflow: hidden;
  padding: 72px 48px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .08), transparent 34%),
    linear-gradient(315deg, rgba(20, 184, 166, .10), transparent 30%),
    #ffffff;
}
.home-analytics-section::before { display: none; }
.home-analytics-head,
.home-analytics-metrics,
.home-analytics-board {
  position: relative;
  z-index: 1;
}
.home-analytics-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0 auto 34px;
}
.home-analytics-head h2 {
  max-width: 650px;
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.02;
  font-weight: 500;
  color: var(--ink);
}
.home-analytics-head p {
  max-width: 620px;
  margin: 18px 0 0;
  color: #64748b;
  font-size: 15px;
  line-height: 1.7;
}
.home-analytics-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #bbf7d0;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.home-analytics-status span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 0 6px rgba(16, 185, 129, .12);
}
.home-analytics-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: none;
  margin: 0 auto 18px;
}
.home-analytics-metrics article {
  min-height: 138px;
  padding: 22px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(226, 232, 240, .9);
  box-shadow: 0 22px 55px rgba(15, 23, 42, .06);
}
.home-analytics-metrics span,
.home-panel-topline span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.home-analytics-metrics b {
  display: block;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1;
  font-weight: 600;
  color: #0f172a;
}
.home-analytics-metrics small {
  display: inline-flex;
  margin-top: 10px;
  color: #059669;
  font-size: 12px;
  font-weight: 700;
}
.home-analytics-board {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
  gap: 18px;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  align-items: stretch;
}
.home-chart-panel,
.home-rank-panel {
  border-radius: 30px;
  background: rgba(248, 250, 252, .92);
  border: 1px solid rgba(226, 232, 240, .95);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .07);
}
.home-chart-panel { padding: 28px 28px 24px; }
.home-rank-panel { padding: 22px; }
.home-panel-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.home-panel-topline strong {
  display: block;
  margin-top: 6px;
  color: #0f172a;
  font-size: 18px;
}
.home-panel-topline > b {
  font-family: var(--font-display);
  font-size: 34px;
  color: #2563eb;
}
.home-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(18px, 1fr));
  gap: 10px;
  align-items: end;
  height: 246px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(226, 232, 240, .9);
}
.home-chart-col {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 9px;
  height: 100%;
  align-items: end;
  justify-items: center;
}
.home-chart-col span {
  width: 100%;
  min-height: 34px;
  height: var(--h);
  border-radius: 999px 999px 10px 10px;
  background: linear-gradient(180deg, #cbd5e1, #e2e8f0);
}
.home-chart-col.is-high span {
  background: linear-gradient(180deg, #2563eb, #0f172a);
  box-shadow: 0 14px 28px rgba(37, 99, 235, .22);
}
.home-chart-col small {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}
.home-score-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.home-score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px 16px;
  border-radius: 18px;
  background: white;
  border: 1px solid rgba(226, 232, 240, .88);
}
.home-score-row b,
.home-score-row small { display: block; }
.home-score-row b {
  color: #0f172a;
  font-size: 14px;
}
.home-score-row small {
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}
.home-score-row strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 15px;
}
.home-koeskor-wrap { margin-top: 52px; }
.home-koeskor-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(460px,1.08fr);
  gap: 44px;
  align-items: center;
  padding: 54px;
  overflow: hidden;
  background: radial-gradient(circle at 88% 10%, rgba(37,99,235,.13), transparent 31%), linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
}
.home-koeskor-section::before {
  content: "";
  position: absolute;
  right: 8%;
  bottom: -180px;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  background: rgba(56,189,248,.12);
  filter: blur(40px);
  pointer-events: none;
}
.home-koeskor-copy,
.home-koeskor-console { position: relative; z-index: 1; }
.home-koeskor-logo {
  width: min(190px, 54vw);
  display: block;
  margin-bottom: 18px;
}
.home-koeskor-copy h2 {
  max-width: 720px;
  margin: 10px 0 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0;
}
.home-koeskor-copy p {
  max-width: 680px;
  margin: 18px 0 0;
  color: #52657f;
  font-size: 16px;
  line-height: 1.75;
}
.home-koeskor-points {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}
.home-koeskor-points span {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #24364f;
  font-size: 15px;
  font-weight: 700;
}
.home-koeskor-points i {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 6px rgba(37,99,235,.1);
}
.home-koeskor-copy .btn-row { margin-top: 32px; }
.home-koeskor-console {
  padding: 20px;
  border-radius: 34px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 34px 90px rgba(15,23,42,.12);
}
.home-koeskor-topbar {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 22px;
  background: #07152f;
  color: white;
}
.home-koeskor-topbar span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #2563eb;
}
.home-koeskor-topbar span:nth-child(2) { background: #38bdf8; }
.home-koeskor-topbar span:nth-child(3) { background: #10b981; }
.home-koeskor-topbar b {
  margin-left: 8px;
  font-size: 13px;
}
.home-koeskor-topbar em {
  margin-left: auto;
  color: #bfdbfe;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}
.home-koeskor-status {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
  padding: 22px;
  border-radius: 26px;
  background: linear-gradient(135deg, #eff6ff, #f8fafc);
  border: 1px solid rgba(191,219,254,.9);
}
.home-koeskor-status small,
.home-koeskor-grid small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.home-koeskor-status strong {
  display: block;
  margin-top: 8px;
  color: #07152f;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
}
.home-koeskor-status p {
  margin: 7px 0 0;
  color: #64748b;
  font-size: 13px;
}
.home-koeskor-timer {
  min-width: 112px;
  padding: 18px 16px;
  border-radius: 22px;
  background: #07152f;
  color: white;
  font-family: var(--font-display);
  font-size: 30px;
  text-align: center;
  box-shadow: 0 18px 34px rgba(7,21,47,.2);
}
.home-koeskor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
.home-koeskor-grid article {
  min-height: 142px;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 12px 34px rgba(15,23,42,.05);
}
.home-koeskor-grid b {
  display: block;
  margin: 12px 0 6px;
  color: #2563eb;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
}
.home-koeskor-grid span {
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}
.home-koeskor-analytics {
  margin-top: 14px;
  padding: 20px;
  border-radius: 24px;
  background: #f8fafc;
  border: 1px solid rgba(226,232,240,.9);
}
.home-koeskor-row {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr) 44px;
  gap: 12px;
  align-items: center;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}
.home-koeskor-row + .home-koeskor-row { margin-top: 14px; }
.home-koeskor-row div {
  height: 9px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.home-koeskor-row i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: var(--bar, #2563eb);
}
.home-koeskor-row b {
  color: #07152f;
  text-align: right;
}
.cta { position: relative; text-align: center; color: white; background: var(--navy); border-radius: 0; overflow: hidden; padding: 80px 48px; }
.cta::before, .cta::after { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; filter: blur(80px); background: rgba(37,99,235,.1); pointer-events: none; }
.cta::before { top: -30%; left: 20%; }
.cta::after { right: 15%; bottom: -20%; background: rgba(14,165,233,.1); }
.cta-content { position: relative; z-index: 1; max-width: 672px; margin: 0 auto; }
.cta h2 { margin: 12px 0 0; font-family: var(--font-display); font-size: 36px; font-weight: 500; line-height: 1.05; color: white; }
.cta p { color: #94a3b8; font-size: 14px; line-height: 1.625; margin: 20px 0 0; }
.trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; margin-top: 48px; }
.trust span { display: flex; align-items: center; gap: 6px; color: #94a3b8; font-size: 12px; }






.about-hero {
  width: 100%;
  max-width: 1400px;
  min-height: 640px;
  margin: 0 auto;
  padding: 72px 64px;
  border-radius: 48px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.9)),
    radial-gradient(circle at 78% 20%, rgba(14,165,233,.14), transparent 36%);
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  align-items: center;
  gap: 56px;
  overflow: hidden;
}
.about-hero h1 {
  margin: 0;
  max-width: 760px;
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 500;
  line-height: .98;
  letter-spacing: 0;
}
.about-hero p,
.about-lead {
  margin: 22px 0 0;
  max-width: 620px;
  color: #64748b;
  font-size: 15px;
  line-height: 1.75;
}
.about-hero-visual {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1100px;
}
.visual-shell {
  width: min(100%, 480px);
  padding: 24px;
  border-radius: 36px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.78);
  box-shadow: 0 40px 90px rgba(15,23,42,.14);
  backdrop-filter: blur(24px);
  transform: rotateY(-10deg) rotateX(6deg);
}
.visual-top,
.visual-score,
.visual-chips {
  display: flex;
  align-items: center;
}
.visual-top {
  gap: 8px;
  color: #64748b;
  font-size: 12px;
}
.visual-top span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #cbd5e1;
}
.visual-top b { margin-left: auto; color: #0f172a; }
.visual-score {
  justify-content: space-between;
  margin-top: 28px;
  padding: 28px;
  border-radius: 28px;
  background: #07152f;
  color: white;
}
.visual-score small { color: #94a3b8; font-size: 12px; }
.visual-score strong { font-family: var(--font-display); font-size: 48px; font-weight: 500; }
.visual-stack { display: grid; gap: 14px; margin-top: 24px; }
.visual-stack span {
  height: 14px;
  width: var(--w);
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  box-shadow: 0 12px 24px rgba(37,99,235,.16);
}
.visual-chips {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.visual-chips i {
  border-radius: 999px;
  padding: 9px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}
.about-welcome-panel {
  position: relative;
  padding: 72px 60px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.92)),
    radial-gradient(circle at 4% 12%, rgba(37,99,235,.08), transparent 34%),
    radial-gradient(circle at 92% 88%, rgba(14,165,233,.08), transparent 38%);
  box-shadow: 0 30px 90px rgba(15,23,42,.06);
}
.about-welcome-panel::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 36px;
  border: 1px solid rgba(226,232,240,.62);
  pointer-events: none;
}
.about-welcome-split {
  grid-template-columns: minmax(0,.92fr) minmax(360px, .9fr);
  gap: clamp(44px, 7vw, 96px);
}
.about-welcome-title,
.about-welcome-copy {
  position: relative;
  z-index: 1;
}
.about-intro-icon {
  color: #2563eb;
  margin: 0 0 26px;
}
.about-welcome-panel .section-title {
  max-width: 620px;
  font-size: clamp(36px, 4vw, 56px);
  line-height: .98;
}
.about-welcome-copy {
  padding-left: 34px;
  border-left: 1px solid rgba(148,163,184,.24);
}
.about-welcome-copy .about-lead {
  margin-top: 0;
  color: #52657f;
  font-size: 16px;
}
.about-welcome-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.about-welcome-points span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.9);
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
}
.about-welcome-points i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 5px rgba(37,99,235,.1);
  flex: 0 0 auto;
}
.about-mission-panel {
  position: relative;
  padding: 76px 60px;
  background:
    linear-gradient(135deg, #f8fafc, #ffffff),
    radial-gradient(circle at 50% 0%, rgba(14,165,233,.08), transparent 38%);
}
.mission-card,
.choose-card {
  background: rgba(255,255,255,.72);
  border-color: rgba(226,232,240,.75);
  box-shadow: 0 24px 70px rgba(15,23,42,.06);
  backdrop-filter: blur(18px);
}
.mission-card {
  min-height: 260px;
  padding: 40px 36px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,250,252,.84)),
    radial-gradient(circle at 12% 12%, rgba(37,99,235,.08), transparent 30%);
  border-color: rgba(203,213,225,.72);
}
.mission-card::after {
  content: "";
  position: absolute;
  inset: auto 28px 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  opacity: .72;
}
.mission-icon {
  color: #2563eb;
  margin-bottom: 30px;
}
.mission-card h3 { margin-top: 16px; font-size: 29px; line-height: 1.08; letter-spacing: 0; }
.mission-card p { max-width: 500px; font-size: 14px; color: #52657f; }
.about-metrics .stat {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
}
.about-metrics .stat b { color: white; font-size: 34px; }
.about-metrics .stat span { color: #cbd5e1; }
.about-metrics .stat small { color: #60a5fa; text-transform: uppercase; letter-spacing: .08em; }
.choose-card {
  min-height: 210px;
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(248,250,252,.9));
}
.choose-card .icon-3d {
  color: #2563eb;
  margin-bottom: 22px;
}
.choose-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}
.ceo-card {
  display: grid;
  grid-template-columns: 240px minmax(0,1fr);
  gap: 48px;
  align-items: center;
  border-radius: 36px;
  padding: 36px;
  background: rgba(248,250,252,.78);
  border: 1px solid #e2e8f0;
  box-shadow: 0 24px 80px rgba(15,23,42,.06);
}
.ceo-avatar {
  aspect-ratio: 1;
  border-radius: 32px;
  background: linear-gradient(145deg, #e0f2fe, #f8fafc 48%, #dbeafe);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 28px 60px rgba(37,99,235,.12);
}
.ceo-profile {
  text-align: center;
}
.ceo-avatar span {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: #2563eb;
  font-family: var(--font-display);
  font-size: 26px;
  box-shadow: 0 18px 38px rgba(15,23,42,.08);
}
blockquote {
  margin: 24px 0 0;
  color: #475569;
  font-size: 16px;
  line-height: 1.8;
}
.ceo-name {
  margin: 5px 0 0;
  color: #0a1b33;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}
.ceo-designation {
  margin: 0px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.demo-form {
  padding: 28px;
  border-radius: 32px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 28px 70px rgba(15,23,42,.08);
  backdrop-filter: blur(18px);
}
.demo-form,
.form-grid { display: grid; gap: 14px; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo-form label {
  display: grid;
  gap: 8px;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}
.demo-form input,
.demo-form select {
  width: 100%;
  height: 50px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: white;
  color: var(--ink);
  padding: 0 14px;
  font: inherit;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.demo-form .country-flag-input {
  font-family: "Segoe UI", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.demo-form input:focus,
.demo-form select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96,165,250,.18);
}
.demo-form .btn { width: fit-content; margin-top: 8px; }
.demo-cta-card {
  align-content: center;
  min-height: 100%;
}
.demo-cta-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(37,99,235,.08);
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.demo-cta-card h3 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.08;
  color: var(--ink);
}
.demo-cta-card p {
  margin: 0;
  color: #475569;
  line-height: 1.7;
}
.demo-cta-note {
  display: grid;
  gap: 12px;
  margin-top: 6px;
}
.demo-cta-note span {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}
.demo-cta-note i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #38bdf8;
  box-shadow: 0 0 0 6px rgba(56,189,248,.08);
  flex: 0 0 auto;
}
.form-status {
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.16);
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}
.has-success .form-status {
  background: rgba(16,185,129,.1);
  border-color: rgba(16,185,129,.22);
  color: #047857;
}
.has-error .form-status {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.2);
  color: #b91c1c;
}
.is-submitting button[type="submit"] {
  cursor: wait;
  opacity: .72;
}
.about-demo-dark {
  position: relative;
  background:
    linear-gradient(135deg, rgba(7,21,47,.98), rgba(10,27,51,.96)),
    radial-gradient(circle at 16% 10%, rgba(56,189,248,.2), transparent 34%),
    radial-gradient(circle at 88% 74%, rgba(37,99,235,.22), transparent 36%);
  border-color: rgba(148,163,184,.22);
  color: white;
  box-shadow: 0 34px 90px rgba(2,6,23,.2);
}
.about-demo-dark::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(135deg, black, transparent 76%);
  -webkit-mask-image: linear-gradient(135deg, black, transparent 76%);
}
.about-demo-dark > * {
  position: relative;
  z-index: 1;
}
.about-demo-dark .eyebrow { color: #7dd3fc; }
.about-demo-dark .section-title { color: white; }
.about-demo-dark .lead { color: #cbd5e1; }
.demo-logo {
  display: block;
  width: 188px;
  max-width: 72%;
  height: auto;
  margin-bottom: 34px;
}
.demo-benefits {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}
.demo-benefits span {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #dbeafe;
  font-size: 13px;
  font-weight: 700;
}
.demo-benefits i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #38bdf8;
  box-shadow: 0 0 0 6px rgba(56,189,248,.1), 0 0 24px rgba(56,189,248,.55);
  flex: 0 0 auto;
}
.about-demo-dark .demo-form {
  background: rgba(3,10,24,.78);
  border-color: rgba(148,163,184,.22);
  box-shadow: 0 28px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
}
.about-demo-dark .demo-form label { color: #e2e8f0; }
.about-demo-dark .demo-form input,
.about-demo-dark .demo-form select {
  background: rgba(15,23,42,.86);
  border-color: rgba(148,163,184,.24);
  color: white;
}
.about-demo-dark .demo-form input::placeholder { color: #94a3b8; }
.about-demo-dark .demo-form select option { color: white; }
.about-demo-dark .demo-form input:focus,
.about-demo-dark .demo-form select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 4px rgba(56,189,248,.14);
}
.about-demo-dark .demo-form .btn {
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  box-shadow: 0 18px 36px rgba(37,99,235,.28);
}
.about-demo-dark .demo-cta-kicker {
  background: rgba(56,189,248,.14);
  color: #bae6fd;
}
.about-demo-dark .demo-cta-card h3 { color: white; }
.about-demo-dark .demo-cta-card p { color: #cbd5e1; }
.about-demo-dark .demo-cta-note span { color: #dbeafe; }
.about-demo-dark .demo-cta-note i {
  box-shadow: 0 0 0 6px rgba(56,189,248,.1), 0 0 24px rgba(56,189,248,.35);
}
.site-footer {
  width: 100vw;
  max-width: 100vw;
  margin: 40px calc(50% - 50vw) 0;
  padding: 48px;
  border-radius: 0;
  background: #050b18;
  border: 0;
  box-shadow: 0 34px 90px rgba(2,6,23,.22);
  color: white;
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr .8fr 1fr;
  gap: 32px;
}
.footer-logo { width: 160px; height: auto; }
.site-footer h3 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 16px;
  color: white;
}
.site-footer p,
.site-footer a,
.footer-bottom {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.65;
}
.site-footer a:hover { color: white; }
.site-footer a { display: block; margin-top: 6px; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 0;
}
.footer-bottom a { display: inline; margin: 0 0 0 14px; }

.policy-hero {
  width: 100%;
  max-width: 1400px;
  min-height: 360px;
  margin: 0 auto;
  padding: 72px 64px;
  border-radius: 44px;
  background:
    radial-gradient(circle at 82% 22%, rgba(37,99,235,.12), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 54%, #eef6ff 100%);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: var(--soft-shadow);
  display: flex;
  align-items: center;
}
.policy-hero h1 {
  margin: 20px 0 0;
  max-width: 760px;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 500;
  line-height: .98;
  letter-spacing: 0;
  color: var(--ink);
}
.policy-hero p {
  margin: 22px 0 0;
  max-width: 720px;
  color: #52657f;
  font-size: 18px;
  line-height: 1.75;
}
.policy-layout {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.policy-summary,
.policy-document {
  border: 1px solid rgba(226,232,240,.86);
  background: rgba(255,255,255,.86);
  box-shadow: 0 28px 80px rgba(15,23,42,.06);
  backdrop-filter: blur(18px);
}
.policy-summary {
  position: sticky;
  top: 140px;
  border-radius: 28px;
  padding: 30px;
}
.policy-summary h2 {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: 0;
}
.policy-summary p {
  margin: 16px 0 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.75;
}
.policy-document {
  border-radius: 34px;
  padding: 54px;
}
.policy-document h2 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--ink);
}
.policy-document h2:not(:first-child) {
  margin-top: 46px;
}
.policy-document p {
  margin: 0 0 20px;
  color: #475569;
  font-size: 15px;
  line-height: 1.85;
}
.policy-document ul {
  margin: 0 0 22px;
  padding-left: 22px;
  color: #475569;
  font-size: 15px;
  line-height: 1.85;
}
.policy-document li {
  margin-bottom: 10px;
}
.policy-document address {
  margin-top: 28px;
  padding: 24px;
  border-radius: 22px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-style: normal;
  line-height: 1.75;
}
.policy-document address strong {
  color: var(--ink);
}

.products-hero {
  width: 100%;
  max-width: 1400px;
  min-height: 690px;
  margin: 0 auto;
  padding: 72px 64px;
  border-radius: 48px;
  background:
    radial-gradient(circle at 76% 22%, rgba(37,99,235,.12), transparent 28%),
    radial-gradient(circle at 90% 82%, rgba(56,189,248,.1), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 55%, #eef6ff 100%);
  border: 1px solid rgba(226,232,240,.78);
  box-shadow: var(--soft-shadow);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: 56px;
  align-items: center;
  overflow: hidden;
}
.products-hero h1 {
  margin: 20px 0 0;
  max-width: 720px;
  font-family: var(--font-display);
  font-size: 66px;
  font-weight: 500;
  line-height: .96;
  letter-spacing: 0;
  color: var(--ink);
}
.products-hero p {
  margin: 24px 0 0;
  max-width: 650px;
  color: #52657f;
  font-size: 16px;
  line-height: 1.8;
}
.products-hero .btn-row { margin-top: 34px; }
.products-hero-visual {
  min-height: 520px;
  position: relative;
}
.suite-orbit {
  position: relative;
  min-height: 520px;
  border-radius: 42px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(239,246,255,.56)),
    radial-gradient(circle at 50% 50%, rgba(37,99,235,.12), transparent 45%);
  border: 1px solid rgba(226,232,240,.82);
  box-shadow: 0 36px 90px rgba(15,23,42,.1);
  overflow: hidden;
}
.suite-orbit::before,
.suite-orbit::after {
  content: "";
  position: absolute;
  inset: 70px;
  border-radius: 999px;
  border: 1px dashed rgba(37,99,235,.22);
}
.suite-orbit::after {
  inset: 130px;
  border-color: rgba(56,189,248,.28);
}
.suite-core {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 210px;
  height: 210px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #07152f;
  color: white;
  box-shadow: 0 30px 70px rgba(7,21,47,.22);
  z-index: 2;
}
.suite-core img {
  width: 128px;
  padding: 10px 12px;
  border-radius: 16px;
  background: white;
}
.suite-core span {
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.suite-node {
  position: absolute;
  z-index: 3;
  width: 138px;
  min-height: 92px;
  padding: 16px 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: 0 20px 50px rgba(15,23,42,.1);
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.suite-node:hover {
  transform: translateY(-4px);
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 26px 62px rgba(37,99,235,.16);
}
.suite-node i {
  color: #2563eb;
  font-size: 21px;
}
.suite-node span {
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}
.suite-node.n1 { left: 50%; top: 30px; transform: translateX(-50%); }
.suite-node.n1:hover { transform: translateX(-50%) translateY(-4px); }
.suite-node.n2 { right: 34px; top: 118px; }
.suite-node.n3 { right: 62px; bottom: 104px; }
.suite-node.n4 { left: 50%; bottom: 30px; transform: translateX(-50%); }
.suite-node.n4:hover { transform: translateX(-50%) translateY(-4px); }
.suite-node.n5 { left: 62px; bottom: 104px; }
.suite-node.n6 { left: 34px; top: 118px; }
.suite-node.n7 { right: 42px; top: 50%; transform: translateY(-50%); }
.suite-node.n7:hover { transform: translateY(calc(-50% - 4px)); }
.products-suite {
  background:
    radial-gradient(circle at 12% 12%, rgba(37,99,235,.08), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,250,252,.9));
}
.products-suite-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.suite-product-card {
  min-height: 360px;
  padding: 30px;
  border-radius: 30px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.84);
  box-shadow: 0 26px 70px rgba(15,23,42,.06);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.suite-product-card.primary {
  grid-row: span 2;
  background:
    radial-gradient(circle at 80% 14%, rgba(56,189,248,.18), transparent 32%),
    linear-gradient(135deg, #07152f, #0a1b33);
  color: white;
}
.suite-product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 32px 80px rgba(37,99,235,.13);
}
.suite-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}
.suite-card-top i {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  background: #eff6ff;
}
.suite-product-card.primary .suite-card-top,
.suite-product-card.primary p,
.suite-product-card.primary li { color: #cbd5e1; }
.suite-product-card.primary .suite-card-top i {
  color: #60a5fa;
  background: rgba(96,165,250,.14);
}
.suite-product-card h3 {
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0;
}
.suite-product-card p {
  color: #64748b;
  font-size: 14px;
  line-height: 1.72;
}
.suite-product-card ul {
  display: grid;
  gap: 9px;
  padding: 0;
  margin: 16px 0 26px;
  list-style: none;
}
.suite-product-card li {
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}
.suite-product-card li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 999px;
  background: #2563eb;
}
.suite-product-card b {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #2563eb;
  font-size: 13px;
}
.suite-product-card.primary b { color: #93c5fd; }
.products-flow {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 42px;
  align-items: center;
  background: #07152f;
  color: white;
}
.products-flow .section-title { color: white; }
.products-flow .lead { color: #cbd5e1; }
.products-flow .eyebrow { color: #93c5fd; }
.products-flow-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.products-flow-panel article {
  min-height: 180px;
  padding: 26px;
  border-radius: 28px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
}
.products-flow-panel i {
  color: #60a5fa;
  font-size: 24px;
}
.products-flow-panel b,
.products-flow-panel span {
  display: block;
}
.products-flow-panel b {
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: white;
}
.products-flow-panel span {
  margin-top: 10px;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.6;
}
.products-match {
  background: linear-gradient(135deg, #ffffff, #f8fafc);
}
.products-match-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 12px;
}
.products-match-grid a {
  min-height: 178px;
  padding: 20px 16px;
  border-radius: 24px;
  background: white;
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 20px 50px rgba(15,23,42,.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .18s ease, border-color .18s ease;
}
.products-match-grid a:hover {
  transform: translateY(-4px);
  border-color: rgba(37,99,235,.35);
}
.products-match-grid i {
  color: #2563eb;
  font-size: 22px;
}
.products-match-grid b {
  color: #0f172a;
  font-size: 13px;
  line-height: 1.45;
}
.products-match-grid span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}
.products-cta {
  background:
    radial-gradient(circle at 16% 20%, rgba(96,165,250,.22), transparent 32%),
    linear-gradient(135deg, #07152f, #0a1b33);
}

.suite-console {
  position: relative;
  min-height: 520px;
  padding: 24px;
  border-radius: 40px;
  background:
    radial-gradient(circle at 78% 22%, rgba(37,99,235,.14), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(239,246,255,.62));
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: 0 34px 90px rgba(15,23,42,.11);
  overflow: hidden;
}
.suite-console::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(37,99,235,.05) 1px, transparent 1px),
    linear-gradient(rgba(37,99,235,.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(135deg, black, transparent 78%);
  -webkit-mask-image: linear-gradient(135deg, black, transparent 78%);
}
.suite-console > * {
  position: relative;
  z-index: 1;
}
.suite-console-top {
  min-height: 54px;
  padding: 0 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(226,232,240,.88);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}
.suite-console-top span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.suite-console-top i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.suite-console-top i:nth-child(1) { background: #fda4af; }
.suite-console-top i:nth-child(2) { background: #fde68a; }
.suite-console-top i:nth-child(3) { background: #86efac; margin-right: 7px; }
.suite-console-top b {
  padding: 7px 11px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 11px;
}
.suite-console-main {
  display: grid;
  grid-template-columns: minmax(0,1fr) 190px;
  gap: 16px;
  margin-top: 18px;
}
.suite-console-brand,
.suite-console-score,
.suite-console-links a,
.suite-console-bars {
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(226,232,240,.88);
  box-shadow: 0 18px 46px rgba(15,23,42,.06);
}
.suite-console-brand {
  min-height: 176px;
  border-radius: 28px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.suite-console-brand img {
  width: 190px;
  max-width: 80%;
}
.suite-console-brand span {
  margin-top: 18px;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}
.suite-console-score {
  border-radius: 28px;
  padding: 22px;
  background: #07152f;
  color: white;
}
.suite-console-score small {
  color: #93c5fd;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.suite-console-score strong {
  display: block;
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: 500;
  line-height: .9;
}
.suite-console-score span {
  display: block;
  margin-top: 16px;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.5;
}
.suite-console-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 16px;
}
.suite-console-links a {
  min-height: 82px;
  padding: 14px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.suite-console-links a:hover {
  transform: translateY(-3px);
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 24px 56px rgba(37,99,235,.12);
}
.suite-console-links i {
  color: #2563eb;
  font-size: 18px;
}
.suite-console-links span {
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
}
.suite-console-bars {
  margin-top: 16px;
  padding: 18px;
  border-radius: 24px;
}
.suite-console-bars div + div { margin-top: 14px; }
.suite-console-bars span {
  display: block;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}
.suite-console-bars b {
  display: block;
  width: var(--w);
  height: 8px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}
.products-suite-grid {
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 18px;
}
.suite-product-card,
.suite-product-card.primary {
  position: relative;
  min-height: 330px;
  grid-column: span 4;
  grid-row: auto;
  padding: 30px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,250,252,.88)),
    radial-gradient(circle at 92% 12%, rgba(37,99,235,.08), transparent 26%);
  color: var(--ink);
  border: 1px solid rgba(226,232,240,.88);
  box-shadow: 0 24px 70px rgba(15,23,42,.06);
}
.suite-product-card.primary {
  grid-column: span 6;
  background:
    radial-gradient(circle at 86% 14%, rgba(56,189,248,.2), transparent 30%),
    linear-gradient(135deg, #07152f, #0a1b33);
  color: white;
}
.suite-product-card:nth-child(2),
.suite-product-card:nth-child(3) {
  grid-column: span 3;
}
.suite-product-card:nth-child(4),
.suite-product-card:nth-child(5),
.suite-product-card:nth-child(6),
.suite-product-card:nth-child(7) {
  grid-column: span 3;
}
.suite-product-card::after {
  content: "";
  position: absolute;
  inset: auto 24px 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  opacity: .7;
}
.suite-card-top {
  justify-content: space-between;
}
.suite-card-top span {
  max-width: 160px;
  text-align: right;
  line-height: 1.35;
}
.suite-product-card h3 {
  margin: 28px 0 0;
  font-size: 28px;
}
.suite-product-card p {
  margin: 14px 0 0;
  max-width: none;
  min-height: 74px;
}
.suite-product-card ul {
  grid-template-columns: 1fr;
  margin: 22px 0 28px;
  gap: 10px;
}
.suite-product-card b {
  width: fit-content;
  min-width: 0;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #2563eb;
}
.suite-product-card.primary .suite-card-top,
.suite-product-card.primary p,
.suite-product-card.primary li { color: #cbd5e1; }
.suite-product-card.primary h3 { color: white; }
.suite-product-card.primary b { color: #93c5fd; }

.kt-hero {
  width: 100%;
  max-width: 1400px;
  min-height: 650px;
  margin: 0 auto;
  padding: 72px 64px;
  border-radius: 48px;
  background:
    radial-gradient(circle at 76% 28%, rgba(255,255,255,.94), transparent 26%),
    linear-gradient(135deg, #EAECF3 0%, #f8fafc 58%, #ffffff 100%);
  border: 1px solid rgba(226,232,240,.75);
  box-shadow: var(--soft-shadow);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr);
  gap: 56px;
  align-items: center;
  overflow: hidden;
}
.kt-hero h1 {
  margin: 0;
  max-width: 720px;
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: 500;
  line-height: .96;
  letter-spacing: 0;
  color: var(--ink);
}
.kt-hero p {
  margin: 18px 0 0;
  max-width: 620px;
  color: #64748b;
  font-size: 15px;
  line-height: 1.75;
}
.kt-hero .kt-subhead {
  color: #2563eb;
  font-weight: 700;
}
.kt-brain-wrap {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1100px;
}
.kt-brain {
  position: relative;
  width: min(82vw, 360px);
  aspect-ratio: 1;
  border-radius: 42% 58% 48% 52% / 46% 44% 56% 54%;
  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(219,234,254,.76)),
    radial-gradient(circle at 30% 30%, rgba(56,189,248,.34), transparent 34%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 46px 90px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.95);
  transform: rotateY(-12deg) rotateX(8deg);
}
.kt-brain::before,
.kt-brain::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: inherit;
  border: 1px solid rgba(37,99,235,.18);
}
.kt-brain::after {
  inset: 33% 18%;
  border-left-color: transparent;
  border-right-color: transparent;
}
.kt-brain-core {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 132px;
  height: 132px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: 0 24px 58px rgba(15,23,42,.12);
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.kt-brain-core span {
  font-family: var(--font-display);
  color: #2563eb;
  font-size: 42px;
}
.kt-brain-core small {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.kt-node {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 9px rgba(37,99,235,.12);
}
.kt-node.n1 { left: 25%; top: 24%; }
.kt-node.n2 { right: 26%; top: 29%; background: #06b6d4; }
.kt-node.n3 { left: 31%; bottom: 25%; background: #10b981; }
.kt-node.n4 { right: 22%; bottom: 30%; background: #7c3aed; }
.kt-node.n5 { left: 49%; top: 16%; background: #0f172a; }
.kt-orbit {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.14);
}
.kt-orbit-one { width: 430px; height: 430px; }
.kt-orbit-two { width: 520px; height: 270px; transform: rotate(-18deg); }
.kt-float-card {
  position: absolute;
  min-width: 154px;
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(226,232,240,.8);
  box-shadow: 0 26px 60px rgba(15,23,42,.12);
  backdrop-filter: blur(18px);
}
.kt-float-card b {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  color: #07152f;
}
.kt-float-card span {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
}
.kt-rank-card { left: 8px; bottom: 76px; }
.kt-match-card { right: 0; top: 68px; }
.kt-card,
.kt-feature-card,
.testimonial-card {
  background: rgba(255,255,255,.76);
  border-color: rgba(226,232,240,.78);
  box-shadow: 0 24px 70px rgba(15,23,42,.06);
  backdrop-filter: blur(18px);
}
.kt-card { min-height: 260px; padding: 30px; }
.kt-card span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 15px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
}
.kt-card h3,
.kt-feature-card h3 { font-size: 20px; }
.kt-feature-card {
  min-height: 280px;
  padding: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(248,250,252,.9)),
    radial-gradient(circle at 85% 0%, rgba(59,130,246,.12), transparent 38%);
}
.kt-feature-card::before {
  content: "";
  display: block;
  width: 34px;
  height: 4px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}
.kt-dashboard-split { grid-template-columns: .85fr 1.15fr; }
.kt-dashboard {
  padding: 24px;
  border-radius: 34px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.18);
  backdrop-filter: blur(20px);
}
.kt-dash-top,
.kt-candidate-row,
.kt-score-grid {
  display: grid;
  gap: 14px;
}
.kt-dash-top {
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-bottom: 16px;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
}
.kt-dash-top span { display: flex; align-items: center; gap: 8px; }
.kt-dash-top b {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(16,185,129,.12);
  color: #34d399;
  font-size: 11px;
}
.kt-candidate-row {
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  margin-top: 12px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
}
.kt-candidate-row.active { background: rgba(255,255,255,.12); }
.kt-candidate-row b,
.kt-candidate-row strong { color: white; }
.kt-candidate-row span { color: #94a3b8; font-size: 12px; }
.kt-candidate-row strong {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
}
.kt-score-grid {
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: 16px;
}
.kt-score-grid div {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
}
.kt-score-grid small {
  color: #94a3b8;
  font-size: 11px;
}
.kt-score-grid b {
  display: block;
  margin-top: 8px;
  color: white;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
}
.testimonial-card {
  min-height: 260px;
  padding: 34px;
}
.testimonial-card p {
  color: #334155;
  font-size: 17px;
  line-height: 1.75;
}
.testimonial-card h3 {
  margin-top: 28px;
  font-size: 22px;
}
.testimonial-card span {
  color: #64748b;
  font-size: 13px;
}
.faq-list {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.faq-item {
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: 0 18px 54px rgba(15,23,42,.05);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 22px 24px;
  color: var(--ink);
  font-weight: 700;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  float: right;
  color: #2563eb;
  font-size: 20px;
}
.faq-item[open] summary::after { content: "-"; }
.faq-item p {
  margin: 0;
  padding: 0 24px 24px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
}

.kt-page .section-inner { position: relative; overflow: hidden; }
.kt-hero-v2 {
  min-height: 720px;
  background: radial-gradient(circle at 76% 18%, rgba(37,99,235,.13), transparent 25%), radial-gradient(circle at 86% 78%, rgba(14,165,233,.12), transparent 28%), linear-gradient(135deg, #ffffff 0%, #f8fafc 58%, #eef6ff 100%);
}
.kt-hero-v2 .kt-hero-copy { position: relative; z-index: 2; }
.kt-hero-v2 .kt-hero-copy p:not(.kt-subhead) { max-width: 660px; }
.product-hero-logo {
  display: block;
  width: min(210px, 58vw);
  max-height: 78px;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 20px;
}
.kt-analytics-visual {
  position: relative;
  min-height: 560px;
  border-radius: 36px;
  background: linear-gradient(145deg, rgba(255,255,255,.7), rgba(239,246,255,.55)), radial-gradient(circle at 50% 48%, rgba(37,99,235,.14), transparent 42%);
  border: 1px solid rgba(226,232,240,.82);
  box-shadow: 0 36px 90px rgba(15,23,42,.1);
  overflow: hidden;
}
.kt-analytics-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px), linear-gradient(rgba(37,99,235,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 45%, black, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, black, transparent 72%);
}
.kt-pipeline { position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.kt-pipeline span { padding: 12px 10px; border-radius: 16px; background: rgba(255,255,255,.82); border: 1px solid rgba(226,232,240,.82); color: #334155; font-size: 12px; font-weight: 700; text-align: center; }
.kt-talent-orb { position: absolute; inset: 50% auto auto 50%; width: 280px; height: 280px; transform: translate(-50%,-50%); border-radius: 999px; background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(219,234,254,.82)); border: 1px solid rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; box-shadow: 0 34px 80px rgba(37,99,235,.16), inset 0 1px 0 white; }
.kt-orb-ring { position: absolute; inset: -36px; border-radius: inherit; border: 1px dashed rgba(37,99,235,.28); animation: spinSlow 18s linear infinite; }
.kt-talent-score { width: 170px; height: 170px; border-radius: 999px; background: #07152f; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 24px 58px rgba(7,21,47,.24); }
.kt-talent-score small, .kt-talent-score span { color: #bfdbfe; font-size: 12px; font-weight: 700; }
.kt-talent-score strong { font-family: var(--font-display); font-size: 58px; font-weight: 500; line-height: 1; }
.kt-skill-card { position: absolute; z-index: 3; min-width: 154px; padding: 16px 18px; border-radius: 20px; background: rgba(255,255,255,.88); border: 1px solid rgba(226,232,240,.86); box-shadow: 0 24px 58px rgba(15,23,42,.11); backdrop-filter: blur(16px); }
.kt-skill-card i { color: #2563eb; }
.kt-skill-card b { display: block; margin-top: 10px; color: #0f172a; font-size: 13px; }
.kt-skill-card span { display: block; margin-top: 4px; color: #64748b; font-size: 12px; }
.kt-skill-one { top: 90px; left: 44px; }
.kt-skill-two { right: 34px; top: 116px; }
.kt-skill-three { left: 62px; bottom: 116px; }
.kt-hiring-bars { position: absolute; right: 34px; bottom: 120px; z-index: 3; width: 190px; padding: 18px; border-radius: 22px; background: rgba(7,21,47,.94); color: white; box-shadow: 0 28px 64px rgba(7,21,47,.22); }
.kt-hiring-bars b { font-size: 13px; }
.kt-hiring-bars span { display: block; height: 8px; width: var(--w); margin-top: 12px; border-radius: 999px; background: linear-gradient(90deg, #2563eb, #38bdf8); }
.kt-ecosystem { padding: 72px 50px; background: radial-gradient(circle at 50% 45%, rgba(37,99,235,.08), transparent 35%), linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.9)); }
.kt-ecosystem-map { position: relative; height: 620px; max-width: 960px; margin: 48px auto 0; }
.kt-ecosystem-map::before, .kt-ecosystem-map::after { content: ""; position: absolute; inset: 90px 160px; border-radius: 999px; border: 1px dashed rgba(37,99,235,.26); animation: pulseLine 2.8s ease-in-out infinite; }
.kt-ecosystem-map::after { inset: 130px 240px; animation-delay: .7s; }
.kt-hub, .kt-ecosystem-map article { position: absolute; z-index: 2; background: rgba(255,255,255,.88); border: 1px solid rgba(226,232,240,.9); box-shadow: 0 24px 64px rgba(15,23,42,.08); backdrop-filter: blur(18px); }
.kt-hub { inset: 50% auto auto 50%; width: 250px; height: 250px; transform: translate(-50%,-50%); border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; background: #07152f; color: white; }
.kt-hub i { color: #60a5fa; font-size: 28px; margin-bottom: 16px; }
.kt-hub strong { font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.05; }
.kt-hub span { margin-top: 10px; color: #cbd5e1; font-size: 12px; line-height: 1.5; }
.kt-ecosystem-map article { left: var(--x); top: var(--y); transform: translate(-50%,-50%); width: 170px; min-height: 96px; border-radius: 24px; padding: 18px; display: grid; gap: 10px; justify-items: center; text-align: center; }
.kt-ecosystem-map article i { color: #2563eb; font-size: 21px; }
.kt-ecosystem-map article span { color: #334155; font-size: 13px; font-weight: 700; }
.kt-split-head, .kt-library-head { display: grid; grid-template-columns: minmax(0, .85fr) minmax(280px, .48fr); gap: 28px; align-items: end; margin-bottom: 34px; }
.kt-split-head > p, .kt-library-head > p { margin: 0; color: #64748b; line-height: 1.75; }
.kt-fail-grid, .kt-why-grid, .kt-library-board, .kt-use-grid, .kt-testimonial-grid { display: grid; gap: 18px; }
.kt-fail-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.kt-fail-grid article { min-height: 240px; padding: 28px; border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(248,250,252,.88)); border: 1px solid rgba(226,232,240,.86); box-shadow: 0 22px 60px rgba(15,23,42,.06); }
.kt-fail-grid i, .kt-why-grid i, .kt-library-board i, .kt-use-grid i { width: 46px; height: 46px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: #eff6ff; color: #2563eb; margin-bottom: 22px; }
.kt-fail-grid h3, .kt-why-grid h3, .kt-library-board h3, .kt-use-grid h3, .kt-timeline h3 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.kt-fail-grid p, .kt-why-grid p, .kt-library-board p, .kt-use-grid p, .kt-timeline p { color: #64748b; font-size: 14px; line-height: 1.7; }
.kt-why { background: radial-gradient(circle at 14% 18%, rgba(37,99,235,.09), transparent 28%), linear-gradient(135deg, rgba(248,250,252,.92), rgba(255,255,255,.94)); }
.kt-why-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.kt-why-grid article { padding: 30px; border-radius: 28px; background: rgba(255,255,255,.68); border: 1px solid rgba(226,232,240,.78); box-shadow: 0 26px 70px rgba(15,23,42,.06); backdrop-filter: blur(18px); }
.kt-journey { background: #07152f; color: white; }
.kt-journey .section-head h2 { color: white; }
.kt-journey .section-head p, .kt-journey .eyebrow { color: #93c5fd; }
.kt-timeline { display: grid; grid-template-columns: repeat(6, minmax(170px,1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kt-timeline article { position: relative; min-height: 230px; padding: 24px 20px; border-radius: 24px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.kt-timeline article::after { content: ""; position: absolute; top: 44px; right: -12px; width: 24px; height: 1px; background: linear-gradient(90deg, #60a5fa, transparent); }
.kt-timeline article:last-child::after { display: none; }
.kt-timeline span { display: inline-flex; width: 42px; height: 42px; border-radius: 999px; align-items: center; justify-content: center; background: #2563eb; color: white; font-family: var(--font-display); margin-bottom: 24px; }
.kt-timeline h3 { color: white; }
.kt-timeline p { color: #cbd5e1; }
.kt-library { background: linear-gradient(135deg, #ffffff, #f8fafc); }
.kt-library-board { grid-template-columns: repeat(3, minmax(0,1fr)); padding: 20px; border-radius: 32px; background: #07152f; box-shadow: 0 34px 90px rgba(7,21,47,.18); }
.kt-library-board article { padding: 28px; border-radius: 24px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); }
.kt-library-board i { background: rgba(96,165,250,.14); color: #60a5fa; }
.kt-library-board h3 { color: white; }
.kt-library-board p { color: #cbd5e1; }
.kt-insights { display: grid; grid-template-columns: .8fr 1.2fr; gap: 42px; align-items: center; background: radial-gradient(circle at 80% 16%, rgba(56,189,248,.18), transparent 30%), linear-gradient(135deg, rgba(7,21,47,.98), rgba(10,27,51,.96)); color: white; }
.kt-insights .section-title { color: white; }
.kt-insight-dashboard { padding: 24px; border-radius: 34px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 70px rgba(0,0,0,.2); }
.kt-metric-row, .kt-matrix { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.kt-metric-row article, .kt-matrix div, .kt-benchmark { border-radius: 22px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); padding: 18px; }
.kt-metric-row small, .kt-matrix b, .kt-benchmark p { color: #cbd5e1; }
.kt-metric-row strong { display: block; margin-top: 8px; font-family: var(--font-display); color: white; font-size: 28px; font-weight: 500; }
.kt-matrix { grid-template-columns: repeat(2, minmax(0,1fr)); }
.kt-matrix span { display: block; width: var(--w); height: 8px; margin-top: 13px; border-radius: 999px; background: linear-gradient(90deg, #60a5fa, #38bdf8); }
.kt-benchmark { display: flex; gap: 16px; margin-top: 16px; align-items: flex-start; }
.kt-benchmark i { color: #60a5fa; font-size: 26px; }
.kt-benchmark b { color: white; }
.kt-benchmark p { margin: 8px 0 0; line-height: 1.65; }
.kt-use-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.kt-use-grid article { padding: 30px; min-height: 230px; border-radius: 30px; background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(248,250,252,.9)), radial-gradient(circle at 14% 16%, rgba(37,99,235,.08), transparent 24%); border: 1px solid rgba(226,232,240,.86); }
.kt-org { background: linear-gradient(135deg, #eff6ff, #ffffff); }
.kt-org-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; }
.kt-org-grid article { min-height: 140px; border-radius: 24px; background: white; border: 1px solid rgba(226,232,240,.9); display: flex; flex-direction: column; justify-content: center; padding: 20px; box-shadow: 0 20px 50px rgba(15,23,42,.06); }
.kt-org-grid b { font-family: var(--font-display); font-size: 24px; font-weight: 500; color: #2563eb; }
.kt-org-grid span { margin-top: 8px; color: #334155; font-size: 13px; font-weight: 700; }
.kt-testimonials { background: #f8fafc; }
.kt-testimonial-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.kt-testimonial-grid article { padding: 36px; border-radius: 32px; background: rgba(255,255,255,.86); border: 1px solid rgba(226,232,240,.86); box-shadow: 0 26px 70px rgba(15,23,42,.06); }
.kt-testimonial-grid i { color: #2563eb; font-size: 26px; }
.kt-testimonial-grid p { color: #334155; font-size: 17px; line-height: 1.8; }
.kt-testimonial-grid h3 { margin: 28px 0 4px; font-family: var(--font-display); font-size: 22px; font-weight: 500; }
.kt-testimonial-grid span { color: #64748b; font-size: 13px; }
.kt-faq-section { background: radial-gradient(circle at 82% 18%, rgba(37,99,235,.08), transparent 26%), linear-gradient(135deg, #ffffff, #f8fafc); }
.kt-faq-list .faq-item { border-radius: 18px; }
.kt-final-cta { background: radial-gradient(circle at 16% 20%, rgba(96,165,250,.22), transparent 32%), linear-gradient(135deg, #07152f, #0a1b33); }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes pulseLine { 0%, 100% { opacity: .4; transform: scale(.98); } 50% { opacity: .9; transform: scale(1.02); } }

.kt-analytics-elegant {
  min-height: 560px;
  padding: 28px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 18px;
}
.kt-analytics-elegant::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -120px;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(37,99,235,.16), transparent 68%);
}
.kt-visual-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.84);
  box-shadow: 0 16px 36px rgba(15,23,42,.06);
}
.kt-visual-top span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}
.kt-visual-top i {
  color: #2563eb;
  font-size: 9px;
}
.kt-visual-top b {
  color: #2563eb;
  font-size: 12px;
}
.kt-score-panel {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 170px minmax(0,1fr);
  gap: 22px;
  align-items: center;
  padding: 24px;
  border-radius: 30px;
  background: #07152f;
  color: white;
  box-shadow: 0 28px 70px rgba(7,21,47,.18);
}
.kt-score-ring {
  width: 150px;
  aspect-ratio: 1;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 50%, #07152f 58%, transparent 59%),
    conic-gradient(#38bdf8 0 82%, rgba(255,255,255,.16) 82% 100%);
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.05);
}
.kt-score-ring strong {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 500;
  line-height: .9;
}
.kt-score-ring span {
  margin-top: 8px;
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 700;
}
.kt-score-panel small {
  color: #93c5fd;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.kt-score-panel h3 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
}
.kt-score-panel p {
  margin: 12px 0 0;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.65;
}
.kt-signal-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.kt-signal-grid article {
  min-width: 0;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: 0 18px 45px rgba(15,23,42,.06);
}
.kt-signal-grid i {
  color: #2563eb;
  margin-bottom: 14px;
}
.kt-signal-grid b,
.kt-signal-grid span {
  display: block;
}
.kt-signal-grid b {
  color: #0f172a;
  font-size: 13px;
}
.kt-signal-grid span {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}
.kt-readiness-panel {
  position: relative;
  z-index: 2;
  align-self: start;
  padding: 20px;
  border-radius: 24px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(226,232,240,.84);
  box-shadow: 0 18px 45px rgba(15,23,42,.06);
}
.kt-readiness-panel div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #0f172a;
  font-size: 13px;
}
.kt-readiness-panel div span {
  color: #2563eb;
  font-weight: 700;
}
.kt-readiness-panel p {
  width: var(--w);
  height: 8px;
  margin: 14px 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}
.kt-pipeline-elegant {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 2;
}

.contact-hero {
  width: 100%;
  max-width: 1400px;
  min-height: 620px;
  margin: 0 auto;
  padding: 72px 64px;
  border-radius: 48px;
  background:
    radial-gradient(circle at 78% 22%, rgba(59,130,246,.14), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  border: 1px solid rgba(226,232,240,.75);
  box-shadow: var(--soft-shadow);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  gap: 56px;
  align-items: center;
  overflow: hidden;
}
.contact-hero h1 {
  margin: 0;
  max-width: 720px;
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: 500;
  line-height: .96;
  letter-spacing: 0;
  color: var(--ink);
}
.contact-hero p {
  margin: 22px 0 0;
  max-width: 640px;
  color: #64748b;
  font-size: 15px;
  line-height: 1.75;
}
.contact-hero-panel {
  padding: 28px;
  border-radius: 36px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.82);
  box-shadow: 0 40px 90px rgba(15,23,42,.13);
  backdrop-filter: blur(24px);
}
.contact-panel-top,
.contact-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.contact-panel-top {
  color: #64748b;
  font-size: 12px;
}
.contact-panel-top span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #cbd5e1;
}
.contact-panel-top b { margin-left: auto; color: #0f172a; }
.contact-panel-main {
  margin-top: 28px;
  padding: 30px;
  border-radius: 28px;
  background: #07152f;
  color: white;
}
.contact-panel-main small {
  display: block;
  color: #94a3b8;
  font-size: 12px;
}
.contact-panel-main strong {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 31px;
  font-weight: 500;
}
.contact-panel-row {
  margin-top: 14px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(248,250,252,.88);
  border: 1px solid #e2e8f0;
}
.contact-panel-row span,
.contact-panel-row b {
  min-width: 0;
}
.contact-panel-row span { color: #64748b; font-size: 12px; }
.contact-panel-row b { color: #0f172a; font-size: 13px; text-align: right; overflow-wrap: anywhere; }
.contact-info-card {
  min-height: 250px;
  padding: 32px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(248,250,252,.92)),
    radial-gradient(circle at 86% 0%, rgba(59,130,246,.12), transparent 40%);
  border-color: rgba(226,232,240,.8);
  box-shadow: 0 24px 70px rgba(15,23,42,.06);
  backdrop-filter: blur(18px);
}
.contact-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.contact-info-card h3 { font-size: 22px; }
.contact-info-card p {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.contact-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 130px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: white;
  color: var(--ink);
  padding: 14px;
  font: inherit;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.contact-form textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96,165,250,.18);
}
.contact-form-split { align-items: start; }
.contact-location-split { grid-template-columns: 1.2fr .8fr; }
.map-card {
  position: relative;
  min-height: 440px;
  border-radius: 36px;
  background:
    linear-gradient(135deg, rgba(239,246,255,.96), rgba(255,255,255,.92)),
    radial-gradient(circle at 70% 34%, rgba(37,99,235,.16), transparent 30%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 28px 80px rgba(15,23,42,.08);
  overflow: hidden;
}
.map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(.95) contrast(1.02);
}
.map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148,163,184,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.22) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(135deg, rgba(0,0,0,.9), rgba(0,0,0,.22));
  -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,.9), rgba(0,0,0,.22));
}
.map-pin {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: rgba(37,99,235,.12);
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-pin span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 12px rgba(37,99,235,.16), 0 20px 40px rgba(37,99,235,.28);
}
.map-label {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  padding: 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: 0 20px 50px rgba(15,23,42,.08);
  backdrop-filter: blur(18px);
}
.map-label b,
.map-label small { display: block; }
.map-label b {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
}
.map-label small {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}

.contact-enterprise {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 72px;
  border-radius: 48px;
  background:
    radial-gradient(circle at 76% 20%, rgba(59,130,246,.16), transparent 32%),
    radial-gradient(circle at 18% 82%, rgba(14,165,233,.1), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  border: 1px solid rgba(226,232,240,.8);
  box-shadow: 0 44px 110px rgba(15,23,42,.08);
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  gap: 56px;
  align-items: center;
  overflow: hidden;
}
.contact-copy-block h1 {
  margin: 0;
  max-width: 720px;
  font-family: var(--font-display);
  font-size: 66px;
  font-weight: 500;
  line-height: .94;
  letter-spacing: 0;
  color: var(--ink);
}
.contact-copy-block > p {
  margin: 24px 0 0;
  max-width: 640px;
  color: #64748b;
  font-size: 17px;
  line-height: 1.75;
}
.contact-focus-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 36px;
  max-width: 560px;
}
.contact-focus-panel span {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: 0 16px 42px rgba(15,23,42,.05);
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
}
.contact-focus-panel span::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 10px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 6px rgba(37,99,235,.1);
  flex: 0 0 auto;
}
.contact-response-note {
  display: grid;
  gap: 6px;
  margin-top: 22px;
  max-width: 560px;
  padding: 20px 22px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(15,23,42,.94), rgba(30,64,175,.88));
  color: white;
  box-shadow: 0 24px 60px rgba(15,23,42,.16);
}
.contact-response-note b {
  font-size: 18px;
  line-height: 1.25;
}
.contact-response-note span {
  color: rgba(255,255,255,.76);
  font-size: 14px;
  line-height: 1.55;
}
.contact-rows {
  display: grid;
  gap: 14px;
  margin-top: 38px;
}
.contact-row {
  display: grid;
  grid-template-columns: 104px minmax(0,1fr);
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: 0 18px 48px rgba(15,23,42,.05);
  backdrop-filter: blur(18px);
}
.contact-row span {
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.contact-row b {
  min-width: 0;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.contact-premium-form {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 36px;
  border-radius: 38px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.9)),
    radial-gradient(circle at 100% 0%, rgba(37,99,235,.12), transparent 38%);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 40px 100px rgba(15,23,42,.14);
  backdrop-filter: blur(24px);
}
.contact-premium-form::before {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  top: 0;
  height: 5px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #2563eb, #38bdf8, #0f172a);
}
.contact-form-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 8px;
}
.contact-form-head span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.contact-form-head b {
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  text-align: right;
}
.contact-premium-form label {
  display: grid;
  gap: 9px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}
.contact-premium-form input,
.contact-premium-form select,
.contact-premium-form textarea {
  width: 100%;
  border: 1px solid #dbe3ef;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  padding: 0 16px;
  font: inherit;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.contact-premium-form input,
.contact-premium-form select { height: 56px; }
.contact-premium-form textarea {
  min-height: 154px;
  padding-top: 15px;
  resize: vertical;
}
.contact-premium-form input:focus,
.contact-premium-form select:focus,
.contact-premium-form textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96,165,250,.18);
}
.contact-premium-form .btn {
  width: 100%;
  height: 58px;
  margin-top: 6px;
  font-size: 14px;
}
.contact-method-shell {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.95)),
    radial-gradient(circle at 50% 0%, rgba(37,99,235,.08), transparent 36%);
}
.contact-method-card {
  min-height: 310px;
  padding: 34px;
  background: rgba(255,255,255,.8);
  border-color: rgba(226,232,240,.82);
  box-shadow: 0 26px 76px rgba(15,23,42,.07);
  backdrop-filter: blur(20px);
}
.contact-method-card::after {
  content: "";
  position: absolute;
  inset: auto 28px 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  opacity: .9;
}
.contact-method-icon {
  width: 70px;
  height: 70px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  color: #2563eb;
  background: linear-gradient(135deg, #eff6ff, #ffffff);
  border: 1px solid #dbeafe;
  box-shadow: 0 18px 42px rgba(37,99,235,.13);
}
.contact-method-card h3 { font-size: 24px; }
.contact-method-card p {
  margin-top: 10px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
}
.contact-method-card b {
  display: block;
  margin-top: 24px;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.contact-location-section {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.96)),
    radial-gradient(circle at 18% 20%, rgba(14,165,233,.1), transparent 32%);
}
.office-detail-card {
  padding: 36px;
  border-radius: 34px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(226,232,240,.88);
  box-shadow: 0 28px 80px rgba(15,23,42,.08);
  backdrop-filter: blur(20px);
}
.office-detail-list {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}
.office-detail-list p {
  margin: 0;
  padding: 18px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.office-detail-list span,
.office-detail-list b {
  display: block;
}
.office-detail-list span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.office-detail-list b {
  margin-top: 6px;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.contact-location-section .map-card {
  min-height: 520px;
  border-radius: 40px;
  box-shadow: 0 34px 90px rgba(15,23,42,.1);
}

.pricing-page .section-inner {
  position: relative;
}
.pricing-hero {
  width: 100%;
  max-width: 1400px;
  min-height: 660px;
  margin: 0 auto;
  padding: 72px 64px;
  border-radius: 48px;
  background:
    radial-gradient(circle at 82% 20%, rgba(37,99,235,.14), transparent 34%),
    radial-gradient(circle at 16% 86%, rgba(14,165,233,.1), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
  border: 1px solid rgba(226,232,240,.78);
  box-shadow: var(--soft-shadow);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  gap: 58px;
  align-items: center;
  overflow: hidden;
}
.pricing-hero h1 {
  margin: 0;
  max-width: 780px;
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: 500;
  line-height: .96;
  letter-spacing: 0;
}
.pricing-hero p {
  margin: 24px 0 0;
  max-width: 640px;
  color: #64748b;
  font-size: 16px;
  line-height: 1.75;
}
.pricing-hero-visual {
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1100px;
}
.pricing-glass-board {
  position: relative;
  width: min(100%, 520px);
  padding: 26px;
  border-radius: 38px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: 0 44px 100px rgba(15,23,42,.16);
  backdrop-filter: blur(24px);
  transform: rotateY(-9deg) rotateX(6deg);
}
.pricing-board-top {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
}
.pricing-board-top span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #cbd5e1;
}
.pricing-board-top b { margin-left: auto; color: #0f172a; }
.pricing-price-stack {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  margin-top: 30px;
}
.pricing-price-stack article,
.pricing-float-card {
  border-radius: 24px;
  background: linear-gradient(145deg, #07152f, #0d2450);
  color: white;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 48px rgba(7,21,47,.2);
  padding: 24px;
}
.pricing-price-stack article:nth-child(2) {
  background: linear-gradient(145deg, #eff6ff, #ffffff);
  color: #0f172a;
}
.pricing-price-stack small,
.pricing-float-card span {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}
.pricing-price-stack article:nth-child(2) small,
.pricing-price-stack article:nth-child(2) span { color: #64748b; }
.pricing-price-stack strong {
  display: block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 500;
}
.pricing-meter {
  height: 14px;
  margin-top: 24px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.pricing-meter span {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}
.pricing-float-card {
  position: absolute;
  min-width: 132px;
  padding: 18px;
  background: rgba(255,255,255,.86);
  color: #0f172a;
  border-color: rgba(226,232,240,.86);
  backdrop-filter: blur(18px);
}
.pricing-float-card b {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
}
.pricing-float-card span { color: #64748b; }
.pricing-float-card.one { right: -20px; top: 112px; }
.pricing-float-card.two { left: -20px; bottom: -28px; }
.pricing-tabs-shell {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94)),
    radial-gradient(circle at 50% 0%, rgba(37,99,235,.08), transparent 34%);
}
.pricing-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border-radius: 28px;
  background: rgba(241,245,249,.82);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 20px 60px rgba(15,23,42,.06);
  backdrop-filter: blur(18px);
}
.pricing-tab,
.inner-tab-nav button {
  border-radius: 20px;
  background: transparent;
  color: #64748b;
  min-height: 58px;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 800;
  transition: .22s ease;
}
.pricing-tab.is-active,
.inner-tab-nav button.is-active {
  background: #07152f;
  color: white;
  box-shadow: 0 16px 34px rgba(7,21,47,.2);
}
.pricing-panel {
  display: none;
  margin-top: 34px;
  animation: pricingFade .28s ease;
}
.pricing-panel.is-active { display: block; }
.pricing-plan-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: stretch;
}
.pricing-plan-head h2 {
  margin: 12px 0 0;
  max-width: 760px;
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1.03;
  font-weight: 500;
}
.pricing-plan-head p {
  margin: 18px 0 0;
  max-width: 680px;
  color: #64748b;
  font-size: 15px;
  line-height: 1.7;
}
.price-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 28px;
  border-radius: 30px;
  background:
    linear-gradient(145deg, #07152f, #0d2450),
    radial-gradient(circle at 80% 0%, rgba(56,189,248,.2), transparent 42%);
  color: white;
  box-shadow: 0 28px 70px rgba(7,21,47,.22);
}
.price-card span,
.price-card small {
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 800;
}
.price-card strong {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
}
.price-card .btn {
  width: 100%;
  margin-top: 16px;
  background: white;
  color: #07152f;
}
.price-card.discount strong { font-size: 64px; color: #7dd3fc; }
.compact-price strong { font-size: 58px; }
.inner-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  padding: 8px;
  border-radius: 24px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(226,232,240,.88);
}
.inner-tab-nav button {
  min-height: 46px;
  border-radius: 16px;
  padding: 10px 16px;
}
.inner-tab-panel {
  display: none;
  margin-top: 20px;
  animation: pricingFade .22s ease;
}
.inner-tab-panel.is-active { display: block; }
.pricing-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.pricing-feature-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pricing-line {
  min-height: 132px;
  padding: 20px;
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(226,232,240,.88);
  box-shadow: 0 18px 50px rgba(15,23,42,.05);
}
.pricing-line b,
.pricing-line strong,
.pricing-line span {
  display: block;
}
.pricing-line b {
  color: #0f172a;
  font-size: 13px;
}
.pricing-line strong {
  margin-top: 10px;
  color: #2563eb;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 500;
}
.pricing-line span {
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}
.edu-visual-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 24px;
}
.edu-visual-row span {
  border-radius: 18px;
  padding: 16px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #dbeafe;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.pricing-feature-card,
.pricing-product-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,250,252,.86)),
    radial-gradient(circle at 12% 0%, rgba(37,99,235,.08), transparent 34%);
  border-color: rgba(226,232,240,.82);
  box-shadow: 0 24px 70px rgba(15,23,42,.06);
}
.pricing-feature-card { min-height: 250px; }
.pricing-feature-card:hover .icon-3d { transform: perspective(680px) rotateX(6deg) rotateY(-4deg) translateY(-4px); }
.pricing-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pricing-product-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
}
.pricing-product-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  margin-bottom: 18px;
  background: linear-gradient(145deg, #ffffff, #eff6ff);
  border: 1px solid #dbeafe;
  box-shadow: 0 16px 34px rgba(37,99,235,.12);
  font-size: 1.05rem;
}
.pricing-product-card b {
  font-family: var(--font-display);
  color: #0f172a;
  font-size: 20px;
  font-weight: 600;
}
.pricing-product-card span {
  display: inline-flex;
  width: fit-content;
  margin-top: auto;
  padding: 8px 11px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 11px;
  font-weight: 800;
}
.pricing-product-card a {
  margin-top: 14px;
  color: #2563eb;
  font-size: 13px;
  font-weight: 800;
}
.pricing-demo-section {
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.9)),
    radial-gradient(circle at 86% 16%, rgba(37,99,235,.12), transparent 34%);
}
.pricing-demo-form {
  background: rgba(255,255,255,.86);
}
.pricing-faq .faq-item {
  background: rgba(255,255,255,.9);
}
@keyframes pricingFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.kc-hero {
  width: 100%;
  max-width: 1400px;
  min-height: 650px;
  margin: 0 auto;
  padding: 72px 64px;
  border-radius: 48px;
  background:
    radial-gradient(circle at 82% 22%, rgba(37,99,235,.13), transparent 34%),
    radial-gradient(circle at 18% 86%, rgba(14,165,233,.09), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
  border: 1px solid rgba(226,232,240,.78);
  box-shadow: var(--soft-shadow);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .95fr);
  gap: 58px;
  align-items: center;
  overflow: hidden;
}
.kc-hero h1 {
  margin: 0;
  max-width: 760px;
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: 500;
  line-height: .96;
  letter-spacing: 0;
}
.kc-hero p {
  margin: 24px 0 0;
  max-width: 650px;
  color: #64748b;
  font-size: 16px;
  line-height: 1.75;
}
.kc-card-stage {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1100px;
}
.kc-id-card {
  position: relative;
  z-index: 2;
  width: min(100%, 360px);
  aspect-ratio: 1.58 / 1;
  padding: 24px;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,246,255,.9)),
    radial-gradient(circle at 84% 16%, rgba(37,99,235,.18), transparent 34%);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: 0 44px 95px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.9);
  transform: rotateY(-12deg) rotateX(7deg);
}
.kc-card-top,
.kc-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kc-card-top span {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  box-shadow: 0 16px 30px rgba(37,99,235,.22);
}
.kc-card-top b {
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 22px;
}
.kc-avatar {
  width: 74px;
  height: 74px;
  margin-top: 28px;
  border-radius: 24px;
  background: linear-gradient(145deg, #dbeafe, #ffffff);
  border: 1px solid #bfdbfe;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.kc-card-lines {
  position: absolute;
  left: 122px;
  right: 24px;
  top: 98px;
  display: grid;
  gap: 12px;
}
.kc-card-lines i {
  height: 12px;
  border-radius: 999px;
  background: #cbd5e1;
}
.kc-card-lines i:nth-child(1) { width: 68%; background: #0f172a; }
.kc-card-lines i:nth-child(2) { width: 68%; }
.kc-card-lines i:nth-child(3) { width: 68%; }
.kc-card-bottom {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
}
.kc-card-bottom strong,
.kc-card-bottom em {
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.kc-card-bottom strong { background: #dcfce7; color: #047857; }
.kc-card-bottom em { background: #eff6ff; color: #2563eb; }
.kc-pulse {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.22);
  box-shadow: 0 0 0 28px rgba(37,99,235,.05);
  animation: pulse 1.9s ease-in-out infinite;
}
.kc-metrics .stat {
  min-height: 150px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,250,252,.86));
  border-color: rgba(226,232,240,.86);
  box-shadow: 0 20px 60px rgba(15,23,42,.06);
}
.kc-metrics .stat b {
  font-size: 30px;
}
.kc-process-section,
.kc-benefits-section {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94)),
    radial-gradient(circle at 80% 10%, rgba(37,99,235,.08), transparent 34%);
}
.kc-process-grid {
  display: grid;
  gap: 16px;
}
.kc-process-grid article,
.kc-pill-row span,
.kc-attachment-card,
.kc-benefit-card {
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: 0 22px 64px rgba(15,23,42,.06);
  backdrop-filter: blur(18px);
}
.kc-process-grid article {
  border-radius: 26px;
  padding: 26px;
}
.kc-process-grid span {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #07152f;
  color: white;
  font-weight: 800;
  box-shadow: 0 16px 30px rgba(7,21,47,.18);
}
.kc-process-grid h3 {
  margin: 18px 0 8px;
  font-family: var(--font-display);
  color: #0f172a;
  font-size: 22px;
}
.kc-process-grid p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.65;
}
.kc-pill-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.kc-pill-row span {
  min-height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  padding: 24px;
}
.kc-attachment-card,
.kc-benefit-card {
  min-height: 250px;
}
.kc-attachment-card:hover .icon-3d {
  transform: perspective(680px) rotateX(6deg) rotateY(-4deg) translateY(-4px);
}
.kc-benefit-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,250,252,.86)),
    radial-gradient(circle at 14% 0%, rgba(37,99,235,.08), transparent 32%);
}
.kc-benefit-card::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  border-radius: 18px;
  background: linear-gradient(145deg, #eff6ff, #ffffff);
  border: 1px solid #dbeafe;
  box-shadow: 0 16px 34px rgba(37,99,235,.12);
}

.kc-hero-copy { position: relative; z-index: 2; }
.kc-product-logo {
  display: block;
  width: min(280px, 70vw);
  height: auto;
  margin-bottom: 26px;
  filter: drop-shadow(0 18px 32px rgba(15,23,42,.08));
}
.kc-brand-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}
.kc-brand-row .badge { margin: 0; }
.kc-brand-row strong {
  color: #1f3566;
  font-family: var(--font-display);
  font-size: 18px;
}
.kc-card-top img {
  width: 144px;
  max-width: 58%;
  height: auto;
  filter: drop-shadow(0 10px 16px rgba(15,23,42,.08));
}
.kc-id-card::before,
.kc-id-card::after {
  content: "";
  position: absolute;
  z-index: -1;
}
.kc-id-card::before {
  inset: auto 28px -16px 28px;
  height: 28px;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(180deg, rgba(191,219,254,.78), rgba(37,99,235,.12));
  transform: skewX(-16deg);
}
.kc-id-card::after {
  inset: 18px -16px 18px auto;
  width: 28px;
  border-radius: 0 28px 28px 0;
  background: linear-gradient(90deg, rgba(37,99,235,.14), rgba(15,23,42,.05));
  transform: skewY(-16deg);
}
.kc-avatar { position: relative; }
.kc-avatar::before,
.kc-avatar::after {
  content: "";
  position: absolute;
  border-radius: 999px;
}
.kc-avatar::before {
  width: 28px;
  height: 28px;
  left: 23px;
  top: 13px;
  background: #93c5fd;
}
.kc-avatar::after {
  width: 48px;
  height: 22px;
  left: 13px;
  top: 48px;
  border-radius: 20px 20px 12px 12px;
  background: #1f3566;
}
.kc-qr {
  position: absolute;
  right: 24px;
  bottom: 74px;
  width: 58px;
  height: 58px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  background: white;
  border: 1px solid #dbeafe;
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
}
.kc-qr i {
  border-radius: 5px;
  background: #0f172a;
}
.kc-qr i:nth-child(2),
.kc-qr i:nth-child(3) { background: #2563eb; }
.kc-rfid {
  position: absolute;
  left: 27px;
  bottom: 74px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.kc-rfid span {
  display: block;
  width: 8px;
  height: 28px;
  border: 2px solid #2563eb;
  border-left: 0;
  border-radius: 0 999px 999px 0;
}
.kc-rfid span:nth-child(2) { height: 38px; opacity: .75; }
.kc-rfid span:nth-child(3) { height: 50px; opacity: .48; }
.kc-access-dots {
  position: absolute;
  right: 26px;
  top: 72px;
  display: flex;
  gap: 7px;
}
.kc-access-dots i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34,197,94,.12);
}
.kc-hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px 13px 13px;
  border-radius: 20px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 18px 45px rgba(15,23,42,.09);
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(18px);
}
.kc-hero-chip i {
  width: 34px;
  height: 34px;
  border-radius: 13px;
  background: linear-gradient(145deg, #eff6ff, #ffffff);
  border: 1px solid #dbeafe;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 22px rgba(37,99,235,.12);
  position: relative;
}
.kc-security i::after {
  content: "";
  position: absolute;
  inset: 9px 10px 11px;
  border-right: 3px solid #22c55e;
  border-bottom: 3px solid #22c55e;
  transform: rotate(42deg);
}
.kc-payment i::after {
  content: "";
  position: absolute;
  inset: 10px 7px;
  border-radius: 5px;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
}
.kc-campus i::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 15px;
  border-radius: 5px 5px 2px 2px;
  background: #1f3566;
  box-shadow: 0 -8px 0 -3px #60a5fa;
}
.kc-hero-chip.one { top: 72px; right: 24px; color: #047857; }
.kc-hero-chip.two { left: 18px; bottom: 92px; color: #1d4ed8; }
.kc-hero-chip.three { right: 54px; bottom: 42px; color: #b45309; }
.kc-3d-visual {
  position: relative;
  width: 118px;
  height: 96px;
  margin-bottom: 24px;
  transform: perspective(700px) rotateX(10deg) rotateY(-12deg);
}
.kc-3d-visual::before,
.kc-3d-visual::after,
.kc-3d-visual i,
.kc-mini-3d::before,
.kc-mini-3d::after {
  content: "";
  position: absolute;
  display: block;
}
.kc-3d-visual::before {
  inset: 16px 10px 10px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(219,234,254,.78));
  border: 1px solid rgba(191,219,254,.9);
  box-shadow: 0 24px 42px rgba(37,99,235,.14), inset 0 1px 0 rgba(255,255,255,.9);
}
.kc-3d-visual::after {
  left: 28px;
  right: 28px;
  bottom: -1px;
  height: 12px;
  border-radius: 999px;
  background: rgba(15,23,42,.1);
  filter: blur(8px);
}
.kc-3d-visual.board i {
  inset: 30px 28px 28px;
  border-radius: 12px;
  background:
    linear-gradient(#2563eb 0 0) 10px 12px / 52px 8px no-repeat,
    linear-gradient(#bfdbfe 0 0) 10px 30px / 38px 7px no-repeat,
    linear-gradient(135deg, #ffffff, #eff6ff);
}
.kc-3d-visual.cloud i {
  left: 34px;
  top: 34px;
  width: 52px;
  height: 34px;
  border-radius: 20px;
  background: linear-gradient(145deg, #38bdf8, #2563eb);
  box-shadow: 0 16px 26px rgba(37,99,235,.18);
}
.kc-3d-visual.cloud i::before {
  content: "";
  position: absolute;
  left: 14px;
  top: -13px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #60a5fa;
}
.kc-3d-visual.package i {
  left: 34px;
  top: 28px;
  width: 54px;
  height: 48px;
  border-radius: 10px 10px 16px 16px;
  background: linear-gradient(145deg, #dbeafe, #ffffff);
  border: 1px solid #bfdbfe;
  box-shadow: inset 0 -10px 0 rgba(37,99,235,.08);
}
.kc-3d-visual.holder::before {
  background: linear-gradient(145deg, rgba(255,255,255,.55), rgba(219,234,254,.35));
  border: 1px solid rgba(147,197,253,.9);
  backdrop-filter: blur(5px);
}
.kc-3d-visual.holder i {
  inset: 28px 34px 22px;
  border-radius: 14px;
  border: 2px solid rgba(37,99,235,.35);
  background: rgba(255,255,255,.36);
}
.kc-3d-visual.lanyard i {
  left: 34px;
  top: 4px;
  width: 46px;
  height: 66px;
  border: 8px solid #1f3566;
  border-bottom: 0;
  border-radius: 999px 999px 12px 12px;
}
.kc-3d-visual.lanyard::before {
  inset: 52px 27px 8px;
  background: linear-gradient(145deg, #ffffff, #dbeafe);
}
.kc-3d-visual.rfid i {
  inset: 34px 22px 26px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 72% 50%, transparent 0 10px, #2563eb 11px 13px, transparent 14px),
    linear-gradient(145deg, #ffffff, #eff6ff);
  border: 1px solid #bfdbfe;
}
.kc-benefit-card::before { display: none; }
.kc-mini-3d {
  position: relative;
  width: 58px;
  height: 58px;
  margin-bottom: 22px;
  border-radius: 20px;
  background: linear-gradient(145deg, #eff6ff, #ffffff);
  border: 1px solid #dbeafe;
  box-shadow: 0 16px 34px rgba(37,99,235,.12);
  transform: perspective(520px) rotateX(10deg) rotateY(-10deg);
}
.kc-mini-3d::before {
  inset: 16px 11px;
  border-radius: 7px;
  background: #2563eb;
}
.kc-benefit-card.community .kc-mini-3d::before {
  inset: 13px 9px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 38%, #2563eb 0 5px, transparent 6px), radial-gradient(circle at 70% 38%, #38bdf8 0 5px, transparent 6px), linear-gradient(#1f3566 0 0) center 28px / 30px 10px no-repeat;
}
.kc-benefit-card.secure .kc-mini-3d::before {
  inset: 10px 15px;
  border-radius: 14px 14px 18px 18px;
  background: linear-gradient(145deg, #2563eb, #1f3566);
}
.kc-benefit-card.secure .kc-mini-3d::after {
  left: 24px;
  top: 24px;
  width: 8px;
  height: 8px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(42deg);
}
.kc-benefit-card.payment .kc-mini-3d::before {
  inset: 16px 9px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
}
.kc-benefit-card.payment .kc-mini-3d::after {
  left: 16px;
  right: 16px;
  top: 28px;
  height: 4px;
  border-radius: 999px;
  background: white;
}
.kc-fa-icon,
.kk-fa-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(219,234,254,.78));
  border: 1px solid rgba(191,219,254,.9);
  color: #2563eb;
  box-shadow: 0 16px 34px rgba(37,99,235,.12), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .18s ease, box-shadow .18s ease;
}
.kc-fa-icon i,
.kk-fa-icon i {
  font-size: 28px;
  line-height: 1;
}
.kc-fa-icon.small {
  width: 58px;
  height: 58px;
  border-radius: 18px;
}
.kc-fa-icon.small i { font-size: 24px; }
.kc-process-grid article:hover .kc-fa-icon,
.kc-attachment-card:hover .kc-fa-icon,
.kc-benefit-card:hover .kc-fa-icon,
.kk-glass-card:hover .kk-fa-icon,
.kk-feature-card:hover .kk-fa-icon,
.kk-benefit-card:hover .kk-fa-icon {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(37,99,235,.16), inset 0 1px 0 rgba(255,255,255,.95);
}

.koekraft-page .section-inner {
  position: relative;
}
.kk-hero {
  position: relative;
  width: 100%;
  max-width: 1400px;
  min-height: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  align-items: center;
  gap: 48px;
  padding: 76px 64px;
  border-radius: 48px;
  background:
    radial-gradient(circle at 86% 18%, rgba(56,189,248,.22), transparent 30%),
    radial-gradient(circle at 58% 88%, rgba(16,185,129,.13), transparent 26%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #eaecf3 100%);
  border: 1px solid rgba(226,232,240,.72);
  box-shadow: 0 40px 100px -28px rgba(15,23,42,.16);
  overflow: hidden;
}
.kk-hero::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,.78);
  pointer-events: none;
}
.kk-hero-copy {
  position: relative;
  z-index: 2;
}
.kk-hero h1 {
  margin: 0;
  max-width: 590px;
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 500;
  line-height: .98;
  letter-spacing: 0;
  color: #07152f;
}
.kk-hero p {
  max-width: 555px;
  margin: 24px 0 0;
  color: #475569;
  font-size: 16px;
  line-height: 1.7;
}
.kk-hero-visual {
  position: relative;
  z-index: 2;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kk-dashboard,
.kk-showcase-board {
  position: relative;
  width: min(100%, 610px);
  padding: 22px;
  border-radius: 34px;
  background: rgba(255,255,255,.64);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 34px 90px rgba(15,23,42,.13), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(24px);
  transform: perspective(1100px) rotateX(8deg) rotateY(-10deg);
}
.kk-dashboard::after,
.kk-showcase-board::after {
  content: "";
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: -24px;
  height: 34px;
  border-radius: 999px;
  background: rgba(15,23,42,.16);
  filter: blur(18px);
  z-index: -1;
}
.kk-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 18px;
  background: rgba(248,250,252,.78);
  border: 1px solid rgba(226,232,240,.84);
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}
.kk-window-bar i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #bfdbfe;
}
.kk-window-bar i:nth-child(1) { background: #fda4af; }
.kk-window-bar i:nth-child(2) { background: #fde68a; }
.kk-window-bar i:nth-child(3) { background: #86efac; margin-right: 8px; }
.kk-dashboard-grid {
  display: grid;
  grid-template-columns: 1.35fr .82fr;
  gap: 16px;
  margin-top: 18px;
}
.kk-course-card,
.kk-ring-card,
.kk-chart-card,
.kk-assignment-card,
.kk-showcase-side article,
.kk-showcase-stats article,
.kk-glass-card,
.kk-feature-card,
.kk-benefit-card,
.kk-usecase-card {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.82);
  box-shadow: 0 20px 60px rgba(15,23,42,.07);
  backdrop-filter: blur(18px);
}
.kk-course-card,
.kk-ring-card,
.kk-chart-card,
.kk-assignment-card {
  min-height: 148px;
  padding: 22px;
  border-radius: 26px;
}
.kk-course-card {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(#2563eb 0 0) 24px 26px / 120px 10px no-repeat,
    linear-gradient(#bfdbfe 0 0) 24px 48px / 190px 8px no-repeat,
    linear-gradient(#dbeafe 0 0) 24px 68px / 150px 8px no-repeat,
    rgba(255,255,255,.82);
}
.kk-course-card b,
.kk-chart-card b,
.kk-assignment-card b,
.kk-float b,
.kk-showcase-side b {
  display: block;
  font-family: var(--font-display);
  color: #0f172a;
  font-size: 20px;
  line-height: 1.1;
}
.kk-course-card span,
.kk-assignment-card span,
.kk-float span,
.kk-showcase-side span {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}
.kk-ring-card {
  display: grid;
  place-items: center;
  text-align: center;
}
.kk-ring {
  width: 92px;
  height: 92px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #07152f;
  font-weight: 900;
  background:
    radial-gradient(circle, #fff 0 52%, transparent 53%),
    conic-gradient(#2563eb 0 82%, #dbeafe 82% 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 14px 28px rgba(37,99,235,.16);
}
.kk-ring-card span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}
.kk-bars,
.kk-showcase-chart {
  height: 92px;
  margin-top: 18px;
  display: flex;
  align-items: end;
  gap: 10px;
}
.kk-bars i,
.kk-showcase-chart i {
  flex: 1;
  height: var(--h);
  min-height: 32px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, #38bdf8 0%, #2563eb 100%);
  box-shadow: 0 12px 24px rgba(37,99,235,.18);
}
.kk-assignment-card {
  background:
    radial-gradient(circle at 86% 18%, rgba(16,185,129,.18), transparent 28%),
    rgba(255,255,255,.82);
}
.kk-progress-line {
  height: 9px;
  margin-top: 18px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.kk-progress-line i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}
.kk-progress-line.green i { background: linear-gradient(90deg, #10b981, #67e8f9); }
.kk-progress-line.purple i { background: linear-gradient(90deg, #7c3aed, #38bdf8); }
.kk-float {
  position: absolute;
  z-index: 3;
  max-width: 210px;
  padding: 17px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: 0 22px 56px rgba(15,23,42,.12);
  backdrop-filter: blur(18px);
}
.kk-float-course { left: -8px; top: 84px; }
.kk-float-cert { right: -4px; top: 40px; }
.kk-float-report { left: 28px; bottom: 52px; }
.kk-about {
  background:
    radial-gradient(circle at 12% 18%, rgba(37,99,235,.08), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
}
.kk-about-cards {
  display: grid;
  gap: 16px;
}
.kk-glass-card,
.kk-feature-card,
.kk-benefit-card,
.kk-usecase-card {
  border-radius: 28px;
  padding: 26px;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.kk-glass-card:hover,
.kk-feature-card:hover,
.kk-benefit-card:hover,
.kk-usecase-card:hover {
  transform: translateY(-6px);
  border-color: rgba(37,99,235,.25);
  box-shadow: 0 26px 70px rgba(15,23,42,.1);
}
.kk-glass-card h3,
.kk-feature-card h3,
.kk-benefit-card h3,
.kk-usecase-card h3,
.kk-timeline h3 {
  margin: 18px 0 9px;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.15;
  color: #0f172a;
}
.kk-glass-card p,
.kk-feature-card p,
.kk-benefit-card p,
.kk-usecase-card p,
.kk-timeline p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.65;
}
.kk-3d-icon {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 22px;
  background: linear-gradient(145deg, #ffffff, #dbeafe);
  border: 1px solid rgba(191,219,254,.9);
  box-shadow: 0 18px 34px rgba(37,99,235,.13), inset 0 1px 0 rgba(255,255,255,.9);
  transform: perspective(620px) rotateX(10deg) rotateY(-12deg);
}
.kk-3d-icon::before,
.kk-3d-icon::after {
  content: "";
  position: absolute;
}
.kk-3d-icon::before {
  inset: 17px 14px;
  border-radius: 9px;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
}
.kk-3d-icon.book::before,
.kk-3d-icon.delivery::before {
  inset: 15px 17px;
  border-radius: 5px 12px 12px 5px;
}
.kk-3d-icon.chart::before,
.kk-3d-icon.insights::before {
  inset: auto 13px 15px;
  height: 30px;
  border-radius: 7px;
  background:
    linear-gradient(#2563eb 0 0) 3px 12px / 7px 18px no-repeat,
    linear-gradient(#38bdf8 0 0) 15px 5px / 7px 25px no-repeat,
    linear-gradient(#10b981 0 0) 27px 0 / 7px 30px no-repeat;
}
.kk-3d-icon.users::before,
.kk-3d-icon.spaces::before {
  inset: 14px 11px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 34%, #2563eb 0 6px, transparent 7px),
    radial-gradient(circle at 72% 34%, #38bdf8 0 6px, transparent 7px),
    linear-gradient(#07152f 0 0) center 29px / 36px 11px no-repeat;
}
.kk-3d-icon.path::before,
.kk-3d-icon.hybrid::before {
  inset: 13px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% 72%, #2563eb 0 5px, transparent 6px),
    radial-gradient(circle at 50% 30%, #38bdf8 0 5px, transparent 6px),
    radial-gradient(circle at 78% 72%, #10b981 0 5px, transparent 6px),
    linear-gradient(135deg, transparent 43%, #bfdbfe 44% 57%, transparent 58%);
}
.kk-3d-icon.media::before,
.kk-3d-icon.exam::before {
  inset: 16px 13px;
  border-radius: 10px;
  background:
    linear-gradient(#ffffff 0 0) 10px 10px / 20px 5px no-repeat,
    linear-gradient(#bfdbfe 0 0) 10px 22px / 26px 5px no-repeat,
    linear-gradient(135deg, #2563eb, #38bdf8);
}
.kk-3d-icon.skill::before,
.kk-3d-icon.future::before {
  inset: 14px 18px;
  border-radius: 999px 999px 12px 12px;
  background: linear-gradient(145deg, #2563eb, #07152f);
}
.kk-3d-icon.access::before,
.kk-3d-icon.personal::before,
.kk-3d-icon.teaching::before,
.kk-3d-icon.retention::before,
.kk-3d-icon.engage::before {
  inset: 15px;
  border-radius: 14px;
}
.kk-feature-grid .kk-feature-card {
  min-height: 275px;
}
.kk-journey-section {
  background:
    linear-gradient(135deg, rgba(7,21,47,.98), rgba(16,42,84,.95)),
    radial-gradient(circle at 72% 20%, rgba(56,189,248,.18), transparent 32%);
  color: white;
}
.kk-journey-section .section-head h2,
.kk-journey-section .kk-timeline h3 { color: white; }
.kk-journey-section .section-head p,
.kk-journey-section .kk-timeline p { color: #b6c6db; }
.kk-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.kk-timeline::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 31px;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, rgba(255,255,255,.24), #10b981);
}
.kk-timeline article {
  position: relative;
  z-index: 1;
  min-height: 250px;
  padding: 72px 20px 24px;
  border-radius: 26px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
}
.kk-timeline span,
.kk-usecase-card span {
  position: absolute;
  top: 18px;
  left: 20px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: white;
  color: #07152f;
  font-weight: 900;
  box-shadow: 0 16px 32px rgba(0,0,0,.16);
}
.kk-showcase {
  background:
    radial-gradient(circle at 24% 18%, rgba(37,99,235,.1), transparent 34%),
    linear-gradient(145deg, #ffffff, #f8fafc);
}
.kk-showcase-board {
  width: 100%;
  display: grid;
  grid-template-columns: 1.45fr .82fr;
  gap: 18px;
  transform: none;
}
.kk-showcase-main,
.kk-showcase-side {
  min-width: 0;
}
.kk-showcase-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.kk-showcase-stats article,
.kk-showcase-side article {
  border-radius: 22px;
  padding: 20px;
}
.kk-showcase-stats b {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  color: #07152f;
}
.kk-showcase-stats span {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}
.kk-showcase-chart {
  min-height: 230px;
  padding: 22px;
  border-radius: 26px;
  background: rgba(248,250,252,.82);
  border: 1px solid rgba(226,232,240,.82);
}
.kk-showcase-side {
  display: grid;
  gap: 14px;
}
.kk-benefit-card {
  min-height: 250px;
}
.kk-usecases {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94)),
    radial-gradient(circle at 92% 10%, rgba(16,185,129,.1), transparent 28%);
}
.kk-usecase-card {
  min-height: 210px;
  padding-top: 76px;
}
.kk-ecosystem {
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: 46px;
  background:
    radial-gradient(circle at 78% 24%, rgba(56,189,248,.2), transparent 28%),
    radial-gradient(circle at 20% 80%, rgba(16,185,129,.12), transparent 28%),
    linear-gradient(135deg, #07152f, #102a54);
  color: white;
}
.kk-ecosystem h2 {
  margin: 14px 0 0;
  max-width: 520px;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  line-height: 1.05;
  color: white;
}
.kk-ecosystem-stage {
  position: relative;
  min-height: 430px;
}
.kk-ecosystem-stage::before {
  content: "";
  position: absolute;
  inset: 66px;
  border-radius: 999px;
  border: 1px dashed rgba(255,255,255,.28);
  animation: kk-spin 18s linear infinite;
}
.kk-eco-node {
  position: absolute;
  width: 190px;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 26px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 28px 70px rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
  color: white;
  font-family: var(--font-display);
  font-size: 19px;
  text-align: center;
}
.kk-eco-node.course { left: 8%; top: 34px; }
.kk-eco-node.quiz { right: 8%; top: 62px; }
.kk-eco-node.simulation { left: 28%; top: 166px; background: rgba(37,99,235,.32); }
.kk-eco-node.collab { left: 4%; bottom: 54px; }
.kk-eco-node.analytics { right: 4%; bottom: 34px; }

@keyframes kk-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 1190px) {
  .kk-hero,
  .kk-ecosystem {
    grid-template-columns: 1fr;
  }
  .kk-hero-visual {
    min-height: 460px;
  }
  .kk-timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kk-timeline::before {
    display: none;
  }
}
@media (max-width: 900px) {
  .kk-hero {
    padding: 56px 32px;
    border-radius: 36px;
  }
  .kk-hero h1 {
    font-size: 48px;
  }
  .kk-dashboard,
  .kk-showcase-board {
    transform: none;
  }
  .kk-showcase-board {
    grid-template-columns: 1fr;
  }
  .kk-timeline,
  .kk-showcase-stats {
    grid-template-columns: 1fr;
  }
  .kk-timeline article {
    min-height: auto;
  }
}
@media (max-width: 640px) {
  .kk-hero {
    min-height: auto;
    padding: 40px 24px;
  }
  .kk-hero h1 {
    font-size: 38px;
  }
  .kk-hero p {
    font-size: 15px;
  }
  .kk-hero-visual,
  .kk-ecosystem-stage {
    min-height: 420px;
  }
  .kk-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .kk-course-card {
    min-height: 190px;
  }
  .kk-float {
    position: relative;
    inset: auto;
    max-width: none;
    width: 100%;
    margin-top: 12px;
  }
  .kk-hero-visual {
    display: block;
  }
  .kk-dashboard {
    width: 100%;
    padding: 16px;
    border-radius: 28px;
  }
  .kk-ecosystem {
    min-height: auto;
    padding-top: 44px;
    padding-bottom: 44px;
    grid-template-columns: 1fr;
  }
  .kk-ecosystem h2 {
    font-size: 34px;
  }
  .kk-ecosystem-stage {
    display: grid;
    gap: 12px;
    min-height: auto;
  }
  .kk-ecosystem-stage::before {
    display: none;
  }
  .kk-eco-node {
    position: static;
    width: 100%;
    min-height: 82px;
  }
}

.ai-page .section-inner {
  position: relative;
}
.ap-hero {
  position: relative;
  width: 100%;
  max-width: 1400px;
  min-height: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
  align-items: center;
  gap: 50px;
  padding: 76px 64px;
  border-radius: 48px;
  background:
    radial-gradient(circle at 86% 16%, rgba(37,99,235,.2), transparent 30%),
    radial-gradient(circle at 68% 86%, rgba(14,165,233,.18), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #eaecf3 100%);
  border: 1px solid rgba(226,232,240,.72);
  box-shadow: 0 40px 100px -28px rgba(15,23,42,.18);
  overflow: hidden;
}
.ap-hero::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,.78);
  pointer-events: none;
}
.ap-hero-copy,
.ap-hero-visual {
  position: relative;
  z-index: 2;
}
.ap-hero h1 {
  margin: 0;
  max-width: 610px;
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 500;
  line-height: .98;
  letter-spacing: 0;
  color: #07152f;
}
.ap-hero p {
  max-width: 540px;
  margin: 24px 0 0;
  color: #475569;
  font-size: 16px;
  line-height: 1.7;
}
.ap-hero-visual {
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ap-monitor,
.ap-live-board {
  width: min(100%, 650px);
  padding: 22px;
  border-radius: 34px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 34px 90px rgba(15,23,42,.15), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(24px);
  transform: perspective(1100px) rotateX(8deg) rotateY(-10deg);
}
.ap-monitor::after,
.ap-live-board::after {
  content: "";
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: -24px;
  height: 34px;
  border-radius: 999px;
  background: rgba(15,23,42,.18);
  filter: blur(18px);
  z-index: -1;
}
.ap-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 18px;
  background: rgba(248,250,252,.78);
  border: 1px solid rgba(226,232,240,.84);
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}
.ap-window-bar i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #bfdbfe;
}
.ap-window-bar i:nth-child(1) { background: #fda4af; }
.ap-window-bar i:nth-child(2) { background: #fde68a; }
.ap-window-bar i:nth-child(3) { background: #86efac; margin-right: 8px; }
.ap-window-bar span { margin-right: auto; }
.ap-window-bar b {
  padding: 6px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #047857;
  font-size: 11px;
}
.ap-video-grid,
.ap-candidate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.ap-candidate-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
}
.ap-video {
  position: relative;
  min-height: 138px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, #bfdbfe 0 22px, transparent 23px),
    linear-gradient(#1e3a8a 0 0) center 88px / 78px 30px no-repeat,
    linear-gradient(145deg, #eff6ff, #dbeafe);
  border: 1px solid rgba(191,219,254,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 42px rgba(37,99,235,.12);
}
.ap-video::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 18px;
  border: 1px solid rgba(37,99,235,.24);
}
.ap-video.verified::after,
.ap-video.alert::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 14px;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 6px rgba(34,197,94,.14);
}
.ap-video.alert {
  background:
    radial-gradient(circle at 50% 36%, #fecdd3 0 22px, transparent 23px),
    linear-gradient(#9f1239 0 0) center 88px / 78px 30px no-repeat,
    linear-gradient(145deg, #fff1f2, #ffe4e6);
  border-color: rgba(251,113,133,.8);
}
.ap-video.alert::after {
  background: #f43f5e;
  box-shadow: 0 0 0 6px rgba(244,63,94,.14);
}
.ap-video span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #0f172a;
  font-size: 11px;
  font-weight: 800;
}
.ap-monitor-bottom {
  display: grid;
  grid-template-columns: 116px minmax(0,1fr);
  gap: 14px;
  margin-top: 14px;
}
.ap-risk-ring {
  width: 116px;
  min-height: 116px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  color: #07152f;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  background:
    radial-gradient(circle, #fff 0 48%, transparent 49%),
    conic-gradient(#2563eb 0 91%, #dbeafe 91% 100%);
  box-shadow: 0 16px 36px rgba(37,99,235,.16);
}
.ap-alert-panel,
.ap-live-side article,
.ap-glass-card,
.ap-feature-card,
.ap-layer-card,
.ap-benefit-card,
.ap-usecase-card {
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(226,232,240,.84);
  box-shadow: 0 20px 60px rgba(15,23,42,.07);
  backdrop-filter: blur(18px);
}
.ap-alert-panel {
  min-width: 0;
  padding: 18px;
  border-radius: 24px;
}
.ap-alert-panel b,
.ap-live-side b {
  display: block;
  font-family: var(--font-display);
  color: #0f172a;
  font-size: 20px;
}
.ap-alert-panel span,
.ap-live-side span {
  display: block;
  margin-top: 9px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}
.ap-float {
  position: absolute;
  z-index: 3;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(226,232,240,.88);
  box-shadow: 0 20px 52px rgba(15,23,42,.12);
  backdrop-filter: blur(18px);
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}
.ap-face { left: -4px; top: 88px; color: #1d4ed8; }
.ap-id { right: 2px; top: 48px; color: #047857; }
.ap-risk { left: 24px; bottom: 54px; color: #b45309; }
.ap-about {
  background:
    radial-gradient(circle at 10% 20%, rgba(37,99,235,.08), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
}
.ap-card-stack {
  display: grid;
  gap: 16px;
}
.ap-glass-card,
.ap-feature-card,
.ap-layer-card,
.ap-benefit-card,
.ap-usecase-card {
  border-radius: 28px;
  padding: 26px;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.ap-glass-card:hover,
.ap-feature-card:hover,
.ap-layer-card:hover,
.ap-benefit-card:hover,
.ap-usecase-card:hover {
  transform: translateY(-6px);
  border-color: rgba(37,99,235,.25);
  box-shadow: 0 26px 70px rgba(15,23,42,.1);
}
.ap-glass-card i,
.ap-feature-card i,
.ap-layer-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(224,242,254,.95), rgba(238,242,255,.95));
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
  font-size: 1.08rem;
}
.ap-glass-card h3,
.ap-feature-card h3,
.ap-layer-card h3,
.ap-benefit-card h3,
.ap-usecase-card h3,
.ap-timeline h3 {
  margin: 18px 0 9px;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.15;
  color: #0f172a;
}
.ap-glass-card p,
.ap-feature-card p,
.ap-layer-card p,
.ap-benefit-card p,
.ap-usecase-card p,
.ap-timeline p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.65;
}
.ap-3d-icon {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 22px;
  background: linear-gradient(145deg, #ffffff, #dbeafe);
  border: 1px solid rgba(191,219,254,.9);
  box-shadow: 0 18px 34px rgba(37,99,235,.13), inset 0 1px 0 rgba(255,255,255,.9);
  transform: perspective(620px) rotateX(10deg) rotateY(-12deg);
}
.ap-3d-icon::before,
.ap-3d-icon::after {
  content: "";
  position: absolute;
}
.ap-3d-icon::before {
  inset: 15px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
}
.ap-3d-icon.shield::before,
.ap-3d-icon.id::before,
.ap-3d-icon.audit::before {
  inset: 12px 17px;
  border-radius: 16px 16px 20px 20px;
  background: linear-gradient(145deg, #2563eb, #07152f);
}
.ap-3d-icon.eye::before,
.ap-3d-icon.face::before,
.ap-3d-icon.live::before {
  inset: 18px 10px;
  border-radius: 999px;
  background: radial-gradient(circle at center, #fff 0 5px, #2563eb 6px 14px, #38bdf8 15px);
}
.ap-3d-icon.warning::before {
  inset: 13px 16px;
  clip-path: polygon(50% 0, 100% 88%, 0 88%);
  border-radius: 4px;
  background: linear-gradient(145deg, #f59e0b, #f43f5e);
}
.ap-3d-icon.tab::before,
.ap-3d-icon.report::before,
.ap-3d-icon.evidence::before {
  inset: 16px 12px;
  border-radius: 9px;
  background:
    linear-gradient(#fff 0 0) 8px 10px / 24px 5px no-repeat,
    linear-gradient(#bfdbfe 0 0) 8px 22px / 30px 5px no-repeat,
    linear-gradient(135deg, #2563eb, #38bdf8);
}
.ap-3d-icon.multi::before,
.ap-3d-icon.environment::before,
.ap-3d-icon.behavior::before {
  inset: 13px 9px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 34%, #2563eb 0 6px, transparent 7px),
    radial-gradient(circle at 72% 34%, #38bdf8 0 6px, transparent 7px),
    linear-gradient(#07152f 0 0) center 29px / 36px 11px no-repeat;
}
.ap-3d-icon.score::before {
  inset: 12px;
  border-radius: 999px;
  background:
    radial-gradient(circle, #fff 0 40%, transparent 41%),
    conic-gradient(#2563eb 0 78%, #bfdbfe 78% 100%);
}
.ap-feature-card {
  min-height: 275px;
}
.ap-workflow {
  background:
    linear-gradient(135deg, rgba(7,21,47,.98), rgba(16,42,84,.96)),
    radial-gradient(circle at 74% 20%, rgba(56,189,248,.18), transparent 32%);
  color: white;
}
.ap-workflow .section-head h2,
.ap-workflow .ap-timeline h3 { color: white; }
.ap-workflow .ap-timeline p { color: #b6c6db; }
.ap-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.ap-timeline::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 31px;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, rgba(255,255,255,.24), #60a5fa);
}
.ap-timeline article {
  position: relative;
  z-index: 1;
  min-height: 255px;
  padding: 72px 18px 24px;
  border-radius: 26px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
}
.ap-timeline span,
.ap-usecase-card span {
  position: absolute;
  top: 18px;
  left: 20px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: white;
  color: #07152f;
  font-weight: 900;
  box-shadow: 0 16px 32px rgba(0,0,0,.16);
}
.ap-live {
  background:
    radial-gradient(circle at 20% 16%, rgba(37,99,235,.1), transparent 32%),
    linear-gradient(145deg, #ffffff, #f8fafc);
}
.ap-live-board {
  position: relative;
  width: 100%;
  transform: none;
}
.ap-live-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, .65fr);
  gap: 18px;
  margin-top: 18px;
}
.ap-live-side {
  display: grid;
  gap: 14px;
}
.ap-live-side article {
  border-radius: 24px;
  padding: 22px;
}
.ap-live-side strong {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 46px;
  color: #07152f;
}
.ap-layer-card,
.ap-benefit-card {
  min-height: 230px;
}
.ap-usecases {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94)),
    radial-gradient(circle at 92% 10%, rgba(37,99,235,.1), transparent 28%);
}
.ap-usecase-card {
  min-height: 210px;
  padding-top: 76px;
}

@media (max-width: 1190px) {
  .ap-hero {
    grid-template-columns: 1fr;
  }
  .ap-hero-visual {
    min-height: 470px;
  }
  .ap-timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ap-timeline::before {
    display: none;
  }
}
@media (max-width: 900px) {
  .ap-hero {
    padding: 56px 32px;
    border-radius: 36px;
  }
  .ap-hero h1 {
    font-size: 48px;
  }
  .ap-monitor {
    transform: none;
  }
  .ap-live-layout,
  .ap-timeline {
    grid-template-columns: 1fr;
  }
  .ap-candidate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ap-timeline article {
    min-height: auto;
  }
}
@media (max-width: 640px) {
  .ap-hero {
    min-height: auto;
    padding: 40px 24px;
  }
  .ap-hero h1 {
    font-size: 38px;
  }
  .ap-hero p {
    font-size: 15px;
  }
  .ap-hero-visual {
    min-height: auto;
    display: block;
  }
  .ap-monitor {
    width: 100%;
    padding: 16px;
    border-radius: 28px;
  }
  .ap-video-grid,
  .ap-candidate-grid,
  .ap-monitor-bottom {
    grid-template-columns: 1fr;
  }
  .ap-risk-ring {
    width: 100%;
    min-height: 96px;
  }
  .ap-float {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: 12px;
  }
  .ap-video {
    min-height: 128px;
  }
}

.koeskor-page .section-inner { position: relative; }
.ks-hero {
  position: relative;
  width: 100%;
  max-width: 1400px;
  min-height: 660px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
  align-items: center;
  gap: 50px;
  padding: 76px 64px;
  border-radius: 48px;
  background:
    radial-gradient(circle at 84% 16%, rgba(37,99,235,.2), transparent 30%),
    radial-gradient(circle at 64% 90%, rgba(56,189,248,.16), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #eaecf3 100%);
  border: 1px solid rgba(226,232,240,.72);
  box-shadow: 0 40px 100px -28px rgba(15,23,42,.18);
  overflow: hidden;
}
.ks-hero::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,.78);
  pointer-events: none;
}
.ks-hero-copy,
.ks-hero-visual { position: relative; z-index: 2; }
.ks-hero-logo {
  width: min(210px, 58vw);
  display: block;
  margin: 0 0 22px;
}
.ks-hero h1 {
  margin: 0;
  max-width: 650px;
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 500;
  line-height: .98;
  letter-spacing: 0;
  color: #07152f;
}
.ks-hero p {
  max-width: 560px;
  margin: 24px 0 0;
  color: #475569;
  font-size: 16px;
  line-height: 1.7;
}
.ks-hero-visual {
  min-height: 510px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ks-dashboard,
.ks-qb-board,
.ks-live-board {
  position: relative;
  width: min(100%, 650px);
  padding: 22px;
  border-radius: 34px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 34px 90px rgba(15,23,42,.15), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(24px);
}
.ks-dashboard { transform: perspective(1100px) rotateX(8deg) rotateY(-10deg); }
.ks-dashboard::after,
.ks-qb-board::after,
.ks-live-board::after {
  content: "";
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: -24px;
  height: 34px;
  border-radius: 999px;
  background: rgba(15,23,42,.16);
  filter: blur(18px);
  z-index: -1;
}
.ks-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 18px;
  background: rgba(248,250,252,.78);
  border: 1px solid rgba(226,232,240,.84);
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}
.ks-window-bar i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}
.ks-window-bar i:nth-child(1) { background: #fda4af; }
.ks-window-bar i:nth-child(2) { background: #fde68a; }
.ks-window-bar i:nth-child(3) { background: #86efac; margin-right: 8px; }
.ks-window-bar span { margin-right: auto; }
.ks-window-bar b {
  padding: 6px 10px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 11px;
}
.ks-dashboard-grid {
  display: grid;
  grid-template-columns: 1.35fr .84fr;
  gap: 15px;
  margin-top: 18px;
}
.ks-exam-card,
.ks-timer-card,
.ks-question-card,
.ks-analytics-card,
.ks-glass-card,
.ks-feature-card,
.ks-benefit-card,
.ks-usecase-card,
.ks-report-grid article,
.ks-candidate-grid article,
.ks-activity-panel {
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(226,232,240,.84);
  box-shadow: 0 20px 60px rgba(15,23,42,.07);
  backdrop-filter: blur(18px);
}
.ks-exam-card,
.ks-timer-card,
.ks-question-card,
.ks-analytics-card {
  min-height: 150px;
  padding: 22px;
  border-radius: 26px;
}
.ks-exam-card {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(#2563eb 0 0) 24px 26px / 132px 10px no-repeat,
    linear-gradient(#bfdbfe 0 0) 24px 50px / 220px 8px no-repeat,
    linear-gradient(#dbeafe 0 0) 24px 72px / 170px 8px no-repeat,
    rgba(255,255,255,.84);
}
.ks-exam-card b,
.ks-question-card b,
.ks-analytics-card b,
.ks-activity-panel b,
.ks-report-grid b {
  display: block;
  font-family: var(--font-display);
  color: #0f172a;
  font-size: 20px;
}
.ks-exam-card span,
.ks-question-card span,
.ks-activity-panel span,
.ks-report-grid span {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}
.ks-timer-card {
  display: grid;
  place-items: center;
  text-align: center;
}
.ks-timer-card strong {
  font-family: var(--font-display);
  font-size: 38px;
  color: #07152f;
}
.ks-progress {
  height: 9px;
  margin-top: 18px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.ks-progress i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}
.ks-bars {
  height: 90px;
  margin-top: 18px;
  display: flex;
  align-items: end;
  gap: 8px;
}
.ks-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, #38bdf8, #2563eb);
}
.ks-float {
  position: absolute;
  z-index: 3;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(226,232,240,.88);
  box-shadow: 0 20px 52px rgba(15,23,42,.12);
  backdrop-filter: blur(18px);
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}
.ks-candidate { left: 0; top: 88px; color: #1d4ed8; }
.ks-result { right: 4px; top: 48px; color: #047857; }
.ks-secure { left: 28px; bottom: 54px; color: #b45309; }
.ks-about,
.ks-question-bank,
.ks-reporting,
.ks-usecases {
  background:
    radial-gradient(circle at 12% 18%, rgba(37,99,235,.08), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
}
.ks-learning-intel {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.95)),
    radial-gradient(circle at 14% 12%, rgba(37,99,235,.12), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(16,185,129,.1), transparent 30%);
}
.ks-intel-quote {
  margin-top: 28px;
  padding: 20px 22px;
  border-radius: 22px;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: 0 22px 58px rgba(15,23,42,.08);
}
.ks-intel-panel {
  position: relative;
  padding: 18px;
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(15,23,42,.96), rgba(30,41,59,.94)),
    radial-gradient(circle at 16% 18%, rgba(59,130,246,.28), transparent 38%);
  border: 1px solid rgba(148,163,184,.24);
  box-shadow: 0 34px 90px rgba(15,23,42,.16);
  overflow: hidden;
}
.ks-intel-panel .ks-window-bar {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: #e2e8f0;
}
.ks-intel-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.ks-intel-stats article {
  min-height: 140px;
  padding: 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.ks-intel-stats strong {
  display: block;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 500;
  line-height: 1;
}
.ks-intel-stats span {
  display: block;
  margin-top: 12px;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.45;
}
.ks-intel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 44px;
}
.ks-intel-grid article {
  padding: 24px;
  border-radius: 26px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: 0 22px 58px rgba(15,23,42,.06);
}
.ks-intel-grid h3 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
}
.ks-intel-grid p {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.65;
}
.ks-academic-intel,
.ks-student-intel,
.ks-swot-risk,
.ks-obe,
.ks-ecosystem,
.ks-roi {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94)),
    radial-gradient(circle at 12% 18%, rgba(37,99,235,.08), transparent 32%);
}
.ks-academic-grid,
.ks-student-map,
.ks-swot-grid,
.ks-ecosystem-grid,
.ks-roi-chain {
  display: grid;
  gap: 18px;
}
.ks-academic-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ks-academic-grid article,
.ks-student-map article,
.ks-swot-grid article,
.ks-ecosystem-grid article,
.ks-roi-chain article {
  padding: 24px;
  border-radius: 26px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: 0 22px 58px rgba(15,23,42,.06);
}
.ks-academic-grid strong,
.ks-roi-chain strong {
  display: block;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.15;
}
.ks-academic-grid span,
.ks-roi-chain span {
  margin-top: 12px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
}
.ks-student-map {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ks-student-map article {
  min-height: 114px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(239,246,255,.78));
}
.ks-student-map b {
  display: block;
  color: #0f172a;
  font-size: 18px;
}
.ks-student-map span {
  margin-top: 10px;
  color: #2563eb;
  font-size: 13px;
  font-weight: 800;
}
.ks-swot-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ks-swot-grid article span {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: #ffffff;
  background: #0f172a;
  font-family: var(--font-display);
  font-size: 24px;
}
.ks-swot-grid h3,
.ks-ecosystem-grid h3,
.ks-risk-radar h3 {
  margin: 18px 0 0;
  color: #0f172a;
  font-size: 20px;
}
.ks-swot-grid p,
.ks-ecosystem-grid p,
.ks-risk-radar p {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.65;
}
.ks-risk-radar {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 30px;
  align-items: center;
  margin-top: 28px;
  padding: 30px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 82% 48%, rgba(56,189,248,.38), transparent 36%),
    linear-gradient(145deg, #082f6f 0%, #0f6ec8 48%, #38bdf8 100%);
  border: 1px solid rgba(186,230,253,.42);
  box-shadow: 0 28px 70px rgba(14, 116, 144, .18);
}
.ks-risk-radar h3 { color: #ffffff; }
.ks-risk-radar p { color: #cbd5e1; }
.ks-obe-flow {
  display: grid;
  gap: 14px;
}
.ks-obe-flow article {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: 0 18px 48px rgba(15,23,42,.05);
}
.ks-obe-flow span {
  width: 48px;
  height: 48px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  color: #2563eb;
  font-weight: 900;
}


.ks-radar-visual {
  position: relative;
  width: 220px;
  height: 220px;
  margin-left: auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(240,249,255,.95) 0 8%, rgba(125,211,252,.46) 9% 29%, rgba(14,165,233,.20) 30% 52%, rgba(2,132,199,.18) 53% 100%),
    linear-gradient(145deg, rgba(224,242,254,.96), rgba(14,165,233,.48));
  border: 1px solid rgba(186,230,253,.92);
  box-shadow:
    0 26px 54px rgba(2,132,199,.26),
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 -26px 48px rgba(12,74,110,.16);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ks-radar-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -28deg, rgba(14,165,233,.86) 0deg, rgba(56,189,248,.46) 34deg, transparent 76deg, transparent 360deg);
  mix-blend-mode: multiply;
  animation: radarSweep 4s linear infinite;
}
.ks-radar-visual::after {
  content: "";
  position: absolute;
  inset: 17px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.44);
  box-shadow: inset 0 0 32px rgba(255,255,255,.24);
}
.ks-radar-visual i {
  position: absolute;
  border: 1px solid rgba(224,242,254,.86);
  border-radius: 50%;
  background: transparent;
}
.ks-radar-visual i:nth-child(1) {
  width: 66px;
  height: 66px;
}
.ks-radar-visual i:nth-child(2) {
  width: 124px;
  height: 124px;
}
.ks-radar-visual i:nth-child(3) {
  width: 182px;
  height: 182px;
  box-shadow: 0 0 0 14px rgba(224,242,254,.14);
}
.ks-radar-visual b {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.05;
  text-shadow: 0 6px 22px rgba(3,105,161,.38);
}
@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse{
    0%,100%{
        opacity: .4;
        transform: scale(1);
    }
    50%{
        opacity: 1;
        transform: scale(1.05);
    }
}








.ks-obe-flow b {
  color: #0f172a;
  font-size: 18px;
}
.ks-programs {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(37,99,235,.1), transparent 31%),
    radial-gradient(circle at 88% 13%, rgba(56,189,248,.12), transparent 30%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 48%, #eef6ff 100%);
  border: 1px solid rgba(226,232,240,.86);
  box-shadow: 0 34px 90px rgba(15,23,42,.07);
}
.ks-programs::before {
  content: "";
  position: absolute;
  inset: 22px;
  width: auto;
  height: auto;
  border-radius: 32px;
  border: 1px solid rgba(226,232,240,.72);
  background: transparent;
  filter: none;
  pointer-events: none;
}
.ks-programs::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: -180px;
  width: 460px;
  height: 460px;
  border-radius: 999px;
  background: rgba(37,99,235,.08);
  filter: blur(46px);
  pointer-events: none;
}
.ks-programs-head,
.ks-programs-layout,
.ks-program-metrics,
.ks-program-benefits { position: relative; z-index: 1; }
.ks-programs-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}
.ks-programs-head h2 {
  margin: 8px 0 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.05;
}
.ks-programs-head p {
  max-width: 720px;
  margin: 14px 0 0;
  color: #52657f;
  line-height: 1.7;
}
.ks-programs-head img {
  width: 158px;
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 18px;
  background: white;
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 16px 42px rgba(15,23,42,.06);
}
.ks-programs-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 340px;
  gap: 24px;
  align-items: stretch;
}
.ks-program-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.ks-program-card {
  position: relative;
  min-height: 430px;
  padding: 32px 24px 24px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 20px 54px rgba(15,23,42,.065);
  text-align: center;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ks-program-card:hover {
  transform: translateY(-5px);
  border-color: rgba(37,99,235,.25);
  box-shadow: 0 28px 70px rgba(15,23,42,.1);
}
.ks-program-card::before {
  content: "";
  position: absolute;
  inset: 16px 18px auto;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent, #2563eb), rgba(56,189,248,.72));
}
.ks-program-card.essential { --accent: #2563eb; }
.ks-program-card.advanced {
  --accent: #07152f;
  transform: translateY(-10px);
  border-color: rgba(37,99,235,.26);
  box-shadow: 0 30px 80px rgba(7,21,47,.12);
}
.ks-program-card.enterprise { --accent: #38bdf8; }
.ks-program-card.advanced:hover { transform: translateY(-15px); }
.ks-popular {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 999px;
  background: #07152f;
  color: white;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ks-program-icon {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 22px auto 16px;
  border-radius: 20px;
  background: linear-gradient(145deg, #eff6ff, #ffffff);
  border: 1px solid rgba(191,219,254,.76);
  color: var(--accent);
  font-size: 25px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 28px rgba(37,99,235,.08);
}
.ks-program-card h3 {
  margin: 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
}
.ks-program-card p {
  margin: 10px 0 14px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}
.ks-program-card strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(191,219,254,.8);
}
.ks-program-card.advanced strong { background: #07152f; color: #ffffff; }
.ks-program-card.enterprise strong { background: #ecfeff; color: #0f172a; }
.ks-program-card ul,
.ks-pricing-panel ul {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.ks-program-card li {
  display: flex;
  gap: 8px;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
}
.ks-program-card li + li { margin-top: 9px; }
.ks-program-card li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 900;
}
.ks-pricing-panel {
  padding: 30px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 90% 10%, rgba(56,189,248,.18), transparent 35%),
    linear-gradient(145deg, #07152f, #0f2a55);
  color: white;
  box-shadow: 0 30px 76px rgba(7,21,47,.22);
}
.ks-pricing-panel h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}
.ks-pricing-panel li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  color: #e0ecff;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.ks-pricing-panel li i {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: #93c5fd;
  font-size: 16px;
}
.ks-recommended {
  margin-top: 24px;
  padding: 20px;
  border-radius: 24px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(191,219,254,.18);
}
.ks-recommended b,
.ks-recommended span { display: block; }
.ks-recommended b {
  color: white;
  font-family: var(--font-display);
  font-size: 18px;
}
.ks-recommended span {
  margin-top: 5px;
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 700;
}
.ks-recommended p {
  margin: 12px 0 0;
  color: #dbeafe;
  font-size: 13px;
  line-height: 1.6;
}
.ks-program-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 22px;
}
.ks-program-metrics article {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  column-gap: 14px;
  align-items: center;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 16px 42px rgba(15,23,42,.055);
}
.ks-program-metrics i {
  grid-row: span 2;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 20px;
}
.ks-program-metrics b {
  color: #07152f;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}
.ks-program-metrics span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}
.ks-program-benefits {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 12px;
  margin-top: 18px;
}
.ks-program-benefits span {
  min-height: 92px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(226,232,240,.9);
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 14px 34px rgba(15,23,42,.045);
}
.ks-program-benefits i {
  color: #2563eb;
  font-size: 20px;
}
.ks-program-card li {
  align-items: flex-start;
  gap: 10px;
}
.ks-program-card li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-top: .5em;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(37,99,235,.08);
}

/* KoeSkor programs premium console redesign */
.ks-programs {
  background:
    linear-gradient(90deg, rgba(7,21,47,.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(7,21,47,.03) 1px, transparent 1px),
    radial-gradient(circle at 12% 12%, rgba(37,99,235,.12), transparent 34%),
    radial-gradient(circle at 92% 16%, rgba(56,189,248,.14), transparent 30%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 52%, #eff6ff 100%);
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
  border: 1px solid rgba(191,219,254,.72);
  box-shadow: 0 34px 110px rgba(15,23,42,.09);
}
.ks-programs::before {
  inset: 18px;
  border-radius: 34px;
  border-color: rgba(255,255,255,.8);
}
.ks-programs::after {
  right: -120px;
  bottom: -170px;
  width: 500px;
  height: 500px;
  background: rgba(37,99,235,.11);
  filter: blur(54px);
}
.ks-programs-head {
  margin-bottom: 32px;
}
.ks-programs-head h2 {
  max-width: 780px;
  font-size: clamp(34px, 4.3vw, 54px);
  line-height: 1;
}
.ks-programs-head p {
  max-width: 760px;
}
.ks-programs-head img {
  width: 168px;
  padding: 12px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  border-color: rgba(191,219,254,.82);
  box-shadow: 0 20px 48px rgba(37,99,235,.1);
}
.ks-programs-layout {
  grid-template-columns: minmax(0,1fr) 360px;
  gap: 18px;
}
.ks-program-cards {
  gap: 0;
  overflow: hidden;
  border-radius: 30px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(191,219,254,.72);
  box-shadow: 0 24px 70px rgba(15,23,42,.075);
}
.ks-program-card {
  min-height: 448px;
  padding: 36px 28px 28px;
  border-radius: 0;
  background: rgba(255,255,255,.62);
  border: 0;
  border-right: 1px solid rgba(191,219,254,.58);
  box-shadow: none;
  text-align: left;
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.ks-program-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.94);
  box-shadow: 0 26px 70px rgba(37,99,235,.1);
  z-index: 2;
}
.ks-program-card::before {
  inset: 0 auto auto 0;
  width: 100%;
  height: 5px;
  border-radius: 0;
}
.ks-program-card.advanced {
  transform: none;
  background:
    radial-gradient(circle at 80% 0%, rgba(56,189,248,.12), transparent 34%),
    linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.16);
}
.ks-program-card.advanced:hover {
  transform: translateY(-4px);
}
.ks-program-card.enterprise {
  border-right: 0;
}
.ks-popular {
  top: 18px;
  right: 20px;
  left: auto;
  transform: none;
  padding: 8px 13px;
  background: linear-gradient(135deg, #07152f, #0f2a55);
}
.ks-program-icon {
  width: 58px;
  height: 58px;
  margin: 8px 0 20px;
  border-radius: 18px;
}
.ks-program-card h3 {
  font-size: 23px;
}
.ks-program-card p {
  min-height: 42px;
  margin: 10px 0 18px;
}
.ks-program-card strong {
  width: 100%;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 16px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}
.ks-pricing-panel {
  position: relative;
  overflow: hidden;
  padding: 30px;
  background:
    radial-gradient(circle at 92% 8%, rgba(56,189,248,.28), transparent 34%),
    radial-gradient(circle at 8% 86%, rgba(37,99,235,.22), transparent 32%),
    linear-gradient(145deg, #07152f, #0f2a55);
  box-shadow: 0 30px 76px rgba(7,21,47,.24);
}
.ks-pricing-panel::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
}
.ks-pricing-panel h3,
.ks-pricing-panel li,
.ks-recommended {
  position: relative;
}
.ks-pricing-panel h3 {
  font-size: 24px;
}
.ks-pricing-panel li {
  padding: 12px 0;
}
.ks-recommended {
  padding: 22px;
  background: rgba(255,255,255,.11);
  border-color: rgba(191,219,254,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.ks-program-metrics {
  gap: 12px;
  margin-top: 18px;
}
.ks-program-metrics article {
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  border-color: rgba(191,219,254,.66);
}
.ks-program-benefits {
  gap: 10px;
  margin-top: 12px;
}
.ks-program-benefits span {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 12px;
  background: rgba(255,255,255,.74);
  border-color: rgba(191,219,254,.58);
}
.ks-program-benefits i {
  font-size: 18px;
}
.ks-ecosystem-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ks-roi-chain {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.ks-card-stack { display: grid; gap: 16px; }
.ks-glass-card,
.ks-feature-card,
.ks-benefit-card,
.ks-usecase-card,
.ks-report-grid article,
.ks-candidate-grid article,
.ks-activity-panel {
  border-radius: 28px;
  padding: 26px;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.ks-glass-card:hover,
.ks-feature-card:hover,
.ks-benefit-card:hover,
.ks-usecase-card:hover {
  transform: translateY(-6px);
  border-color: rgba(37,99,235,.25);
  box-shadow: 0 26px 70px rgba(15,23,42,.1);
}
.ks-glass-card h3,
.ks-feature-card h3,
.ks-benefit-card h3,
.ks-usecase-card h3,
.ks-timeline h3 {
  margin: 18px 0 9px;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.15;
  color: #0f172a;
}
.ks-glass-card p,
.ks-feature-card p,
.ks-benefit-card p,
.ks-usecase-card p,
.ks-timeline p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.65;
}
.ks-3d-icon {
  position: relative;
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: linear-gradient(145deg, #ffffff, #dbeafe);
  border: 1px solid rgba(191,219,254,.9);
  box-shadow: 0 18px 34px rgba(37,99,235,.13), inset 0 1px 0 rgba(255,255,255,.9);
}
.ks-3d-icon::before {
  content: none;
}
.ks-3d-icon i {
  color: #2563eb;
  font-size: 26px;
  line-height: 1;
}
.ks-line-icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff, #e0f2fe);
  border: 1px solid rgba(191,219,254,.92);
  color: #2563eb;
  box-shadow: 0 16px 32px rgba(37,99,235,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
.ks-line-icon i {
  font-size: 22px;
  line-height: 1;
}
.ks-intel-grid .ks-line-icon,
.ks-academic-grid .ks-line-icon,
.ks-student-map .ks-line-icon,
.ks-ecosystem-grid .ks-line-icon,
.ks-roi-chain .ks-line-icon,
.ks-benefit-card .ks-line-icon {
  margin-bottom: 16px;
}
.ks-workflow {
  background:
    linear-gradient(135deg, rgba(7,21,47,.98), rgba(16,42,84,.96)),
    radial-gradient(circle at 74% 20%, rgba(56,189,248,.18), transparent 32%);
  color: white;
}
.ks-workflow .section-head h2,
.ks-workflow .ks-timeline h3 { color: white; }
.ks-workflow .ks-timeline p { color: #b6c6db; }
.ks-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.ks-timeline::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 31px;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, rgba(255,255,255,.24), #60a5fa);
}
.ks-timeline article {
  position: relative;
  z-index: 1;
  min-height: 255px;
  padding: 72px 18px 24px;
  border-radius: 26px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
}
.ks-timeline span,
.ks-usecase-card span {
  position: absolute;
  top: 18px;
  left: 20px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: white;
  color: #07152f;
  font-weight: 900;
  box-shadow: 0 16px 32px rgba(0,0,0,.16);
}
.ks-timeline span i,
.ks-usecase-card span i {
  font-size: 18px;
  line-height: 1;
}
.ks-timeline span {
  color: #2563eb;
  background: linear-gradient(145deg, #ffffff, #dbeafe);
}
.ks-usecase-card span {
  color: #2563eb;
  background: linear-gradient(145deg, #ffffff, #e0f2fe);
  border: 1px solid rgba(191,219,254,.88);
}
.ks-qb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.ks-qb-grid span {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.84);
  box-shadow: 0 16px 40px rgba(15,23,42,.06);
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 18px;
  text-align: center;
}
.ks-feature-card { min-height: 270px; }
.ks-live {
  background:
    radial-gradient(circle at 20% 16%, rgba(37,99,235,.1), transparent 32%),
    linear-gradient(145deg, #ffffff, #f8fafc);
}
.ks-live-board { width: 100%; }
.ks-live-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 18px;
  margin-top: 18px;
}
.ks-candidate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.ks-candidate-grid strong,
.ks-report-grid strong {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 42px;
  color: #07152f;
}
.ks-activity-panel span { padding-top: 6px; }
.ks-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ks-report-grid article { min-height: 190px; }
.ks-benefit-card { min-height: 172px; }
.ks-usecase-card {
  min-height: 210px;
  padding-top: 76px;
}

@media (max-width: 1190px) {
  .ks-hero { grid-template-columns: 1fr; }
  .ks-hero-visual { min-height: 470px; }
  .ks-timeline,
  .ks-intel-grid,
  .ks-academic-grid,
  .ks-swot-grid,
  .ks-ecosystem-grid,
  .ks-roi-chain,
  .ks-report-grid,
  .ks-program-cards,
  .ks-program-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ks-programs-layout { grid-template-columns: 1fr; }
  .ks-program-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ks-timeline::before { display: none; }
}
@media (max-width: 900px) {
  .ks-hero {
    padding: 56px 32px;
    border-radius: 36px;
  }
  .ks-hero h1 { font-size: 48px; }
  .ks-dashboard { transform: none; }
  .ks-intel-grid,
  .ks-academic-grid,
  .ks-swot-grid,
  .ks-ecosystem-grid,
  .ks-roi-chain,
  .ks-program-cards,
  .ks-program-metrics,
  .ks-program-benefits,
  .ks-live-layout,
  .ks-timeline { grid-template-columns: 1fr; }
  .ks-programs-head { display: grid; }
  .ks-program-card.advanced { transform: none; }
  .ks-risk-radar { grid-template-columns: 1fr; }
  .ks-radar-visual { margin: 0; }
  .ks-timeline article { min-height: auto; }
}
@media (max-width: 640px) {
  .ks-hero {
    min-height: auto;
    padding: 40px 24px;
  }
  .ks-hero h1 { font-size: 38px; }
  .ks-hero p { font-size: 15px; }
  .ks-hero-visual {
    min-height: auto;
    display: block;
  }
  .ks-programs-head img { width: 132px; }
  .ks-program-card,
  .ks-pricing-panel { border-radius: 24px; }
  .ks-program-metrics article { grid-template-columns: 1fr; row-gap: 10px; text-align: center; }
  .ks-program-metrics i { margin: 0 auto; }
  .ks-dashboard,
  .ks-qb-board,
  .ks-live-board {
    width: 100%;
    padding: 16px;
    border-radius: 28px;
  }
  .ks-dashboard-grid,
  .ks-qb-grid,
  .ks-intel-stats,
  .ks-student-map,
  .ks-candidate-grid,
  .ks-report-grid { grid-template-columns: 1fr; }
  .ks-intel-panel { border-radius: 28px; padding: 16px; }
  .ks-intel-quote { font-size: 19px; }
  .ks-risk-radar { padding: 22px; border-radius: 26px; }
  .ks-radar-visual { width: 180px; height: 180px; }
  .ks-float {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: 12px;
  }
}

.coding-page .section-inner { position: relative; }
.ca-hero {
  position: relative;
  width: 100%;
  max-width: 1400px;
  min-height: 650px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
  align-items: center;
  gap: 50px;
  padding: 76px 64px;
  border-radius: 48px;
  background:
    radial-gradient(circle at 84% 16%, rgba(6,182,212,.2), transparent 30%),
    radial-gradient(circle at 64% 90%, rgba(37,99,235,.16), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #eaecf3 100%);
  border: 1px solid rgba(226,232,240,.72);
  box-shadow: 0 40px 100px -28px rgba(15,23,42,.18);
  overflow: hidden;
}
.ca-hero::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,.78);
  pointer-events: none;
}
.ca-hero-copy,
.ca-hero-visual { position: relative; z-index: 2; }
.ca-hero h1 {
  margin: 0;
  max-width: 620px;
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 500;
  line-height: .98;
  color: #07152f;
}
.ca-hero p {
  max-width: 560px;
  margin: 24px 0 0;
  color: #475569;
  font-size: 16px;
  line-height: 1.7;
}
.ca-hero-visual {
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ca-code-dashboard,
.ca-live-board {
  position: relative;
  width: min(100%, 660px);
  padding: 22px;
  border-radius: 34px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 34px 90px rgba(15,23,42,.15), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(24px);
}
.ca-code-dashboard { transform: perspective(1100px) rotateX(8deg) rotateY(-10deg); }
.ca-code-dashboard::after,
.ca-live-board::after {
  content: "";
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: -24px;
  height: 34px;
  border-radius: 999px;
  background: rgba(15,23,42,.16);
  filter: blur(18px);
  z-index: -1;
}
.ca-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 18px;
  background: rgba(248,250,252,.78);
  border: 1px solid rgba(226,232,240,.84);
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}
.ca-window-bar i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}
.ca-window-bar i:nth-child(1) { background: #fda4af; }
.ca-window-bar i:nth-child(2) { background: #fde68a; }
.ca-window-bar i:nth-child(3) { background: #86efac; margin-right: 8px; }
.ca-window-bar span { margin-right: auto; }
.ca-window-bar b {
  padding: 6px 10px;
  border-radius: 999px;
  background: #cffafe;
  color: #0e7490;
  font-size: 11px;
}
.ca-code-layout,
.ca-live-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr);
  gap: 15px;
  margin-top: 18px;
}
.ca-editor {
  min-height: 310px;
  padding: 24px;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(15,23,42,.98), rgba(7,21,47,.98)),
    radial-gradient(circle at 90% 0, rgba(34,211,238,.16), transparent 32%);
  color: #dbeafe;
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 56px rgba(15,23,42,.18);
  font-family: Consolas, 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.8;
}
.ca-editor.large { min-height: 390px; }
.ca-editor span { display: block; }
.ca-editor span:nth-child(2) { color: #67e8f9; }
.ca-editor span:nth-child(3) { color: #bfdbfe; }
.ca-side,
.ca-console {
  display: grid;
  gap: 14px;
}
.ca-side article,
.ca-console article,
.ca-glass-card,
.ca-feature-card,
.ca-benefit-card,
.ca-usecase-card,
.ca-analytics-grid article {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(226,232,240,.84);
  box-shadow: 0 20px 60px rgba(15,23,42,.07);
  backdrop-filter: blur(18px);
}
.ca-side article,
.ca-console article {
  min-height: 92px;
  padding: 18px;
  border-radius: 22px;
}
.ca-side b,
.ca-console b,
.ca-analytics-grid b {
  display: block;
  font-family: var(--font-display);
  color: #0f172a;
  font-size: 18px;
}
.ca-side strong,
.ca-console strong,
.ca-analytics-grid strong {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  color: #07152f;
  font-size: 34px;
}
.ca-side span,
.ca-console span,
.ca-analytics-grid span {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}
.ca-float {
  position: absolute;
  z-index: 3;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(226,232,240,.88);
  box-shadow: 0 20px 52px rgba(15,23,42,.12);
  backdrop-filter: blur(18px);
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}
.ca-lang { left: 0; top: 88px; color: #0e7490; }
.ca-score { right: 4px; top: 48px; color: #1d4ed8; }
.ca-result { left: 28px; bottom: 54px; color: #047857; }
.ca-about,
.ca-analytics,
.ca-usecases,
.ca-live {
  background:
    radial-gradient(circle at 12% 18%, rgba(6,182,212,.08), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
}
.ca-card-stack { display: grid; gap: 16px; }
.ca-glass-card,
.ca-feature-card,
.ca-benefit-card,
.ca-usecase-card,
.ca-analytics-grid article {
  border-radius: 28px;
  padding: 26px;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.ca-glass-card:hover,
.ca-feature-card:hover,
.ca-benefit-card:hover,
.ca-usecase-card:hover {
  transform: translateY(-6px);
  border-color: rgba(6,182,212,.28);
  box-shadow: 0 26px 70px rgba(15,23,42,.1);
}
.ca-glass-card i,
.ca-feature-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(224,242,254,.95), rgba(238,242,255,.95));
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
  font-size: 1.08rem;
}
.ca-glass-card h3,
.ca-feature-card h3,
.ca-benefit-card h3,
.ca-usecase-card h3,
.ca-timeline h3 {
  margin: 18px 0 9px;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.15;
  color: #0f172a;
}
.ca-glass-card p,
.ca-feature-card p,
.ca-benefit-card p,
.ca-usecase-card p,
.ca-timeline p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.65;
}
.ca-3d-icon {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 22px;
  background: linear-gradient(145deg, #ffffff, #cffafe);
  border: 1px solid rgba(165,243,252,.9);
  box-shadow: 0 18px 34px rgba(6,182,212,.13), inset 0 1px 0 rgba(255,255,255,.9);
  transform: perspective(620px) rotateX(10deg) rotateY(-12deg);
}
.ca-3d-icon::before {
  content: "";
  position: absolute;
  inset: 15px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0891b2, #2563eb);
}
.ca-3d-icon.screen::before,
.ca-3d-icon.test::before,
.ca-3d-icon.report::before {
  background:
    linear-gradient(#fff 0 0) 8px 10px / 24px 5px no-repeat,
    linear-gradient(#bfdbfe 0 0) 8px 22px / 30px 5px no-repeat,
    linear-gradient(135deg, #0891b2, #2563eb);
}
.ca-3d-icon.analytics::before,
.ca-3d-icon.score::before {
  inset: auto 13px 15px;
  height: 30px;
  background:
    linear-gradient(#0891b2 0 0) 3px 12px / 7px 18px no-repeat,
    linear-gradient(#38bdf8 0 0) 15px 5px / 7px 25px no-repeat,
    linear-gradient(#2563eb 0 0) 27px 0 / 7px 30px no-repeat;
}
.ca-3d-icon.hire::before {
  inset: 13px 9px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 34%, #0891b2 0 6px, transparent 7px),
    radial-gradient(circle at 72% 34%, #2563eb 0 6px, transparent 7px),
    linear-gradient(#07152f 0 0) center 29px / 36px 11px no-repeat;
}
.ca-workflow {
  background:
    linear-gradient(135deg, rgba(7,21,47,.98), rgba(16,42,84,.96)),
    radial-gradient(circle at 74% 20%, rgba(34,211,238,.18), transparent 32%);
  color: white;
}
.ca-workflow .section-head h2,
.ca-workflow .ca-timeline h3 { color: white; }
.ca-workflow .ca-timeline p { color: #b6c6db; }
.ca-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.ca-timeline::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 31px;
  height: 2px;
  background: linear-gradient(90deg, #22d3ee, rgba(255,255,255,.24), #60a5fa);
}
.ca-timeline article {
  position: relative;
  z-index: 1;
  min-height: 255px;
  padding: 72px 18px 24px;
  border-radius: 26px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
}
.ca-timeline span,
.ca-usecase-card span {
  position: absolute;
  top: 18px;
  left: 20px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: white;
  color: #07152f;
  font-weight: 900;
  box-shadow: 0 16px 32px rgba(0,0,0,.16);
}
.ca-feature-card { min-height: 270px; }
.ca-live-board { width: 100%; }
.ca-analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ca-analytics-grid article { min-height: 190px; }
.ca-progress {
  height: 9px;
  margin-top: 22px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.ca-progress i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0891b2, #2563eb);
}
.ca-bars {
  height: 96px;
  margin-top: 18px;
  display: flex;
  align-items: end;
  gap: 10px;
}
.ca-bars i {
  flex: 1;
  height: var(--h);
  min-height: 32px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, #22d3ee 0%, #2563eb 100%);
  box-shadow: 0 12px 24px rgba(37,99,235,.18);
}
.ca-benefit-card { min-height: 153px; }
.ca-usecase-card {
  min-height: 210px;
  padding-top: 76px;
}

@media (max-width: 1190px) {
  .ca-hero { grid-template-columns: 1fr; }
  .ca-hero-visual { min-height: 470px; }
  .ca-timeline,
  .ca-analytics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ca-timeline::before { display: none; }
}
@media (max-width: 900px) {
  .ca-hero {
    padding: 56px 32px;
    border-radius: 36px;
  }
  .ca-hero h1 { font-size: 48px; }
  .ca-code-dashboard { transform: none; }
  .ca-code-layout,
  .ca-live-layout,
  .ca-timeline { grid-template-columns: 1fr; }
  .ca-timeline article { min-height: auto; }
}
@media (max-width: 640px) {
  .ca-hero {
    min-height: auto;
    padding: 40px 24px;
  }
  .ca-hero h1 { font-size: 38px; }
  .ca-hero p { font-size: 15px; }
  .ca-hero-visual {
    min-height: auto;
    display: block;
  }
  .ca-code-dashboard,
  .ca-live-board {
    width: 100%;
    padding: 16px;
    border-radius: 28px;
  }
  .ca-analytics-grid { grid-template-columns: 1fr; }
  .ca-editor { min-height: 260px; font-size: 12px; }
  .ca-float {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: 12px;
  }
}

.survey-page .section-inner { position: relative; }
.sv-hero {
  position: relative;
  width: 100%;
  max-width: 1400px;
  min-height: 650px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
  align-items: center;
  gap: 50px;
  padding: 76px 64px;
  border-radius: 48px;
  background:
    radial-gradient(circle at 84% 16%, rgba(37,99,235,.18), transparent 30%),
    radial-gradient(circle at 66% 88%, rgba(20,184,166,.14), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #eaecf3 100%);
  border: 1px solid rgba(226,232,240,.72);
  box-shadow: 0 40px 100px -28px rgba(15,23,42,.18);
  overflow: hidden;
}
.sv-hero::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,.78);
  pointer-events: none;
}
.sv-hero-copy,
.sv-hero-visual { position: relative; z-index: 2; }
.sv-hero h1 {
  margin: 0;
  max-width: 650px;
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 500;
  line-height: .98;
  color: #07152f;
}
.sv-hero p {
  max-width: 560px;
  margin: 24px 0 0;
  color: #475569;
  font-size: 16px;
  line-height: 1.7;
}
.sv-hero-visual {
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sv-dashboard,
.sv-showcase-board {
  position: relative;
  width: min(100%, 650px);
  padding: 22px;
  border-radius: 34px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 34px 90px rgba(15,23,42,.15), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(24px);
}
.sv-dashboard { transform: perspective(1100px) rotateX(8deg) rotateY(-10deg); }
.sv-dashboard::after,
.sv-showcase-board::after {
  content: "";
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: -24px;
  height: 34px;
  border-radius: 999px;
  background: rgba(15,23,42,.16);
  filter: blur(18px);
  z-index: -1;
}
.sv-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 18px;
  background: rgba(248,250,252,.78);
  border: 1px solid rgba(226,232,240,.84);
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}
.sv-window-bar i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}
.sv-window-bar i:nth-child(1) { background: #fda4af; }
.sv-window-bar i:nth-child(2) { background: #fde68a; }
.sv-window-bar i:nth-child(3) { background: #86efac; margin-right: 8px; }
.sv-window-bar span { margin-right: auto; }
.sv-window-bar b {
  padding: 6px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #047857;
  font-size: 11px;
}
.sv-dashboard-grid {
  display: grid;
  grid-template-columns: 1.25fr .85fr;
  gap: 15px;
  margin-top: 18px;
}
.sv-builder-card,
.sv-score-card,
.sv-chart-card,
.sv-feedback-card,
.sv-glass-card,
.sv-feature-card,
.sv-choice-card,
.sv-benefit-card,
.sv-usecase-card,
.sv-showcase-grid article {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(226,232,240,.84);
  box-shadow: 0 20px 60px rgba(15,23,42,.07);
  backdrop-filter: blur(18px);
}
.sv-builder-card,
.sv-score-card,
.sv-chart-card,
.sv-feedback-card {
  min-height: 150px;
  padding: 22px;
  border-radius: 26px;
}
.sv-builder-card {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(#2563eb 0 0) 24px 30px / 132px 10px no-repeat,
    linear-gradient(#bfdbfe 0 0) 24px 55px / 210px 8px no-repeat,
    linear-gradient(#dbeafe 0 0) 24px 78px / 170px 8px no-repeat,
    rgba(255,255,255,.84);
}
.sv-builder-card > i {
  position: absolute;
  top: 26px;
  right: 26px;
}
.sv-builder-card b,
.sv-chart-card b,
.sv-feedback-card b,
.sv-showcase-grid b {
  display: block;
  font-family: var(--font-display);
  color: #0f172a;
  font-size: 20px;
}
.sv-builder-card span,
.sv-feedback-card span,
.sv-showcase-grid span {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}
.sv-score-card {
  display: grid;
  place-items: center;
  text-align: center;
}
.sv-score-card strong,
.sv-showcase-grid strong {
  display: block;
  font-family: var(--font-display);
  font-size: 42px;
  color: #07152f;
}
.sv-bars {
  height: 96px;
  margin-top: 18px;
  display: flex;
  align-items: end;
  gap: 10px;
}
.sv-bars i {
  flex: 1;
  height: var(--h);
  min-height: 32px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, #38bdf8 0%, #2563eb 100%);
  box-shadow: 0 12px 24px rgba(37,99,235,.18);
}
.sv-float {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(226,232,240,.88);
  box-shadow: 0 20px 52px rgba(15,23,42,.12);
  backdrop-filter: blur(18px);
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}
.sv-trend { left: 0; top: 88px; color: #1d4ed8; }
.sv-comment { right: 4px; top: 48px; color: #047857; }
.sv-insight { left: 28px; bottom: 54px; color: #b45309; }
.survey-page .fa-solid {
  color: #2563eb;
}
.sv-glass-card > i,
.sv-feature-card > i,
.sv-choice-card > i,
.sv-benefit-card > i,
.sv-usecase-card > i {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(145deg, #ffffff, #dbeafe);
  border: 1px solid rgba(191,219,254,.9);
  box-shadow: 0 18px 34px rgba(37,99,235,.13), inset 0 1px 0 rgba(255,255,255,.9);
  font-size: 24px;
  transform: perspective(620px) rotateX(10deg) rotateY(-12deg);
}
.sv-about,
.sv-showcase,
.sv-usecases {
  background:
    radial-gradient(circle at 12% 18%, rgba(37,99,235,.08), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
}
.sv-card-stack { display: grid; gap: 16px; }
.sv-glass-card,
.sv-feature-card,
.sv-choice-card,
.sv-benefit-card,
.sv-usecase-card,
.sv-showcase-grid article {
  border-radius: 28px;
  padding: 26px;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.sv-glass-card:hover,
.sv-feature-card:hover,
.sv-choice-card:hover,
.sv-benefit-card:hover,
.sv-usecase-card:hover {
  transform: translateY(-6px);
  border-color: rgba(37,99,235,.25);
  box-shadow: 0 26px 70px rgba(15,23,42,.1);
}
.sv-glass-card h3,
.sv-feature-card h3,
.sv-choice-card h3,
.sv-benefit-card h3,
.sv-usecase-card h3,
.sv-timeline h3 {
  margin: 18px 0 9px;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.15;
  color: #0f172a;
}
.sv-glass-card p,
.sv-feature-card p,
.sv-choice-card p,
.sv-benefit-card p,
.sv-usecase-card p,
.sv-timeline p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.65;
}
.sv-workflow {
  background:
    linear-gradient(135deg, rgba(7,21,47,.98), rgba(16,42,84,.96)),
    radial-gradient(circle at 74% 20%, rgba(56,189,248,.18), transparent 32%);
  color: white;
}
.sv-workflow .section-head h2,
.sv-workflow .sv-timeline h3 { color: white; }
.sv-workflow .sv-timeline p { color: #b6c6db; }
.sv-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.sv-timeline::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 31px;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, rgba(255,255,255,.24), #14b8a6);
}
.sv-timeline article {
  position: relative;
  z-index: 1;
  min-height: 260px;
  padding: 72px 20px 24px;
  border-radius: 26px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
}
.sv-timeline span,
.sv-usecase-card span {
  position: absolute;
  top: 18px;
  left: 20px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: white;
  color: #07152f;
  font-weight: 900;
  box-shadow: 0 16px 32px rgba(0,0,0,.16);
}
.sv-timeline article > i {
  color: #67e8f9;
  font-size: 24px;
}
.sv-feature-card { min-height: 275px; }
.sv-showcase-board { width: 100%; }
.sv-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.sv-showcase-grid article {
  min-height: 190px;
  display: flex;
  flex-direction: column;
}
.sv-showcase-grid .wide {
  grid-column: span 2;
}
.sv-showcase-grid .wide .sv-bars {
  height: 160px;
  margin-top: auto;
  padding-top: 22px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
}
.sv-showcase-grid .wide .sv-bars i {
  width: 100%;
  min-height: 42px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, #38bdf8 0%, #2563eb 100%);
  box-shadow: 0 14px 28px rgba(37,99,235,.18);
}
.sv-breakdown-card {
  gap: 18px;
  justify-content: flex-start;
}
.sv-breakdown-list {
  display: grid;
  gap: 12px;
  margin-top: auto;
}
.sv-breakdown-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.sv-breakdown-row strong {
  font-size: 12px;
  line-height: 1.2;
  color: #0f172a;
}
.sv-breakdown-row small {
  font-size: 12px;
  font-weight: 700;
  color: #2563eb;
}
.sv-breakdown-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.sv-breakdown-track i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #2563eb);
}
.sv-choice-card,
.sv-benefit-card { min-height: 230px; }
.sv-usecase-card {
  min-height: 220px;
  padding-top: 76px;
}
.sv-usecase-card > i {
  margin-top: 8px;
}

@media (max-width: 1190px) {
  .sv-hero { grid-template-columns: 1fr; }
  .sv-hero-visual { min-height: 470px; }
  .sv-timeline,
  .sv-showcase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-timeline::before { display: none; }
}
@media (max-width: 900px) {
  .sv-hero {
    padding: 56px 32px;
    border-radius: 36px;
  }
  .sv-hero h1 { font-size: 48px; }
  .sv-dashboard { transform: none; }
  .sv-timeline { grid-template-columns: 1fr; }
  .sv-timeline article { min-height: auto; }
  .sv-showcase-grid .wide { grid-column: auto; }
}
@media (max-width: 640px) {
  .sv-hero {
    min-height: auto;
    padding: 40px 24px;
  }
  .sv-hero h1 { font-size: 38px; }
  .sv-hero p { font-size: 15px; }
  .sv-hero-visual {
    min-height: auto;
    display: block;
  }
  .sv-dashboard,
  .sv-showcase-board {
    width: 100%;
    padding: 16px;
    border-radius: 28px;
  }
  .sv-dashboard-grid,
  .sv-showcase-grid { grid-template-columns: 1fr; }
  .sv-float {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: 12px;
  }
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease-out, transform .7s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0);}
.fade-scale { opacity: 0; transform: scale(.94); transition: opacity .45s ease-out, transform .45s ease-out; transition-delay: var(--delay,0ms); }
.visible .fade-scale, .fade-scale.visible { opacity: 1; transform: scale(1); }
.float-anim { animation: float 4s ease-in-out infinite; }
.pulse { animation: pulse 1.6s ease-in-out infinite; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

@media (min-width: 768px) {
  .top-pad { padding: 24px 24px 0; }
  .outer-pad { padding: 0 24px; }
.hero-media-ai-head {
    left: 40%;
    width: 60%;
    margin-top:-90px;
    right: auto;
    background: #EAECF3;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 16%, black 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 16%, black 100%);
  }
  .hero-media-ai-head video,
  .hero-media-ai-head img {
    object-position: 62% center;
    transform: scale(1.16);
  }
  .hero-media-koeskor {
    inset: 0;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    border-radius: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero-media-koeskor video,
  .hero-media-koeskor img {
      width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center right;
 transform: translateX(120px) scale(1);
  }
  .hero-slide-koeskor .hero-content {
    max-width: 45%;
     background: linear-gradient(
135deg,
#6A757F 0%,
#8E99A4 50%,
#D2C4B8 100%
);
  }



  .hero-slide-koeskor .hero-content p{color:white;}
.hero-slide-koeskor .hero-content h1{color:rgb(0, 0, 0);}

  .hero-content { padding: 64px 64px 0; }
  .hero h1, .page-hero h1 { font-size: 56px; }
  .hero p, .page-hero p { font-size: 15px; }
  .page-hero { padding: 96px 64px; }
  .section-inner { padding: 80px 64px; }
  .section-head h2 { font-size: 48px; }
  .section-title { font-size: 44px; }
  .cta { padding: 96px 64px; }
  .cta h2 { font-size: 48px; }
}
@media (min-width: 1024px) {
  .top-pad { padding-left: 0; padding-right: 0; }
  .outer-pad { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 1190px) {
  .cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-tabs,
  .pricing-product-grid,
  .kc-pill-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .page { padding-top: 104px; }
  .site-header { width: 100%; padding: 0; }
  .main-header { height: 76px; padding: 0 14px 0 20px; border-radius: 0; }
  .desktop-nav,
  .header-cta { display: none; }
  .products-mega,
  .solutions-mega,
  .industries-mega { display: none; }
  .mobile-products-accordion,
  .mobile-solutions-accordion,
  .mobile-industries-accordion { display: block; }
  .mobile-toggle { display: flex; }
  .site-logo { width: auto; }
  .logo-icon { width: 34px; height: 34px; border-radius: 11px; font-size: 21px; }
  .logo-word { font-size: 24px; }
  .logo-tagline { font-size: 6px; }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .cols-3, .cols-4, .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-hero { grid-template-columns: 1fr; padding: 56px 32px; }
  .about-hero h1 { font-size: 46px; }
  .about-welcome-panel,
  .about-mission-panel { padding: 56px 32px; }
  .about-welcome-split { grid-template-columns: 1fr; gap: 34px; }
  .about-welcome-copy { padding-left: 0; border-left: 0; }
  .ceo-card,
  .footer-grid { grid-template-columns: 1fr; }
  .ceo-avatar { max-width: 240px; }
  .footer-bottom { flex-direction: column; }
  .policy-hero {
    min-height: 300px;
    padding: 52px 34px;
    border-radius: 34px;
  }
  .policy-hero h1 { font-size: 44px; }
  .policy-hero p { font-size: 16px; }
  .policy-layout {
    grid-template-columns: 1fr;
  }
  .policy-summary {
    position: static;
  }
  .policy-document {
    padding: 34px;
    border-radius: 28px;
  }
  .policy-document h2 { font-size: 28px; }
  .products-hero {
    grid-template-columns: 1fr;
    padding: 56px 32px;
  }
  .products-hero h1 { font-size: 48px; }
  .products-hero-visual,
  .suite-console { min-height: auto; }
  .suite-product-card,
  .suite-product-card.primary {
    grid-column: span 6;
  }
  .suite-product-card:nth-child(2),
  .suite-product-card:nth-child(3),
  .suite-product-card:nth-child(4),
  .suite-product-card:nth-child(5),
  .suite-product-card:nth-child(6),
  .suite-product-card:nth-child(7) {
    grid-column: span 6;
  }
  .products-flow { grid-template-columns: 1fr; }
  .products-match-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .kt-hero { grid-template-columns: 1fr; padding: 56px 32px; }
  .kt-hero h1 { font-size: 48px; }
  .kt-dashboard-split { grid-template-columns: 1fr; }
  .kt-score-grid { grid-template-columns: 1fr; }
  .kt-hero-v2 { min-height: auto; }
  .kt-analytics-visual { min-height: 520px; }
  .kt-ecosystem-map {
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
    margin-top: 34px;
  }
  .kt-ecosystem-map::before,
  .kt-ecosystem-map::after { display: none; }
  .kt-hub,
  .kt-ecosystem-map article {
    position: relative;
    inset: auto;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    transform: none;
    border-radius: 24px;
  }
  .kt-hub { grid-column: 1 / -1; min-height: 180px; }
  .kt-split-head,
  .kt-library-head,
  .kt-insights { grid-template-columns: 1fr; }
  .kt-fail-grid,
  .kt-why-grid,
  .kt-library-board,
  .kt-use-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kt-org-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .contact-hero { grid-template-columns: 1fr; padding: 56px 32px; }
  .contact-hero h1 { font-size: 48px; }
  .contact-location-split { grid-template-columns: 1fr; }
  .contact-enterprise { grid-template-columns: 1fr; padding: 56px 32px; }
  .contact-copy-block h1 { font-size: 50px; }
  .contact-focus-panel,
  .contact-response-note { max-width: none; }
  .pricing-hero { grid-template-columns: 1fr; padding: 56px 32px; }
  .pricing-hero h1 { font-size: 48px; }
  .pricing-plan-head { grid-template-columns: 1fr; }
  .pricing-feature-grid,
  .pricing-feature-grid.compact,
  .edu-visual-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-hero { grid-template-columns: 1fr; padding: 56px 32px; }
  .kc-hero h1 { font-size: 48px; }
}
@media (max-width: 640px) {
  .home-analytics-wrap { padding: 0; }
  .home-analytics-section {
    padding: 44px 18px;
    border-radius: 0;
  }
  .home-analytics-section::before {
    display: none;
  }
  .home-analytics-head {
    gap: 18px;
    margin-bottom: 24px;
  }
  .home-analytics-head h2 { font-size: 34px; }
  .home-analytics-head p { font-size: 14px; }
  .home-analytics-metrics { grid-template-columns: 1fr; }
  .home-analytics-metrics article {
    min-height: 0;
    padding: 18px;
    border-radius: 20px;
  }
  .home-analytics-metrics b { font-size: 30px; }
  .home-koeskor-wrap { padding: 0 10px; }
  .home-koeskor-section {
    padding: 38px 20px;
    border-radius: 34px;
  }
  .home-koeskor-copy h2 { font-size: 34px; }
  .home-koeskor-copy p { font-size: 14px; }
  .home-koeskor-status,
  .home-koeskor-grid,
  .home-koeskor-row {
    grid-template-columns: 1fr;
  }
  .home-koeskor-timer { width: 100%; }
  .home-koeskor-row b { text-align: left; }
  .home-chart-panel,
  .home-rank-panel {
    padding: 18px;
    border-radius: 22px;
  }
  .home-chart {
    gap: 6px;
    height: 190px;
    margin-top: 22px;
  }
  .home-chart-col small { font-size: 9px; }
  .home-panel-topline {
    flex-direction: column;
    gap: 8px;
  }
  .home-panel-topline > b { font-size: 28px; }
  .home-score-row {
    padding: 13px;
    border-radius: 16px;
  }

  .page { padding-top: 94px; }
  .site-header { margin-top: 0; width: 100%; padding: 0; }
  .main-header { height: 70px; padding-left: 16px; border-radius: 0; }
  .mobile-menu { top: 96px; left: 12px; right: 12px; border-radius: 28px; }
  .logo-word { font-size: 22px; }
  .logo-tagline { display: none; }
  .hero { min-height: 100vh; border-radius: 0; }
  .hero-arrow {
    top: auto;
    bottom: 24px;
    width: 42px;
    height: 42px;
    transform: none;
  }
  .hero-arrow:hover { transform: scale(1.04); }
  .hero-arrow-left { left: 24px; }
  .hero-arrow-right { right: 24px; }
  .hero-dots { bottom: 31px; }
  .hero h1, .page-hero h1 { font-size: 40px; }
  .page-hero, .section-inner, .cta { border-radius: 0; padding-left: 24px; padding-right: 24px; }
  .btn-row { flex-direction: column; align-items: stretch; width: 100%; }
  .btn { width: 100%; }
  .cols-2, .cols-3, .cols-4, .cols-5, .chip-grid, .stat-grid { grid-template-columns: 1fr; }
  .about-hero { min-height: auto; border-radius: 36px; padding: 40px 24px; }
  .about-hero h1 { font-size: 38px; }
  .about-hero-visual { min-height: 300px; }
  .visual-shell { transform: none; }
  .about-welcome-panel,
  .about-mission-panel { padding: 38px 24px; }
  .about-welcome-panel::after { inset: 10px; border-radius: 28px; }
  .about-welcome-panel .section-title { font-size: 38px; }
  .about-welcome-points { align-items: stretch; flex-direction: column; }
  .mission-card { min-height: auto; padding: 32px 24px; }
  .mission-card h3 { font-size: 25px; }
  .form-grid { grid-template-columns: 1fr; }
  .demo-form .btn { width: 100%; }
  .site-footer { border-radius: 0; padding: 32px 24px; }
  .kt-hero { min-height: auto; border-radius: 36px; padding: 40px 24px; }
  .kt-hero h1 { font-size: 38px; }
  .kt-brain-wrap { min-height: 360px; }
  .kt-brain { transform: none; }
  .kt-orbit { display: none; }
  .kt-float-card { position: relative; left: auto; right: auto; top: auto; bottom: auto; min-width: 0; }
  .kt-brain-wrap { align-content: center; flex-wrap: wrap; gap: 12px; }
  .kt-candidate-row { grid-template-columns: 1fr; }
  .kt-analytics-visual { min-height: 620px; border-radius: 28px; }
  .kt-analytics-elegant {
    min-height: auto;
    padding: 18px;
    gap: 14px;
  }
  .kt-score-panel {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .kt-score-ring {
    width: 138px;
    margin: 0 auto;
  }
  .kt-score-panel h3 {
    font-size: 24px;
    text-align: center;
  }
  .kt-score-panel small,
  .kt-score-panel p {
    display: block;
    text-align: center;
  }
  .kt-signal-grid {
    grid-template-columns: 1fr;
  }
  .kt-readiness-panel div {
    flex-direction: column;
  }
  .kt-talent-orb { width: 220px; height: 220px; }
  .kt-talent-score { width: 140px; height: 140px; }
  .kt-talent-score strong { font-size: 44px; }
  .kt-skill-card {
    min-width: 138px;
    padding: 14px;
  }
  .kt-skill-one { top: 26px; left: 18px; }
  .kt-skill-two { top: 112px; right: 16px; }
  .kt-skill-three { left: 18px; bottom: 142px; }
  .kt-hiring-bars {
    right: 16px;
    bottom: 142px;
    width: 150px;
    padding: 14px;
  }
  .kt-pipeline {
    grid-template-columns: repeat(2, minmax(0,1fr));
    left: 16px;
    right: 16px;
    bottom: 18px;
  }
  .kt-ecosystem { padding: 40px 22px; }
  .kt-ecosystem-map,
  .kt-fail-grid,
  .kt-why-grid,
  .kt-library-board,
  .kt-use-grid,
  .kt-testimonial-grid,
  .kt-metric-row,
  .kt-matrix,
  .kt-org-grid { grid-template-columns: 1fr; }
  .kt-library-board { padding: 12px; border-radius: 26px; }
  .kt-insights { gap: 26px; }
  .kt-insight-dashboard { padding: 16px; border-radius: 26px; }
  .kt-benchmark { flex-direction: column; }
  .contact-hero { min-height: auto; border-radius: 36px; padding: 40px 24px; }
  .contact-hero h1 { font-size: 38px; }
  .contact-panel-main strong { font-size: 24px; }
  .contact-panel-row { align-items: flex-start; flex-direction: column; }
  .contact-panel-row b { text-align: left; }
  .map-card { min-height: 340px; border-radius: 28px; }
  .contact-enterprise { border-radius: 36px; padding: 40px 24px; }
  .contact-copy-block h1 { font-size: 38px; }
  .contact-copy-block > p { font-size: 15px; }
  .contact-focus-panel {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 28px;
  }
  .contact-focus-panel span {
    min-height: 50px;
    padding: 12px 14px;
  }
  .contact-response-note {
    padding: 18px;
    border-radius: 20px;
  }
  .contact-row { grid-template-columns: 1fr; gap: 8px; }
  .contact-premium-form { padding: 26px 20px; border-radius: 30px; }
  .contact-form-head { flex-direction: column; }
  .contact-form-head b { text-align: left; font-size: 24px; }
  .contact-location-section .map-card { min-height: 380px; border-radius: 30px; }
  .office-detail-card { padding: 26px 20px; }
  .pricing-hero { min-height: auto; border-radius: 36px; padding: 40px 24px; }
  .pricing-hero h1 { font-size: 38px; }
  .pricing-hero p { font-size: 15px; }
  .products-hero {
    min-height: auto;
    border-radius: 36px;
    padding: 40px 24px;
  }
  .products-hero h1 { font-size: 38px; }
  .products-hero p { font-size: 15px; }
  .products-hero-visual,
  .suite-orbit,
  .suite-console { min-height: auto; }
  .suite-console {
    padding: 16px;
    border-radius: 28px;
  }
  .suite-console-top,
  .suite-console-main,
  .suite-console-links {
    grid-template-columns: 1fr;
  }
  .suite-console-top {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px;
  }
  .suite-console-brand,
  .suite-console-score {
    min-height: auto;
    border-radius: 22px;
  }
  .suite-console-score strong { font-size: 48px; }
  .suite-console-links { gap: 10px; }
  .suite-console-links a { min-height: 68px; }
  .suite-orbit {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px;
    border-radius: 28px;
  }
  .suite-orbit::before,
  .suite-orbit::after { display: none; }
  .suite-core,
  .suite-node,
  .suite-node.n1,
  .suite-node.n2,
  .suite-node.n3,
  .suite-node.n4,
  .suite-node.n5,
  .suite-node.n6,
  .suite-node.n7 {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    min-height: 74px;
    transform: none;
    border-radius: 20px;
  }
  .suite-node:hover,
  .suite-node.n1:hover,
  .suite-node.n4:hover,
  .suite-node.n7:hover { transform: translateY(-3px); }
  .suite-core {
    min-height: 130px;
    border-radius: 24px;
  }
  .products-suite-grid,
  .products-flow-panel,
  .products-match-grid { grid-template-columns: 1fr; }
  .suite-product-card,
  .suite-product-card.primary,
  .suite-product-card:nth-child(2),
  .suite-product-card:nth-child(3),
  .suite-product-card:nth-child(4),
  .suite-product-card:nth-child(5),
  .suite-product-card:nth-child(6),
  .suite-product-card:nth-child(7) {
    grid-column: 1;
  }
  .suite-product-card {
    min-height: auto;
    padding: 26px 22px;
    border-radius: 26px;
  }
  .suite-card-top {
    align-items: flex-start;
  }
  .suite-card-top span {
    max-width: 150px;
  }
  .suite-product-card p {
    min-height: auto;
  }
  .pricing-hero-visual { min-height: 340px; }
  .pricing-glass-board { transform: none; padding: 20px; }
  .pricing-float-card { position: static; margin-top: 14px; }
  .pricing-price-stack,
  .pricing-tabs,
  .pricing-product-grid,
  .pricing-feature-grid,
  .pricing-feature-grid.compact,
  .edu-visual-row { grid-template-columns: 1fr; }
  .pricing-tab { min-height: 52px; }
  .pricing-plan-head h2 { font-size: 32px; }
  .price-card strong,
  .price-card.discount strong,
  .compact-price strong { font-size: 42px; }
  .inner-tab-nav { display: grid; grid-template-columns: 1fr; }
  .pricing-line { min-height: auto; }
  .kc-hero { min-height: auto; border-radius: 36px; padding: 40px 24px; }
  .kc-hero h1 { font-size: 38px; }
  .kc-hero p { font-size: 15px; }
  .kc-card-stage { min-height: 360px; }
  .kc-id-card { transform: none; }
  .kc-hero-chip { position: static; margin: 10px 5px 0; }
  .kc-card-stage { flex-wrap: wrap; gap: 8px; }
  .kc-pulse { width: 220px; height: 220px; }
  .kc-pill-row { grid-template-columns: 1fr; }
.kc-pill-row span { min-height: 96px; font-size: 19px; }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .progress-row { align-items: flex-start; flex-direction: column; }
  .bar { width: 100%; flex: none; }
}

.healthcare-page {
  background:
    radial-gradient(circle at 12% 6%, rgba(14,165,233,.11), transparent 32%),
    radial-gradient(circle at 88% 10%, rgba(34,197,94,.1), transparent 30%),
    #f8fafc;
}
.healthcare-page .reveal { opacity: 1; transform: translateY(0); }
body.js-ready .healthcare-page .reveal { opacity: 0; transform: translateY(24px); }
body.js-ready .healthcare-page .reveal.visible { opacity: 1; transform: translateY(0); }
.health-hero {
  max-width: 1400px;
  margin: 0 auto;
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(0,.95fr) minmax(430px,1.05fr);
  gap: 44px;
  align-items: center;
  padding: 64px;
  border-radius: 48px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,253,250,.9));
  border: 1px solid rgba(226,232,240,.85);
  box-shadow: 0 36px 100px rgba(15,23,42,.08);
  overflow: hidden;
}
.health-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
  padding: 10px 14px;
  border-radius: 999px;
  color: #0369a1;
  background: rgba(224,242,254,.9);
  border: 1px solid rgba(186,230,253,.9);
  font-size: 14px;
  font-weight: 700;
}
.health-label i,
.campus-label i,
.eduind-label i,
.campus-float i,
.campus-highlight i,
.campus-challenge-grid i,
.campus-help-grid i,
.campus-feature-grid i,
.campus-pipeline i,
.health-card i,
.eduind-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
}

.health-label i { font-size: 20px; color: #0284c7; }
.health-hero h1 {
  max-width: 720px;
  margin: 22px 0 18px;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 68px);
  line-height: .95;
  font-weight: 600;
  letter-spacing: 0;
}
.health-hero p {
  max-width: 650px;
  margin: 0 0 30px;
  color: #475569;
  font-size: 18px;
  line-height: 1.75;
}
.health-visual { position: relative; min-height: 520px; display: flex; align-items: center; justify-content: center; }
.health-dashboard {
  width: min(100%, 620px);
  padding: 18px;
  border-radius: 34px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.95);
  box-shadow: 0 34px 90px rgba(15,23,42,.12);
  backdrop-filter: blur(22px);
}
.health-window-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 20px;
  background: #07152f;
  color: white;
}
.health-window-bar i { width: 9px; height: 9px; border-radius: 999px; background: #38bdf8; }
.health-window-bar i:nth-child(2) { background: #22c55e; }
.health-window-bar i:nth-child(3) { background: #facc15; }
.health-window-bar span { margin-left: 8px; font-size: 13px; font-weight: 700; }
.health-window-bar b { margin-left: auto; color: #bae6fd; font-size: 12px; }
.health-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  padding-top: 16px;
}
.health-panel {
  min-height: 126px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(248,250,252,.78);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.health-panel.wide { grid-column: 1 / -1; min-height: 140px; }
.health-panel.wide > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.health-panel span, .health-panel small { color: #64748b; font-size: 13px; line-height: 1.45; }
.health-panel strong { color: #0284c7; font-size: 42px; font-family: var(--font-display); }
.health-panel i { color: #0284c7; font-size: 22px; }
.health-panel b { display: block; margin: 12px 0 5px; color: #07152f; font-family: var(--font-display); font-size: 17px; }
.health-progress { height: 10px; margin: 18px 0 10px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.health-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0284c7, #22c55e); }
.health-panel.chart div, .health-completion div {
  height: 86px;
  display: flex;
  align-items: end;
  gap: 8px;
  margin-top: 14px;
}
.health-panel.chart div i, .health-completion div i {
  width: 100%;
  height: var(--h);
  min-height: 20px;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, #38bdf8, #22c55e);
}
.health-panel.analytics {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #07152f;
}
.health-panel.analytics b { color: white; margin-top: 0; }
.health-panel.analytics span { color: #bfdbfe; }
.health-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 18px 42px rgba(15,23,42,.12);
  color: #07152f;
  font-weight: 700;
}
.health-float i { color: #0284c7; }
.health-float.one { left: 0; top: 90px; }
.health-float.two { right: 0; bottom: 80px; }
.health-section {
  max-width: 1400px;
  margin: 24px auto 0;
  padding: 68px 64px;
  border-radius: 42px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(226,232,240,.85);
  box-shadow: 0 28px 80px rgba(15,23,42,.06);
}
.health-head { max-width: 850px; margin-bottom: 30px; }
.health-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.health-head span {
  color: #0284c7;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.health-head h2 {
  margin: 10px 0 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  font-weight: 600;
}
.health-head p {
  margin: 14px 0 0;
  color: #64748b;
  font-size: 16px;
  line-height: 1.75;
}
.health-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
.cols-3-health { grid-template-columns: repeat(3, minmax(0,1fr)); }
.health-card {
  min-height: 220px;
  padding: 26px;
  border-radius: 26px;
  background: rgba(248,250,252,.72);
  border: 1px solid rgba(226,232,240,.9);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.health-card:hover {
  transform: translateY(-3px);
  background: white;
  border-color: rgba(14,165,233,.32);
  box-shadow: 0 18px 46px rgba(15,23,42,.08);
}
.health-card i {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: #0284c7;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  font-size: 20px;
}
.health-card h3, .health-feature-grid h3 {
  margin: 20px 0 10px;
  color: #07152f;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}
.health-card p {
  margin: 0;
  color: #64748b;
  line-height: 1.65;
}
.health-process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 14px;
}
.health-process::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 42px;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #22c55e);
}
.health-process article {
  position: relative;
  z-index: 1;
  min-height: 170px;
  padding: 22px 16px;
  border-radius: 24px;
  background: rgba(248,250,252,.9);
  border: 1px solid rgba(226,232,240,.9);
  text-align: center;
}
.health-process span {
  width: 42px;
  height: 42px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: white;
  background: #0284c7;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(14,165,233,.22);
}
.health-process h3 {
  margin: 0;
  color: #07152f;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}
.health-showcase {
  padding: 22px;
  border-radius: 34px;
  background: #07152f;
  color: white;
  box-shadow: 0 32px 80px rgba(7,21,47,.18);
}
.health-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.health-kpis article, .health-showcase-main > div {
  padding: 20px;
  border-radius: 24px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.health-kpis b {
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
}
.health-kpis span, .health-showcase-main span, .health-showcase-main small {
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.5;
}
.health-showcase-main {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr .8fr .8fr;
  gap: 14px;
  margin-top: 14px;
}
.health-gap div { height: 10px; margin-top: 13px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.health-gap div i { display: block; height: 100%; border-radius: inherit; background: #38bdf8; }
.health-performance strong {
  display: block;
  margin: 12px 0 5px;
  color: white;
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 600;
}
.health-status b {
  display: block;
  margin: 16px 0 8px;
  color: #86efac;
  font-size: 28px;
  font-family: var(--font-display);
  font-weight: 600;
}
.health-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}
.health-feature-grid article {
  min-height: 170px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(248,250,252,.75);
  border: 1px solid rgba(226,232,240,.9);
}
.health-feature-grid i {
  color: #0284c7;
  font-size: 24px;
}
.health-feature-grid h3 { font-size: 19px; line-height: 1.2; }
.health-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.health-benefits article {
  min-height: 96px;
  display: flex;
  align-items: center;
  padding: 22px 24px;
  border-radius: 22px;
  background: linear-gradient(135deg, #ffffff, #f0f9ff);
  border: 1px solid rgba(186,230,253,.82);
  color: #07152f;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}
.health-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.health-pills span {
  padding: 13px 18px;
  border-radius: 999px;
  color: #075985;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  font-weight: 700;
}
.health-faq { display: grid; gap: 12px; }
.health-faq details {
  padding: 22px 24px;
  border-radius: 22px;
  background: rgba(248,250,252,.78);
  border: 1px solid rgba(226,232,240,.9);
}
.health-faq summary {
  cursor: pointer;
  color: #07152f;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}
.health-faq summary::-webkit-details-marker { display: none; }
.health-faq p { margin: 14px 0 0; color: #64748b; line-height: 1.65; }
.health-cta {
  text-align: center;
  background: #07152f;
  color: white;
}
.health-cta h2 {
  max-width: 780px;
  margin: 0 auto 12px;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.05;
  font-weight: 600;
}
.health-cta p {
  max-width: 720px;
  margin: 0 auto 28px;
  color: #cbd5e1;
  font-size: 17px;
  line-height: 1.7;
}

@media (max-width: 1100px) {
  .health-hero { grid-template-columns: 1fr; padding: 48px 34px; }
  .health-card-grid, .health-feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cols-3-health, .health-benefits { grid-template-columns: 1fr; }
  .health-process { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .health-process::before { display: none; }
  .health-kpis, .health-showcase-main { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 680px) {
  .health-hero, .health-section { border-radius: 34px; padding: 38px 22px; }
  .health-hero h1 { font-size: 40px; }
  .health-hero p { font-size: 15px; }
  .health-visual { min-height: auto; }
  .health-dashboard-grid, .health-card-grid, .health-feature-grid, .health-process, .health-kpis, .health-showcase-main { grid-template-columns: 1fr; }
  .health-panel.wide { grid-column: auto; }
  .health-float { position: static; margin: 10px 5px 0; }
  .health-visual { flex-wrap: wrap; gap: 8px; }
  .health-window-bar span { font-size: 11px; }
  .health-window-bar b { display: none; }
  .health-showcase { padding: 14px; border-radius: 28px; }
}

.manufacturing-page {
  background:
    radial-gradient(circle at 10% 8%, rgba(37,99,235,.08), transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(56,189,248,.09), transparent 32%),
    #F9FAFB;
}
.manufacturing-page .reveal { opacity: 1; transform: translateY(0); }
body.js-ready .manufacturing-page .reveal { opacity: 0; transform: translateY(24px); }
body.js-ready .manufacturing-page .reveal.visible { opacity: 1; transform: translateY(0); }
.mfg-hero {
  max-width: 1400px;
  margin: 0 auto;
  min-height: 660px;
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(460px,1.08fr);
  gap: 44px;
  align-items: center;
  padding: 64px;
  border-radius: 48px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
  border: 1px solid rgba(226,232,240,.6);
  box-shadow: 0 36px 100px rgba(15,23,42,.08);
  overflow: hidden;
}
.mfg-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  color: #2563EB;
  background: rgba(248,250,252,.92);
  border: 1px solid rgba(226,232,240,.6);
  font-size: 14px;
  font-weight: 700;
}
.mfg-label i { font-size: 20px; color: #2563EB; }
.mfg-hero h1 {
  max-width: 720px;
  margin: 22px 0 18px;
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: clamp(46px, 5vw, 65px);
  line-height: .95;
  font-weight: 600;
  letter-spacing: 0;
}
.mfg-hero p {
  max-width: 660px;
  margin: 0 0 30px;
  color: #64748B;
  font-size: 18px;
  line-height: 1.75;
}
.mfg-visual { position: relative; min-height: 540px; display: flex; align-items: center; justify-content: center; }
.mfg-dashboard {
  width: min(100%, 650px);
  padding: 18px;
  border-radius: 34px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(226,232,240,.6);
  box-shadow: 0 34px 90px rgba(15,23,42,.12);
  backdrop-filter: blur(22px);
}
.mfg-window-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 20px;
  background: #07152F;
  color: white;
}
.mfg-window-bar i { width: 9px; height: 9px; border-radius: 999px; background: #2563EB; }
.mfg-window-bar i:nth-child(2) { background: #38BDF8; }
.mfg-window-bar i:nth-child(3) { background: #10B981; }
.mfg-window-bar span { margin-left: 8px; font-size: 13px; font-weight: 700; }
.mfg-window-bar b { margin-left: auto; color: #EAECF3; font-size: 12px; }
.mfg-dash-top {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 14px;
  padding-top: 16px;
}
.mfg-readiness, .mfg-status, .mfg-chart, .mfg-matrix > div {
  border-radius: 24px;
  background: rgba(248,250,252,.82);
  border: 1px solid rgba(226,232,240,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.mfg-readiness { min-height: 145px; padding: 20px; }
.mfg-readiness span, .mfg-status span, .mfg-chart span, .mfg-matrix span {
  display: block;
  color: #64748B;
  font-size: 13px;
  line-height: 1.45;
}
.mfg-readiness strong {
  display: block;
  margin: 8px 0 18px;
  color: #2563EB;
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 600;
}
.mfg-readiness div { height: 10px; border-radius: 999px; background: #EAECF3; overflow: hidden; }
.mfg-readiness div i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563EB, #38BDF8); }
.mfg-status {
  min-height: 145px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}
.mfg-status i { color: #2563EB; font-size: 24px; }
.mfg-status b, .mfg-matrix b {
  display: block;
  margin: 12px 0 6px;
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}
.mfg-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  margin-top: 14px;
}
.mfg-matrix > div { min-height: 112px; padding: 16px; }
.mfg-matrix i, .mfg-skill-table i {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 8px 6px 0 0;
  border-radius: 6px;
  background: #EAECF3;
}
.mfg-matrix i.ok, .mfg-skill-table i.ok { background: #10B981; }
.mfg-matrix i.warn, .mfg-skill-table i.warn { background: #38BDF8; }
.mfg-chart { margin-top: 14px; padding: 18px; }
.mfg-chart div, .mfg-training div {
  height: 100px;
  display: flex;
  align-items: end;
  gap: 9px;
  margin-top: 14px;
}
.mfg-chart div i, .mfg-training div i {
  width: 100%;
  height: var(--h);
  min-height: 20px;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, #38BDF8, #2563EB);
}
.mfg-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,240,.6);
  box-shadow: 0 18px 42px rgba(15,23,42,.12);
  color: #0A1B33;
  font-weight: 700;
}
.mfg-float i { color: #2563EB; }
.mfg-float.one { left: 0; top: 110px; }
.mfg-float.two { right: 0; bottom: 88px; }
.mfg-section {
  max-width: 1400px;
  margin: 24px auto 0;
  padding: 68px 64px;
  border-radius: 42px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(226,232,240,.6);
  box-shadow: 0 28px 80px rgba(15,23,42,.06);
}
.mfg-head { max-width: 880px; margin-bottom: 30px; }
.mfg-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.mfg-head span {
  color: #2563EB;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.mfg-head h2 {
  margin: 10px 0 0;
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  font-weight: 600;
}
.mfg-head p {
  margin: 14px 0 0;
  color: #64748B;
  font-size: 16px;
  line-height: 1.75;
}
.mfg-grid {
  display: grid;
  gap: 18px;
}
.mfg-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.mfg-card {
  min-height: 220px;
  padding: 26px;
  border-radius: 26px;
  background: rgba(248,250,252,.74);
  border: 1px solid rgba(226,232,240,.6);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.mfg-card:hover {
  transform: translateY(-3px);
  background: white;
  border-color: rgba(37,99,235,.28);
  box-shadow: 0 18px 46px rgba(15,23,42,.08);
}
.mfg-card i {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: #2563EB;
  background: #F8FAFC;
  border: 1px solid rgba(226,232,240,.6);
  font-size: 20px;
}
.mfg-card h3, .mfg-feature-grid h3 {
  margin: 20px 0 10px;
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}
.mfg-card p {
  margin: 0;
  color: #64748B;
  line-height: 1.65;
}
.mfg-journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 14px;
}
.mfg-journey::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 46px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563EB, #38BDF8);
}
.mfg-journey article {
  position: relative;
  z-index: 1;
  min-height: 174px;
  padding: 22px 16px;
  border-radius: 24px;
  background: rgba(248,250,252,.92);
  border: 1px solid rgba(226,232,240,.6);
  text-align: center;
}
.mfg-journey span {
  width: 48px;
  height: 48px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: white;
  background: #07152F;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(15,23,42,.22);
}
.mfg-journey h3 {
  margin: 0;
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}
.mfg-intel {
  background: linear-gradient(135deg, #07152F, #0A152D);
  color: white;
}
.mfg-intel .mfg-head h2 { color: white; }
.mfg-intel .mfg-head p { color: #EAECF3; }
.mfg-intel-shell {
  padding: 22px;
  border-radius: 34px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.mfg-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.mfg-kpis article, .mfg-intel-grid > div {
  padding: 20px;
  border-radius: 24px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.mfg-kpis b {
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
}
.mfg-kpis span, .mfg-intel-grid span, .mfg-intel-grid small, .mfg-overview p {
  color: #EAECF3;
  font-size: 13px;
  line-height: 1.5;
}
.mfg-intel-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr 1fr .8fr;
  gap: 14px;
  margin-top: 14px;
}
.mfg-skill-table { grid-row: span 2; }
.mfg-skill-table div {
  display: grid;
  grid-template-columns: 82px repeat(4, 22px);
  align-items: center;
  gap: 9px;
  margin-top: 16px;
}
.mfg-skill-table b { color: white; font-size: 13px; }
.mfg-cert strong, .mfg-index strong {
  display: block;
  margin: 12px 0 5px;
  color: white;
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 600;
}
.mfg-overview b {
  display: block;
  margin: 16px 0 8px;
  color: #38BDF8;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
}
.mfg-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}
.mfg-feature-grid article {
  min-height: 132px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(248,250,252,.75);
  border: 1px solid rgba(226,232,240,.6);
}
.mfg-feature-grid i {
  color: #2563EB;
  font-size: 24px;
}
.mfg-feature-grid h3 { font-size: 19px; line-height: 1.2; }
.mfg-benefits, .mfg-use-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.mfg-benefits article, .mfg-use-grid article {
  min-height: 104px;
  display: flex;
  align-items: center;
  padding: 22px 24px;
  border-radius: 22px;
  background: linear-gradient(135deg, #FFFFFF, #F8FAFC);
  border: 1px solid rgba(226,232,240,.6);
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}
.mfg-use-grid article {
  background: rgba(248,250,252,.78);
  border-color: rgba(226,232,240,.6);
  font-size: 18px;
}
.mfg-faq { display: grid; gap: 12px; }
.mfg-faq details {
  padding: 22px 24px;
  border-radius: 22px;
  background: rgba(248,250,252,.78);
  border: 1px solid rgba(226,232,240,.6);
}
.mfg-faq summary {
  cursor: pointer;
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}
.mfg-faq summary::-webkit-details-marker { display: none; }
.mfg-faq p { margin: 14px 0 0; color: #64748b; line-height: 1.65; }
.mfg-cta {
  text-align: center;
  background: #07152F;
  color: white;
}
.mfg-cta h2 {
  max-width: 780px;
  margin: 0 auto 12px;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  font-weight: 600;
}
.mfg-cta p {
  max-width: 720px;
  margin: 0 auto 28px;
  color: #EAECF3;
  font-size: 17px;
  line-height: 1.7;
}

@media (max-width: 1180px) {
  .mfg-hero { grid-template-columns: 1fr; padding: 48px 34px; }
  .mfg-grid.four, .mfg-feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mfg-journey { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .mfg-journey::before { display: none; }
  .mfg-kpis, .mfg-intel-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mfg-skill-table { grid-row: auto; }
  .mfg-benefits, .mfg-use-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 680px) {
  .mfg-hero, .mfg-section { border-radius: 34px; padding: 38px 22px; }
  .mfg-hero h1 { font-size: 40px; }
  .mfg-hero p { font-size: 15px; }
  .mfg-visual { min-height: auto; flex-wrap: wrap; gap: 8px; }
  .mfg-dash-top, .mfg-matrix, .mfg-grid.four, .mfg-feature-grid, .mfg-journey, .mfg-kpis, .mfg-intel-grid, .mfg-benefits, .mfg-use-grid { grid-template-columns: 1fr; }
  .mfg-float { position: static; margin: 10px 5px 0; }
  .mfg-window-bar span { font-size: 11px; }
  .mfg-window-bar b { display: none; }
  .mfg-intel-shell { padding: 14px; border-radius: 28px; }
  .mfg-skill-table div { grid-template-columns: 76px repeat(4, 20px); }
}

.education-industry-page {
  background:
    radial-gradient(circle at 10% 8%, rgba(37,99,235,.08), transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(56,189,248,.09), transparent 32%),
    #F9FAFB;
}
.education-industry-page .reveal { opacity: 1; transform: translateY(0); }
body.js-ready .education-industry-page .reveal { opacity: 0; transform: translateY(24px); }
body.js-ready .education-industry-page .reveal.visible { opacity: 1; transform: translateY(0); }
.eduind-hero {
  max-width: 1400px;
  margin: 0 auto;
  min-height: 660px;
  display: grid;
  grid-template-columns: minmax(0,.95fr) minmax(450px,1.05fr);
  gap: 44px;
  align-items: center;
  padding: 64px;
  border-radius: 48px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
  border: 1px solid rgba(226,232,240,.6);
  box-shadow: 0 36px 100px rgba(15,23,42,.08);
  overflow: hidden;
}
.eduind-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
  padding: 10px 14px;
  border-radius: 999px;
  color: #2563EB;
  background: rgba(248,250,252,.92);
  border: 1px solid rgba(226,232,240,.6);
  font-size: 14px;
  font-weight: 700;
}
.eduind-label i { font-size: 20px; color: #2563EB; }
.eduind-hero h1 {
  max-width: 720px;
  margin: 22px 0 18px;
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 68px);
  line-height: .95;
  font-weight: 600;
  letter-spacing: 0;
}
.eduind-hero p {
  max-width: 660px;
  margin: 0 0 30px;
  color: #64748B;
  font-size: 18px;
  line-height: 1.75;
}
.eduind-visual { position: relative; min-height: 540px; display: flex; align-items: center; justify-content: center; }
.eduind-dashboard {
  width: min(100%, 650px);
  padding: 18px;
  border-radius: 34px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(226,232,240,.6);
  box-shadow: 0 34px 90px rgba(15,23,42,.12);
  backdrop-filter: blur(22px);
}
.eduind-window-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 20px;
  background: #07152F;
  color: white;
}
.eduind-window-bar i { width: 9px; height: 9px; border-radius: 999px; background: #2563EB; }
.eduind-window-bar i:nth-child(2) { background: #38BDF8; }
.eduind-window-bar i:nth-child(3) { background: #10B981; }
.eduind-window-bar span { margin-left: 8px; font-size: 13px; font-weight: 700; }
.eduind-window-bar b { margin-left: auto; color: #EAECF3; font-size: 12px; }
.eduind-dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  padding-top: 16px;
}
.eduind-panel {
  min-height: 126px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(248,250,252,.82);
  border: 1px solid rgba(226,232,240,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.eduind-panel.wide { grid-column: 1 / -1; min-height: 146px; }
.eduind-panel span, .eduind-panel small {
  display: block;
  color: #64748B;
  font-size: 13px;
  line-height: 1.45;
}
.eduind-panel strong {
  display: block;
  margin: 8px 0 16px;
  color: #2563EB;
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: 600;
}
.eduind-panel.wide div { height: 10px; margin-bottom: 10px; border-radius: 999px; background: #EAECF3; overflow: hidden; }
.eduind-panel.wide div i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563EB, #38BDF8); }
.eduind-panel i { color: #2563EB; font-size: 24px; }
.eduind-panel b {
  display: block;
  margin: 12px 0 6px;
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}
.eduind-panel.chart div, .eduind-activity div {
  height: 94px;
  display: flex;
  align-items: end;
  gap: 9px;
  margin-top: 14px;
}
.eduind-panel.chart div i, .eduind-activity div i {
  width: 100%;
  height: var(--h);
  min-height: 20px;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, #38BDF8, #2563EB);
}
.eduind-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,240,.6);
  box-shadow: 0 18px 42px rgba(15,23,42,.12);
  color: #0A1B33;
  font-weight: 700;
}
.eduind-float i { color: #2563EB; }
.eduind-float.one { left: 0; top: 110px; }
.eduind-float.two { right: 0; bottom: 88px; }
.eduind-section {
  max-width: 1400px;
  margin: 24px auto 0;
  padding: 68px 64px;
  border-radius: 42px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(226,232,240,.6);
  box-shadow: 0 28px 80px rgba(15,23,42,.06);
}
.eduind-head { max-width: 900px; margin-bottom: 30px; }
.eduind-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eduind-head span {
  color: #2563EB;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.eduind-head h2 {
  margin: 10px 0 0;
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  font-weight: 600;
}
.eduind-head p {
  margin: 14px 0 0;
  color: #64748B;
  font-size: 16px;
  line-height: 1.75;
}
.eduind-grid {
  display: grid;
  gap: 18px;
}
.eduind-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.eduind-card {
  min-height: 220px;
  padding: 26px;
  border-radius: 26px;
  background: rgba(248,250,252,.74);
  border: 1px solid rgba(226,232,240,.6);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.eduind-card:hover {
  transform: translateY(-3px);
  background: white;
  border-color: rgba(37,99,235,.28);
  box-shadow: 0 18px 46px rgba(15,23,42,.08);
}
.eduind-card i {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: #2563EB;
  background: #F8FAFC;
  border: 1px solid rgba(226,232,240,.6);
  font-size: 20px;
}
.eduind-card h3, .eduind-feature-grid h3 {
  margin: 20px 0 10px;
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}
.eduind-card p {
  margin: 0;
  color: #64748B;
  line-height: 1.65;
}
.eduind-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 14px;
}
.eduind-flow::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 46px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563EB, #38BDF8);
}
.eduind-flow article {
  position: relative;
  z-index: 1;
  min-height: 174px;
  padding: 22px 16px;
  border-radius: 24px;
  background: rgba(248,250,252,.92);
  border: 1px solid rgba(226,232,240,.6);
  text-align: center;
}
.eduind-flow span {
  width: 48px;
  height: 48px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: white;
  background: #07152F;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(15,23,42,.22);
}
.eduind-flow h3 {
  margin: 0;
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}
.eduind-showcase {
  background: linear-gradient(135deg, #07152F, #0A152D);
  color: white;
}
.eduind-showcase .eduind-head h2 { color: white; }
.eduind-show-shell {
  padding: 22px;
  border-radius: 34px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.eduind-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.eduind-kpis article, .eduind-insights > div {
  padding: 20px;
  border-radius: 24px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.eduind-kpis b {
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
}
.eduind-kpis span, .eduind-insights span, .eduind-insights small, .eduind-institution p {
  color: #EAECF3;
  font-size: 13px;
  line-height: 1.5;
}
.eduind-insights {
  display: grid;
  grid-template-columns: 1.1fr .8fr 1fr .8fr;
  gap: 14px;
  margin-top: 14px;
}
.eduind-gap div { height: 10px; margin-top: 13px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.eduind-gap div i { display: block; height: 100%; border-radius: inherit; background: #38BDF8; }
.eduind-reports strong {
  display: block;
  margin: 12px 0 5px;
  color: white;
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 600;
}
.eduind-proctor b {
  display: block;
  margin: 16px 0 8px;
  color: #38BDF8;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
}
.eduind-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}
.eduind-feature-grid article {
  min-height: 170px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(248,250,252,.75);
  border: 1px solid rgba(226,232,240,.6);
}
.eduind-feature-grid i {
  color: #2563EB;
  font-size: 24px;
}
.eduind-feature-grid h3 { font-size: 19px; line-height: 1.2; }
.eduind-benefits, .eduind-use-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.eduind-benefits article, .eduind-use-grid article {
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-radius: 22px;
  background: linear-gradient(135deg, #FFFFFF, #F8FAFC);
  border: 1px solid rgba(226,232,240,.6);
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}
.eduind-benefits article i, .eduind-use-grid article i {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: #2563EB;
  background: #FFFFFF;
  border: 1px solid rgba(226,232,240,.72);
  box-shadow: 0 12px 28px rgba(15,23,42,.06);
  font-size: 18px;
}
.eduind-benefits article span, .eduind-use-grid article span {
  min-width: 0;
  line-height: 1.25;
}
.eduind-use-grid article {
  background: rgba(248,250,252,.78);
  font-size: 18px;
}
.eduind-faq { display: grid; gap: 12px; }
.eduind-faq details {
  padding: 22px 24px;
  border-radius: 22px;
  background: rgba(248,250,252,.78);
  border: 1px solid rgba(226,232,240,.6);
}
.eduind-faq summary {
  cursor: pointer;
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}
.eduind-faq summary::-webkit-details-marker { display: none; }
.eduind-faq p { margin: 14px 0 0; color: #64748B; line-height: 1.65; }
.eduind-cta {
  text-align: center;
  background: #07152F;
  color: white;
}
.eduind-cta h2 {
  max-width: 780px;
  margin: 0 auto 12px;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  font-weight: 600;
}
.eduind-cta p {
  max-width: 720px;
  margin: 0 auto 28px;
  color: #EAECF3;
  font-size: 17px;
  line-height: 1.7;
}

@media (max-width: 1180px) {
  .eduind-hero { grid-template-columns: 1fr; padding: 48px 34px; }
  .eduind-grid.four, .eduind-feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .eduind-flow { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .eduind-flow::before { display: none; }
  .eduind-kpis, .eduind-insights { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .eduind-benefits, .eduind-use-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 680px) {
  .eduind-hero, .eduind-section { border-radius: 34px; padding: 38px 22px; }
  .eduind-hero h1 { font-size: 40px; }
  .eduind-hero p { font-size: 15px; }
  .eduind-visual { min-height: auto; flex-wrap: wrap; gap: 8px; }
  .eduind-dash-grid, .eduind-grid.four, .eduind-feature-grid, .eduind-flow, .eduind-kpis, .eduind-insights, .eduind-benefits, .eduind-use-grid { grid-template-columns: 1fr; }
  .eduind-panel.wide { grid-column: auto; }
  .eduind-float { position: static; margin: 10px 5px 0; }
  .eduind-window-bar span { font-size: 11px; }
  .eduind-window-bar b { display: none; }
  .eduind-show-shell { padding: 14px; border-radius: 28px; }
}

.tech-industry-page {
  background: radial-gradient(circle at 10% 8%, rgba(37,99,235,.08), transparent 30%), radial-gradient(circle at 92% 12%, rgba(56,189,248,.09), transparent 32%), #F9FAFB;
}
.tech-industry-page .reveal { opacity: 1; transform: translateY(0); }
body.js-ready .tech-industry-page .reveal { opacity: 0; transform: translateY(24px); }
body.js-ready .tech-industry-page .reveal.visible { opacity: 1; transform: translateY(0); }
.techind-hero {
  max-width: 1400px;
  margin: 0 auto;
  min-height: 660px;
  display: grid;
  grid-template-columns: minmax(0,.95fr) minmax(450px,1.05fr);
  gap: 44px;
  align-items: center;
  padding: 64px;
  border-radius: 48px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
  border: 1px solid rgba(226,232,240,.6);
  box-shadow: 0 36px 100px rgba(15,23,42,.08);
  overflow: hidden;
}
.techind-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  color: #2563EB;
  background: rgba(248,250,252,.92);
  border: 1px solid rgba(226,232,240,.6);
  font-size: 14px;
  font-weight: 700;
}
.techind-label i { font-size: 20px; color: #2563EB; }
.techind-hero h1 {
  max-width: 720px;
  margin: 22px 0 18px;
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 68px);
  line-height: .95;
  font-weight: 600;
  letter-spacing: 0;
}
.techind-hero p {
  max-width: 660px;
  margin: 0 0 30px;
  color: #64748B;
  font-size: 18px;
  line-height: 1.75;
}
.techind-visual { position: relative; min-height: 540px; display: flex; align-items: center; justify-content: center; }
.techind-dashboard {
  width: min(100%, 650px);
  padding: 18px;
  border-radius: 34px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(226,232,240,.6);
  box-shadow: 0 34px 90px rgba(15,23,42,.12);
  backdrop-filter: blur(22px);
}
.techind-window-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 20px;
  background: #07152F;
  color: white;
}
.techind-window-bar i { width: 9px; height: 9px; border-radius: 999px; background: #2563EB; }
.techind-window-bar i:nth-child(2) { background: #38BDF8; }
.techind-window-bar i:nth-child(3) { background: #10B981; }
.techind-window-bar span { margin-left: 8px; font-size: 13px; font-weight: 700; }
.techind-window-bar b { margin-left: auto; color: #EAECF3; font-size: 12px; }
.techind-dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  padding-top: 16px;
}
.techind-panel {
  min-height: 126px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(248,250,252,.82);
  border: 1px solid rgba(226,232,240,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.techind-panel.wide { grid-column: 1 / -1; min-height: 146px; }
.techind-panel span, .techind-panel small {
  display: block;
  color: #64748B;
  font-size: 13px;
  line-height: 1.45;
}
.techind-panel strong {
  display: block;
  margin: 8px 0 16px;
  color: #2563EB;
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: 600;
}
.techind-panel.wide div { height: 10px; margin-bottom: 10px; border-radius: 999px; background: #EAECF3; overflow: hidden; }
.techind-panel.wide div i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563EB, #38BDF8); }
.techind-panel i { color: #2563EB; font-size: 24px; }
.techind-panel b {
  display: block;
  margin: 12px 0 6px;
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}
.techind-panel.chart div, .techind-solving div {
  height: 94px;
  display: flex;
  align-items: end;
  gap: 9px;
  margin-top: 14px;
}
.techind-panel.chart div i, .techind-solving div i {
  width: 100%;
  height: var(--h);
  min-height: 20px;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, #38BDF8, #2563EB);
}
.techind-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,240,.6);
  box-shadow: 0 18px 42px rgba(15,23,42,.12);
  color: #0A1B33;
  font-weight: 700;
}
.techind-float i { color: #2563EB; }
.techind-float.one { left: 0; top: 110px; }
.techind-float.two { right: 0; bottom: 88px; }
.techind-section {
  max-width: 1400px;
  margin: 24px auto 0;
  padding: 68px 64px;
  border-radius: 42px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(226,232,240,.6);
  box-shadow: 0 28px 80px rgba(15,23,42,.06);
}
.techind-head { max-width: 900px; margin-bottom: 30px; }
.techind-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.techind-head span {
  color: #2563EB;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.techind-head h2 {
  margin: 10px 0 0;
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  font-weight: 600;
}
.techind-head p {
  margin: 14px 0 0;
  color: #64748B;
  font-size: 16px;
  line-height: 1.75;
}
.techind-grid { display: grid; gap: 18px; }
.techind-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.techind-card {
  min-height: 220px;
  padding: 26px;
  border-radius: 26px;
  background: rgba(248,250,252,.74);
  border: 1px solid rgba(226,232,240,.6);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.techind-card:hover {
  transform: translateY(-3px);
  background: white;
  border-color: rgba(37,99,235,.28);
  box-shadow: 0 18px 46px rgba(15,23,42,.08);
}
.techind-card i {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: #2563EB;
  background: #F8FAFC;
  border: 1px solid rgba(226,232,240,.6);
  font-size: 20px;
}
.techind-card h3, .techind-feature-grid h3 {
  margin: 20px 0 10px;
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}
.techind-card p { margin: 0; color: #64748B; line-height: 1.65; }
.techind-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 14px;
}
.techind-flow::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 46px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563EB, #38BDF8);
}
.techind-flow article {
  position: relative;
  z-index: 1;
  min-height: 174px;
  padding: 22px 16px;
  border-radius: 24px;
  background: rgba(248,250,252,.92);
  border: 1px solid rgba(226,232,240,.6);
  text-align: center;
}
.techind-flow span {
  width: 48px;
  height: 48px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: white;
  background: #07152F;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(15,23,42,.22);
}
.techind-flow h3 {
  margin: 0;
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}
.techind-showcase { background: linear-gradient(135deg, #07152F, #0A152D); color: white; }
.techind-showcase .techind-head h2 { color: white; }
.techind-show-shell {
  padding: 22px;
  border-radius: 34px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.techind-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.techind-kpis article, .techind-insights > div {
  padding: 20px;
  border-radius: 24px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.techind-kpis b {
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
}
.techind-kpis span, .techind-insights span, .techind-insights small, .techind-gap p {
  color: #EAECF3;
  font-size: 13px;
  line-height: 1.5;
}
.techind-insights {
  display: grid;
  grid-template-columns: 1.1fr .8fr 1fr .8fr;
  gap: 14px;
  margin-top: 14px;
}
.techind-lang div { height: 10px; margin-top: 13px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.techind-lang div i { display: block; height: 100%; border-radius: inherit; background: #38BDF8; }
.techind-accuracy strong {
  display: block;
  margin: 12px 0 5px;
  color: white;
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 600;
}
.techind-ranking b {
  display: block;
  margin: 16px 0 8px;
  color: #38BDF8;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
}
.techind-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}
.techind-feature-grid article {
  min-height: 140px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(248,250,252,.75);
  border: 1px solid rgba(226,232,240,.6);
}
.techind-feature-grid i { color: #2563EB; font-size: 24px; }
.techind-feature-grid h3 { font-size: 19px; line-height: 1.2; }
.techind-benefits, .techind-use-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.techind-benefits article, .techind-use-grid article {
  min-height: 104px;
  display: flex;
  align-items: center;
  padding: 22px 24px;
  border-radius: 22px;
  background: linear-gradient(135deg, #FFFFFF, #F8FAFC);
  border: 1px solid rgba(226,232,240,.6);
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}
.techind-use-grid article { background: rgba(248,250,252,.78); font-size: 18px; }
.techind-faq { display: grid; gap: 12px; }
.techind-faq details {
  padding: 22px 24px;
  border-radius: 22px;
  background: rgba(248,250,252,.78);
  border: 1px solid rgba(226,232,240,.6);
}
.techind-faq summary {
  cursor: pointer;
  color: #0A1B33;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}
.techind-faq summary::-webkit-details-marker { display: none; }
.techind-faq p { margin: 14px 0 0; color: #64748B; line-height: 1.65; }
.techind-cta { text-align: center; background: #07152F; color: white; }
.techind-cta h2 {
  max-width: 780px;
  margin: 0 auto 12px;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  font-weight: 600;
}
.techind-cta p {
  max-width: 720px;
  margin: 0 auto 28px;
  color: #EAECF3;
  font-size: 17px;
  line-height: 1.7;
}

@media (max-width: 1180px) {
  .techind-hero { grid-template-columns: 1fr; padding: 48px 34px; }
  .techind-grid.four, .techind-feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .techind-flow { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .techind-flow::before { display: none; }
  .techind-kpis, .techind-insights { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .techind-benefits, .techind-use-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 680px) {
  .techind-hero, .techind-section { border-radius: 34px; padding: 38px 22px; }
  .techind-hero h1 { font-size: 40px; }
  .techind-hero p { font-size: 15px; }
  .techind-visual { min-height: auto; flex-wrap: wrap; gap: 8px; }
  .techind-dash-grid, .techind-grid.four, .techind-feature-grid, .techind-flow, .techind-kpis, .techind-insights, .techind-benefits, .techind-use-grid { grid-template-columns: 1fr; }
  .techind-panel.wide { grid-column: auto; }
  .techind-float { position: static; margin: 10px 5px 0; }
  .techind-window-bar span { font-size: 11px; }
  .techind-window-bar b { display: none; }
  .techind-show-shell { padding: 14px; border-radius: 28px; }
}

@media (max-width: 1180px) {
  .desktop-nav,
  .header-cta {
    display: none;
  }

  .mobile-toggle {
    display: inline-flex;
  }
}
@media (min-width: 1181px) {
  .desktop-nav {
    display: flex;
  }

  .header-cta {
    display: inline-flex;
  }

  .mobile-toggle {
    display: none;
  }
}

@media (max-width: 1080px) {
  .ks-programs-layout { grid-template-columns: 1fr; }
  .ks-program-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ks-programs-head { display: grid; }
  .ks-program-cards {
    grid-template-columns: 1fr;
    border-radius: 26px;
  }
  .ks-program-card {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(191,219,254,.58);
  }
  .ks-program-card.enterprise { border-bottom: 0; }
  .ks-program-card.advanced,
  .ks-program-card.advanced:hover { transform: none; }
  .ks-program-benefits { grid-template-columns: 1fr; }
}

/* Site-wide full-bleed page shells */
.top-pad,
.outer-pad {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.top-pad > .hero,
.top-pad > .page-hero,
.top-pad > section[class*="-hero"],
.outer-pad > .page-hero,
.outer-pad > .section-wrap,
.outer-pad > section[class*="-section"],
.outer-pad > section[class*="-hero"] {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}

.outer-pad > .section-wrap > .section-inner,
.outer-pad > .section-wrap > .cta {
  width: 100% !important;
  max-width: 100% !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}

/* 3D live preview capability sections */
.capability-3d-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 22%, rgba(37,99,235,.24), transparent 34%),
    radial-gradient(circle at 12% 88%, rgba(56,189,248,.10), transparent 30%),
    #07152f;
  color: white;
}

.capability-light .capability-3d-section {
  background:
    radial-gradient(circle at 78% 22%, rgba(37,99,235,.11), transparent 32%),
    radial-gradient(circle at 12% 88%, rgba(20,184,166,.08), transparent 30%),
    linear-gradient(135deg, #ffffff, #f8fafc);
  color: var(--ink);
}

.capability-3d-section::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  filter: none;
  pointer-events: none;
}

.capability-3d-layout {
  position: relative;
  z-index: 1;
  perspective: 1200px;
  gap: 86px;
  align-items: center;
}

.capability-3d-section .eyebrow {
  color: #60a5fa;
}

.capability-3d-section .section-title {
  max-width: 720px;
  color: white;
  font-size: clamp(40px, 3.1vw, 68px);
  line-height: 1.04;
}

.capability-light .capability-3d-section .section-title {
  color: var(--ink);
}

.capability-3d-section .lead,
.capability-3d-section .list li {
  color: #b6c6db;
}

.capability-light .capability-3d-section .lead {
  color: #52657f;
}

.capability-example {
  max-width: 680px;
  margin: 22px 0 0;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(96,165,250,.22);
  color: #dbeafe;
  font-size: 14px;
  line-height: 1.6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.capability-light .capability-example {
  background: rgba(239,246,255,.92);
  border-color: rgba(191,219,254,.85);
  color: #334155;
  box-shadow: 0 16px 40px rgba(15,23,42,.06);
}

.capability-example b {
  color: #60a5fa;
}

.capability-3d-section .list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.capability-3d-section .list li {
  min-height: 86px;
  padding: 18px 20px;
  border-radius: 22px;
  background: white;
  border: 1px solid rgba(191,219,254,.28);
  color: #10213f;
  box-shadow: 0 24px 60px rgba(2,6,23,.16);
}

.capability-3d-section .check {
  background: #eff6ff;
  color: #2563eb;
}

.capability-3d-layout > div:last-child {
  position: relative;
  min-height: 380px;
  padding: 34px;
  border-radius: 38px;
  background: linear-gradient(145deg, rgba(15,38,78,.96), rgba(10,28,59,.96));
  border: 1px solid rgba(148,163,184,.24);
  box-shadow:
    0 34px 90px rgba(2,6,23,.36),
    inset 0 1px 0 rgba(255,255,255,.08);
  transform: rotateY(-8deg) rotateX(4deg) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .35s ease, filter .35s ease;
  filter: drop-shadow(0 34px 55px rgba(2,6,23,.30));
}

.capability-light .capability-3d-layout > div:last-child {
  background: rgba(255,255,255,.92);
  border-color: rgba(226,232,240,.92);
  box-shadow:
    0 34px 90px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
  filter: drop-shadow(0 34px 55px rgba(15,23,42,.14));
}

.capability-3d-section:hover .capability-3d-layout > div:last-child {
  transform: rotateY(-3deg) rotateX(1deg) translateY(-5px);
}

.capability-3d-layout > div:last-child::before {

  position: absolute;
  top: 22px;
  right: 28px;
  z-index: 4;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(16,185,129,.12);
  color: #009136;
  border: 1px solid rgba(94,234,212,.24);
  box-shadow: 0 14px 30px rgba(2,6,23,.18);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.capability-3d-layout > div:last-child::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 3;
  pointer-events: none;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.05);
  background: linear-gradient(120deg, rgba(255,255,255,.06), transparent 38%, rgba(255,255,255,.03));
  transform: translateZ(40px);
}

.capability-3d-section .mock,
.capability-3d-section .product-card,
.capability-3d-section .card {
  box-shadow: 0 24px 60px rgba(2,6,23,.18);
}

.capability-3d-section .mock {
  background: rgba(255,255,255,.04);
  border-color: rgba(148,163,184,.18);
  color: white;
  box-shadow: none;
}

.capability-light .capability-3d-section .mock {
  background: rgba(248,250,252,.86);
  border-color: rgba(226,232,240,.9);
  color: var(--ink);
}

.capability-3d-section .mock .eyebrow,
.capability-3d-section .mock > .eyebrow {
  color: #94a3b8;
}

.capability-3d-section .mock.white,
.capability-3d-section .stat,
.capability-3d-section .card:not(.product-card) {
  background: rgba(255,255,255,.07);
  border-color: rgba(148,163,184,.18);
  color: white;
}

.capability-light .capability-3d-section .mock.white,
.capability-light .capability-3d-section .stat,
.capability-light .capability-3d-section .card:not(.product-card) {
  background: white;
  border-color: rgba(226,232,240,.9);
  color: var(--ink);
}

.capability-3d-section .product-card:nth-child(2),
.capability-3d-section .mock.white,
.capability-3d-section .stat:nth-child(even) {
  transform: translateZ(24px);
}

.capability-3d-section .product-card {
  min-height: 185px;
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(191,219,254,.32) !important;
}

.capability-3d-section .product-card h3,
.capability-3d-section .card:not(.product-card) h3,
.capability-3d-section .mock b,
.capability-3d-section .stat b {
  color: white;
}

.capability-light .capability-3d-section .card:not(.product-card) h3,
.capability-light .capability-3d-section .mock b,
.capability-light .capability-3d-section .stat b {
  color: var(--ink);
}

.capability-3d-section .product-card h3 {
  color: #07152f;
}

.capability-3d-section .product-card p {
  color: #52657f;
}

.capability-3d-section .card:not(.product-card) p,
.capability-3d-section .mock p,
.capability-3d-section .stat span,
.capability-3d-section .stat small,
.capability-3d-section .progress-row span,
.capability-3d-section .progress-row small {
  color: #b6c6db;
}

.capability-light .capability-3d-section .card:not(.product-card) p,
.capability-light .capability-3d-section .mock p,
.capability-light .capability-3d-section .stat span,
.capability-light .capability-3d-section .stat small,
.capability-light .capability-3d-section .progress-row span,
.capability-light .capability-3d-section .progress-row small {
  color: #64748b;
}

.capability-3d-section .bar {
  background: rgba(148,163,184,.24);
}

.capability-light .capability-3d-section .bar {
  background: #e2e8f0;
}

.capability-3d-section .pill {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(148,163,184,.20);
  color: #1b242f !important;
}

.capability-3d-section .pill,
.capability-3d-section .progress-row,
.capability-3d-section .stat {
  position: relative;
  z-index: 2;
}

.question-gen-section {
  background:
    radial-gradient(circle at 76% 18%, rgba(96,165,250,.18), transparent 31%),
    radial-gradient(circle at 14% 88%, rgba(45,212,191,.12), transparent 28%),
    linear-gradient(135deg, #fbfdff 0%, #f4f8fc 46%, #eef7f5 100%);
}

.question-gen-section .capability-3d-layout {
  gap: clamp(52px, 5.5vw, 104px);
}

.question-gen-section .section-title {
  max-width: 760px;
  font-size: clamp(42px, 4vw, 76px);
  letter-spacing: 0;
}

.question-gen-section .lead {
  max-width: 560px;
  font-size: 16px;
  color: #52657f;
}

.question-gen-section .capability-example {
  max-width: 720px;
  border-radius: 24px;
  background: rgba(255,255,255,.76);
  border-color: rgba(147,197,253,.76);
  box-shadow: 0 22px 70px rgba(37,99,235,.08);
}

.question-gen-section .list li {
  min-height: 76px;
  border-radius: 24px;
  background: rgba(255,255,255,.82);
  border-color: rgba(226,232,240,.92);
  box-shadow: 0 18px 52px rgba(15,23,42,.08);
}

.question-gen-section .capability-3d-layout > div:last-child,
.question-gen-section:hover .capability-3d-layout > div:last-child {
  min-height: 520px;
  padding: clamp(22px, 2.4vw, 36px);
  border-radius: 42px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(248,250,252,.78)),
    linear-gradient(135deg, rgba(37,99,235,.08), rgba(20,184,166,.08));
  border: 1px solid rgba(226,232,240,.9);
  box-shadow:
    0 38px 95px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.95);
  transform: none;
  filter: drop-shadow(0 30px 55px rgba(15,23,42,.13));
}

.question-gen-section .capability-3d-layout > div:last-child::before {
  content: "";
  display: none;
}

.question-gen-preview {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: start;
}

.question-gen-preview::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 0;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.32)),
    radial-gradient(circle at 85% 12%, rgba(251,191,36,.12), transparent 28%);
  pointer-events: none;
}

.question-gen-top,
.question-prompt-card,
.question-gen-grid,
.question-gen-flow,
.question-sync-card {
  position: relative;
  z-index: 2;
}

.question-gen-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.question-gen-orb {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0f766e;
  background: linear-gradient(135deg, #ecfdf5, #eff6ff);
  border: 1px solid rgba(191,219,254,.86);
  box-shadow: 0 18px 38px rgba(20,184,166,.12);
}

.question-gen-top b,
.question-sync-card b {
  display: block;
  color: #07152f;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.question-gen-top small,
.question-sync-card span,
.question-prompt-card span,
.question-gen-grid small,
.question-gen-grid span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.question-gen-top em {
  padding: 8px 13px;
  border-radius: 999px;
  background: #dcfce7;
  color: #047857;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.question-prompt-card,
.question-gen-grid article,
.question-sync-card {
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 44px rgba(15,23,42,.08);
}

.question-prompt-card {
  padding: 22px;
  border-radius: 26px;
}

.question-prompt-card p {
  margin: 8px 0 16px;
  color: #0f172a;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

.question-gen-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.question-gen-tags i {
  padding: 8px 11px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.question-gen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.question-gen-grid article {
  padding: 18px;
  border-radius: 24px;
}

.question-gen-grid b {
  display: block;
  margin-top: 6px;
  color: #07152f;
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1;
}

.question-gen-flow {
  display: grid;
  gap: 13px;
  padding: 20px;
  border-radius: 26px;
  background: rgba(239,246,255,.72);
  border: 1px solid rgba(191,219,254,.72);
}

.question-gen-flow div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.question-gen-flow span {
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.question-gen-flow i {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #14b8a6, #3b82f6);
  width: var(--w);
  box-shadow: 0 10px 22px rgba(37,99,235,.16);
}

.question-sync-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-radius: 28px;
}

.question-sync-card svg {
  flex: 0 0 auto;
  color: #2563eb;
}

.review-live-preview {
  min-height: 430px;
  padding: 32px;
  display: grid;
  gap: 16px;
  align-content: start;
  overflow: hidden;
}

.review-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  position: relative;
  z-index: 2;
}

.review-preview-head .eyebrow {
  margin: 0;
}

.review-score-card,
.review-ticket,
.review-action-row {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.07);
  box-shadow: 0 18px 45px rgba(2,6,23,.16);
}

.review-score-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 18px;
  align-items: end;
  padding: 22px 24px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 20%, rgba(45,212,191,.20), transparent 34%),
    rgba(255,255,255,.08);
}

.review-score-card span,
.review-score-card small,
.review-ticket small,
.review-action-row span {
  color: #b6c6db;
}

.review-score-card b {
  grid-row: 1 / 3;
  grid-column: 2;
  color: #fff;
  font-size: 54px;
  line-height: .95;
}

.review-ticket {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 82px;
  padding: 18px 20px;
  border-radius: 24px;
}

.review-ticket::before {
  content: "";
  width: 10px;
  align-self: stretch;
  border-radius: 999px;
  background: var(--review-color);
  box-shadow: 0 0 24px color-mix(in srgb, var(--review-color) 58%, transparent);
}

.review-ticket > div {
  flex: 1;
  display: grid;
  gap: 5px;
}

.review-ticket b,
.review-action-row b {
  color: #fff;
}

.review-ticket span {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  font-weight: 800;
  background: color-mix(in srgb, var(--review-color) 18%, rgba(255,255,255,.08));
  border: 1px solid color-mix(in srgb, var(--review-color) 34%, rgba(255,255,255,.10));
}

.review-ticket.approved {
  --review-color: #10b981;
}

.review-ticket.edit {
  --review-color: #f59e0b;
}

.review-ticket.rejected {
  --review-color: #f43f5e;
}

.review-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 24px;
}

.capability-light .review-score-card,
.capability-light .review-ticket,
.capability-light .review-action-row {
  background: rgba(255,255,255,.92);
  border-color: rgba(226,232,240,.95);
}

.capability-light .review-score-card span,
.capability-light .review-score-card small,
.capability-light .review-ticket small,
.capability-light .review-action-row span {
  color: #64748b;
}

.capability-light .review-score-card b,
.capability-light .review-ticket b,
.capability-light .review-action-row b {
  color: var(--ink);
}

.builder-preview,
.forms-preview,
.attempts-preview,
.report-preview {
  min-height: 430px;
  padding: 32px;
  display: grid;
  gap: 18px;
  align-content: start;
  overflow: hidden;
}

.builder-preview > *,
.forms-preview > *,
.attempts-preview > *,
.report-preview > *,
.review-live-preview > * {
  animation: previewRise .7s cubic-bezier(.2,.8,.2,1) both;
}

.builder-preview > *:nth-child(2),
.forms-preview > *:nth-child(2),
.attempts-preview > *:nth-child(2),
.report-preview > *:nth-child(2),
.review-live-preview > *:nth-child(2) {
  animation-delay: .08s;
}

.builder-preview > *:nth-child(3),
.forms-preview > *:nth-child(3),
.attempts-preview > *:nth-child(3),
.report-preview > *:nth-child(3),
.review-live-preview > *:nth-child(3) {
  animation-delay: .16s;
}

.builder-preview > *:nth-child(4),
.forms-preview > *:nth-child(4),
.attempts-preview > *:nth-child(4),
.report-preview > *:nth-child(4),
.review-live-preview > *:nth-child(4) {
  animation-delay: .24s;
}

.builder-card,
.form-field-card,
.review-ticket,
.report-hero,
.attempt-list,
.report-bars,
.attempt-ring {
  animation-name: previewRise, previewFloat;
  animation-duration: .75s, 5.8s;
  animation-timing-function: cubic-bezier(.2,.8,.2,1), ease-in-out;
  animation-fill-mode: both, both;
  animation-iteration-count: 1, infinite;
}

.form-field-card.accent,
.review-ticket.edit,
.report-bars,
.builder-grid span:nth-child(2) {
  animation-delay: .14s, .9s;
}

.review-ticket.rejected,
.builder-grid span:nth-child(3),
.report-stat-row span:nth-child(3) {
  animation-delay: .22s, 1.4s;
}

.builder-steps span,
.form-preview-grid span,
.builder-grid span,
.report-stat-row span {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.builder-steps span:hover,
.form-preview-grid span:hover,
.builder-grid span:hover,
.report-stat-row span:hover,
.review-ticket:hover,
.form-field-card:hover {
  transform: translateY(-4px) translateZ(28px);
  box-shadow: 0 26px 60px rgba(2,6,23,.22);
}

.bar span,
.attempt-list i::before {
  animation: barGrow 1s cubic-bezier(.2,.8,.2,1) both;
  transform-origin: left;
}

.report-bars i {
  --bob-distance: 10px;
  animation:
    chartGrow .95s cubic-bezier(.2,.8,.2,1) both,
    barBreathe 4.8s ease-in-out infinite,
    barBob 3.2s ease-in-out infinite;
  will-change: transform, translate, filter;
  transform-origin: bottom;
}

.report-bars i:nth-child(1) {
  --bob-distance: 8px;
  animation-delay: 0s, .2s, 0s;
}

.report-bars i:nth-child(2),
.report-bars i:nth-child(5) {
  animation-delay: .1s, .8s, .22s;
}

.report-bars i:nth-child(3) {
  animation-delay: .2s, 1.3s, .44s;
  --bob-distance: 12px;
}

.report-bars i:nth-child(4) {
  animation-delay: .3s, 1.8s, .66s;
  --bob-distance: 14px;
}

.preview-topline > span,
.pill .tiny-dot,
.tiny-dot {
  animation: statusPulse 2.4s ease-in-out infinite;
}

.preview-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  position: relative;
  z-index: 2;
}

.preview-topline .eyebrow {
  margin: 0;
}

.preview-topline > span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  color: #34d399;
  font-size: 12px;
  font-weight: 800;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(52,211,153,.22);
}

.builder-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  position: relative;
  z-index: 2;
}

.builder-steps span,
.builder-card,
.builder-grid span,
.form-field-card,
.form-preview-grid span,
.attempt-ring,
.attempt-list,
.report-hero,
.report-stat-row span,
.report-bars {
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.07);
  box-shadow: 0 18px 45px rgba(2,6,23,.16);
}

.builder-steps span {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: #b6c6db;
  font-weight: 800;
}

.builder-steps span::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 999px;
  background: currentColor;
}

.builder-steps .active {
  color: #60a5fa;
  background: rgba(59,130,246,.12);
}

.builder-card {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px;
  border-radius: 28px;
  position: relative;
  z-index: 2;
}

.builder-card b,
.form-field-card b,
.attempt-ring b,
.attempt-list b,
.report-hero b,
.report-stat-row b {
  color: #fff;
}

.builder-card p,
.form-field-card p,
.attempt-ring span,
.attempt-list span,
.report-hero span,
.report-hero small,
.report-stat-row small {
  color: #b6c6db;
}

.builder-card strong {
  width: 86px;
  height: 86px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  background: conic-gradient(#10b981 0 92%, rgba(148,163,184,.22) 92% 100%);
  box-shadow: inset 0 0 0 10px rgba(15,23,42,.72);
}

.builder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  position: relative;
  z-index: 2;
}

.builder-grid span {
  display: grid;
  gap: 4px;
  padding: 18px;
  border-radius: 20px;
}

.builder-grid small {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
}

.form-field-card {
  min-height: 106px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 20px;
  border-radius: 26px;
  position: relative;
  z-index: 2;
}

.form-field-card > span {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: linear-gradient(135deg, #3b82f6, #22c55e);
  box-shadow: 0 18px 32px rgba(59,130,246,.24);
}

.form-field-card.accent > span {
  background: linear-gradient(135deg, #f59e0b, #06b6d4);
}

.form-field-card small {
  padding: 8px 12px;
  border-radius: 999px;
  color: #dbeafe;
  font-weight: 800;
  background: rgba(255,255,255,.08);
}

.form-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  position: relative;
  z-index: 2;
}

.form-preview-grid span {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border-radius: 18px;
  color: #b6c6db;
  font-weight: 800;
}

.attempts-preview {
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
}

.attempts-preview .preview-topline {
  grid-column: 1 / -1;
}

.attempt-ring {
  --ring-progress: 0;
  --ring-color: #10b981;
  --ring-track: rgba(148,163,184,.22);
}

.attempt-ring {
  width: 210px;
  height: 210px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  background:
    radial-gradient(circle at center, rgba(15,23,42,.92) 0 54%, transparent 55%),
    conic-gradient(var(--ring-color) 0 calc(var(--ring-progress) * 1%), var(--ring-track) calc(var(--ring-progress) * 1%) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.attempt-ring::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  pointer-events: none;
}

.attempt-ring b {
  font-size: 46px;
  line-height: 1;
}

.attempt-list {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 28px;
  position: relative;
  z-index: 2;
}

.attempt-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 18px;
}

.attempt-list i {
  grid-column: 1 / -1;
  height: 9px;
  border-radius: 999px;
  background: rgba(148,163,184,.24);
  overflow: hidden;
}

.attempt-list i::before {
  content: "";
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: var(--bar);
}

.report-preview {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
}

.report-preview .preview-topline,
.report-stat-row {
  grid-column: 1 / -1;
}

.report-hero {
  min-height: 220px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 28px;
  border-radius: 30px;
  position: relative;
  z-index: 2;
  background:
    radial-gradient(circle at 78% 20%, rgba(96,165,250,.22), transparent 38%),
    rgba(255,255,255,.08);
}

.report-hero b {
  font-size: 58px;
  line-height: .95;
}

.report-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  position: relative;
  z-index: 2;
}

.report-stat-row span {
  display: grid;
  gap: 4px;
  padding: 18px;
  border-radius: 20px;
}

.report-bars {
  min-height: 220px;
  display: flex;
  align-items: end;
  gap: 14px;
  padding: 24px;
  border-radius: 30px;
  position: relative;
  z-index: 2;
}

.report-bars i {
  flex: 1;
  height: var(--h);
  min-height: 48px;
  border-radius: 14px 14px 8px 8px;
  background: linear-gradient(180deg, var(--bar), rgba(15,23,42,.20));
  box-shadow: 0 18px 34px rgba(2,6,23,.18);
}

.capability-light .preview-topline > span {
  color: #047857;
  background: #dcfce7;
  border-color: #bbf7d0;
}

.capability-light .builder-steps span,
.capability-light .builder-card,
.capability-light .builder-grid span,
.capability-light .form-field-card,
.capability-light .form-preview-grid span,
.capability-light .attempt-ring,
.capability-light .attempt-list,
.capability-light .report-hero,
.capability-light .report-stat-row span,
.capability-light .report-bars {
  background: rgba(255,255,255,.94);
  border-color: rgba(226,232,240,.95);
}

.capability-light .builder-card b,
.capability-light .form-field-card b,
.capability-light .attempt-ring b,
.capability-light .attempt-list b,
.capability-light .report-hero b,
.capability-light .report-stat-row b {
  color: var(--ink);
}

.capability-light .builder-card p,
.capability-light .form-field-card p,
.capability-light .attempt-ring span,
.capability-light .attempt-list span,
.capability-light .report-hero span,
.capability-light .report-hero small,
.capability-light .report-stat-row small,
.capability-light .form-preview-grid span {
  color: #64748b;
}

.capability-light .attempt-ring {
  background:
    radial-gradient(circle at center, #fff 0 54%, transparent 55%),
    conic-gradient(var(--ring-color) 0 calc(var(--ring-progress) * 1%), #e2e8f0 calc(var(--ring-progress) * 1%) 100%);
}

.attempt-ring.in-view {
  animation: previewRise .75s cubic-bezier(.2,.8,.2,1) both, previewFloat 5.8s ease-in-out .75s infinite, ringFill 1.25s cubic-bezier(.2,.8,.2,1) .12s both;
}

@media (max-width: 760px) {
  .builder-grid,
  .builder-steps,
  .form-preview-grid,
  .report-stat-row {
    grid-template-columns: 1fr;
  }

  .attempts-preview,
  .report-preview {
    grid-template-columns: 1fr;
  }

  .attempt-ring {
    width: 190px;
    height: 190px;
    justify-self: center;
  }

  .question-gen-section .section-title {
    font-size: 38px;
  }

  .question-gen-grid,
  .question-gen-top {
    grid-template-columns: 1fr;
  }

  .question-gen-flow div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .question-sync-card {
    align-items: flex-start;
  }
}

@keyframes previewRise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes previewFloat {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -7px;
  }
}

@keyframes barGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes chartGrow {
  from {
    transform: scaleY(.12);
    opacity: .35;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes barBreathe {
  0%, 100% {
    filter: saturate(1);
  }
  50% {
    filter: saturate(1.25) brightness(1.08);
  }
}

@keyframes barBob {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 calc(var(--bob-distance) * -1);
  }
}

@keyframes ringFill {
  from {
    --ring-progress: 0;
  }
  to {
    --ring-progress: 78;
  }
}

@property --ring-progress {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@keyframes statusPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16,185,129,.22);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(16,185,129,0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .builder-preview > *,
  .forms-preview > *,
  .attempts-preview > *,
  .report-preview > *,
  .review-live-preview > *,
  .builder-card,
  .form-field-card,
  .review-ticket,
  .report-hero,
  .attempt-list,
  .report-bars,
  .attempt-ring,
  .bar span,
  .attempt-list i::before,
  .report-bars i,
  .preview-topline > span,
  .pill .tiny-dot,
  .tiny-dot {
    animation: none !important;
  }
}

/* Contact page full-width section containers */
.top-pad > .contact-enterprise,
.outer-pad > .section-wrap:has(.contact-location-section),
.outer-pad > .section-wrap:has(.cta) {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
}

.top-pad > .contact-enterprise {
  margin-top: 0 !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.outer-pad > .section-wrap:has(.contact-location-section) > .section-inner,
.outer-pad > .section-wrap:has(.cta) > .cta {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
}

@media (max-width: 760px) {
  .top-pad > .contact-enterprise {
    padding-left: 24px !important;
    padding-right: 24px !important;
    border-radius: 0 !important;
  }
}

.subjective-ai-preview {
  min-height: 430px;
  display: grid;
  align-content: center;
  padding: 34px 34px 30px;
  overflow: hidden;
}

.subjective-ai-preview .mock.white {
  max-width: 64%;
  position: relative;
  z-index: 5;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 26px;
  border-radius: 28px;
  background: rgba(255,255,255,.10);
  box-shadow: 0 28px 65px rgba(2,6,23,.22);
}

.subjective-ai-robot {
  position: absolute;
  right: 18px;
  bottom: -8px;
  z-index: 4;
  width: min(330px, 36%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 34px rgba(0,0,0,.36));
  transform: translateZ(52px) rotateY(-8deg);
  pointer-events: none;
}

.subjective-ai-preview > .eyebrow {
  position: relative;
  z-index: 5;
  margin-bottom: 12px;
}

.capability-3d-section:has(.subjective-ai-preview) .capability-3d-layout {
  grid-template-columns: minmax(0, .94fr) minmax(560px, 1.06fr);
  gap: 64px;
}

.capability-3d-section:has(.subjective-ai-preview) .section-title {
  max-width: 680px;
  font-size: clamp(42px, 3.1vw, 72px);
}

.capability-3d-section:has(.subjective-ai-preview) .lead {
  max-width: 610px;
  font-size: 17px;
  line-height: 1.72;
}

.capability-3d-section:has(.subjective-ai-preview) .capability-example {
  max-width: 760px;
  margin-top: 28px;
}

.capability-3d-section:has(.subjective-ai-preview) .list {
  margin-top: 34px;
}

.capability-3d-section:has(.subjective-ai-preview) .list li {
  min-height: 78px;
  align-items: center;
}

@media (max-width: 900px) {
  .capability-3d-section .section-title {
    font-size: 40px;
  }

  .capability-3d-section .list {
    grid-template-columns: 1fr;
  }

  .capability-3d-layout {
    gap: 44px;
  }

  .capability-3d-layout > div:last-child,
  .capability-3d-section:hover .capability-3d-layout > div:last-child {
    transform: none;
    padding: 22px;
    border-radius: 28px;
  }

  .capability-3d-layout > div:last-child::before {
    top: 14px;
    right: 18px;
  }

  .subjective-ai-preview {
    min-height: 430px;
    padding: 24px 20px;
  }

  .subjective-ai-preview .mock.white {
    max-width: 100%;
    margin-top: 130px;
  }

  .subjective-ai-robot {
    width: min(240px, 58%);
    right: -18px;
    top: 48px;
    bottom: auto;
    opacity: .9;
  }

  .capability-3d-section:has(.subjective-ai-preview) .capability-3d-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }
}