:root {
  --navy: #0b1739;
  --navy-2: #13234d;
  --cyan: #11c5dc;
  --cyan-dark: #06aabd;
  --cyan-soft: #e9fbfd;
  --orange: #f58220;
  --white: #ffffff;
  --text: #172033;
  --muted: #687386;
  --line: #e7edf3;
  --surface: #f7fafc;
  --shadow: 0 18px 50px rgba(11, 23, 57, 0.10);
  --radius: 22px;
  --container: 1180px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

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

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(231, 237, 243, 0.85);
}

.nav-wrap {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: inline-flex;
  flex-direction: column;
  min-width: 126px;
}

.brand-name {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1.4px;
  color: var(--navy);
}

.brand-name::first-letter {
  color: var(--orange);
}

.brand-tagline {
  margin-top: -5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

.main-nav a {
  font-size: 14px;
  font-weight: 650;
  color: #3d4759;
  transition: 0.2s ease;
}

.main-nav a:hover {
  color: var(--cyan-dark);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.language-btn {
  border: 0;
  background: transparent;
  color: var(--navy);
  font-weight: 700;
  cursor: pointer;
}

.language-btn span {
  color: #c3cbd6;
  margin: 0 4px;
}

.signin-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.mobile-menu-btn {
  display: none;
  border: 0;
  background: var(--cyan-soft);
  color: var(--navy);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  font-size: 22px;
  cursor: pointer;
}

/* Buttons */

.btn {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 750;
  transition: 0.22s ease;
}

.btn-small {
  min-height: 42px;
  padding: 0 18px;
}

.btn-primary {
  color: var(--white);
  background: linear-gradient(135deg, var(--cyan), #08b7d3);
  box-shadow: 0 10px 24px rgba(17, 197, 220, 0.25);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(17, 197, 220, 0.34);
}

.btn-secondary {
  border: 1px solid #cbd6e2;
  background: var(--white);
  color: var(--navy);
}

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

/* Hero */

.hero {
  position: relative;
  overflow: hidden;
  padding: 48px 0 90px;
  background:
    radial-gradient(circle at 85% 15%, rgba(17, 197, 220, 0.11), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.hero::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  right: -170px;
  bottom: -130px;
  background: rgba(17, 197, 220, 0.07);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  align-items: center;
  gap: 68px;
}

.eyebrow {
  color: var(--cyan-dark);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.product-name {
  color: var(--navy);
  font-size: 24px;
  font-weight: 850;
  margin-bottom: 2px;
}

.product-name span {
  color: var(--orange);
  font-size: 14px;
  letter-spacing: 4px;
  margin-left: 8px;
}

.product-tagline {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 1.2px;
  margin-bottom: 30px;
}

.hero h1 {
  max-width: 650px;
  font-size: clamp(40px, 4.7vw, 66px);
  line-height: 1.06;
  letter-spacing: -2.7px;
  color: var(--navy);
}

.hero h1 > span {
  display: block;
  color: #1b294e;
  margin-top: 7px;
}

.hero-description {
  max-width: 610px;
  margin-top: 25px;
  color: var(--muted);
  font-size: 17px;
}

.hero-actions {
  display: flex;
  gap: 13px;
  margin-top: 31px;
  flex-wrap: wrap;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 17px;
  margin-top: 25px;
}

.hero-points span {
  color: #566277;
  font-size: 12px;
  font-weight: 650;
}

.hero-points span::first-letter {
  color: var(--cyan);
}

/* ERP mockup */

.hero-product-card {
  position: relative;
}

.hero-product-card::before {
  content: "";
  position: absolute;
  inset: 8% 8% -5% 8%;
  border-radius: 40px;
  background: rgba(17, 197, 220, 0.16);
  filter: blur(35px);
}

.erp-window {
  position: relative;
  background: var(--white);
  border: 1px solid #dce6ef;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.erp-topbar {
  min-height: 68px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.erp-topbar div {
  display: flex;
  flex-direction: column;
}

.erp-topbar strong {
  color: var(--navy);
}

.erp-topbar small {
  color: var(--muted);
}

.erp-status {
  padding: 7px 11px;
  border-radius: 30px;
  background: var(--cyan-soft);
  color: var(--cyan-dark);
  font-size: 10px;
  font-weight: 800;
}

.erp-layout {
  min-height: 425px;
  display: grid;
  grid-template-columns: 125px 1fr;
}

.erp-sidebar {
  padding: 22px 13px;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.erp-sidebar span {
  padding: 10px 11px;
  border-radius: 8px;
  color: #b9c6df;
  font-size: 11px;
  font-weight: 650;
}

.erp-sidebar span.active {
  color: #fff;
  background: linear-gradient(135deg, var(--cyan), #0db3ca);
}

.erp-main {
  padding: 24px;
  background: #f8fafc;
}

.erp-heading small {
  color: var(--muted);
}

.erp-heading h3 {
  color: var(--navy);
  font-size: 22px;
  margin-top: 2px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 22px;
}

.stat-card {
  min-height: 100px;
  padding: 15px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.stat-card small {
  color: var(--muted);
}

.stat-card strong {
  color: var(--navy);
  font-size: 17px;
  margin: 5px 0;
}

.stat-card span {
  color: var(--cyan-dark);
  font-size: 10px;
  font-weight: 750;
}

.erp-chart {
  margin-top: 12px;
  min-height: 174px;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}

.chart-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-title strong {
  font-size: 12px;
  color: var(--navy);
}

.chart-title span {
  font-size: 10px;
  color: var(--muted);
}

.chart-bars {
  height: 105px;
  margin-top: 18px;
  display: flex;
  align-items: end;
  gap: 12px;
}

.chart-bars span {
  flex: 1;
  border-radius: 7px 7px 2px 2px;
  background: linear-gradient(180deg, var(--cyan), #b9f2f7);
}

/* Shared headings */

.section-heading {
  max-width: 690px;
  margin-bottom: 42px;
}

.section-heading.centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-heading > span {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--cyan-dark);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.section-heading h2 {
  color: var(--navy);
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.12;
  letter-spacing: -1.5px;
}

.section-heading p {
  margin-top: 13px;
  color: var(--muted);
  font-size: 16px;
}

/* Features */

.feature-section {
  padding: 90px 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.feature-card {
  min-height: 265px;
  padding: 24px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  transition: 0.24s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(17, 197, 220, 0.45);
  box-shadow: 0 15px 35px rgba(11, 23, 57, 0.08);
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--cyan-soft);
  color: var(--cyan-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 850;
  margin-bottom: 20px;
}

.feature-card h3 {
  color: var(--navy);
  font-size: 17px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.feature-card p {
  color: var(--muted);
  font-size: 13px;
}

/* Modules */

.modules-section {
  padding: 95px 0;
  background: #f7fafc;
}

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

.module-card {
  padding: 25px;
  border-radius: 17px;
  background: #fff;
  border: 1px solid var(--line);
}

.module-card > span {
  color: var(--cyan-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 1px;
}

.module-card h3 {
  margin-top: 8px;
  color: var(--navy);
  font-size: 19px;
}

.module-card p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

/* Trust */

.trust-section {
  padding: 44px 0;
  background: var(--navy);
}

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

.trust-grid div {
  padding: 6px 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.trust-grid div:first-child {
  padding-left: 0;
}

.trust-grid div:last-child {
  border-right: 0;
}

.trust-grid strong,
.trust-grid span {
  display: block;
}

.trust-grid strong {
  color: #fff;
  font-size: 14px;
}

.trust-grid span {
  margin-top: 4px;
  color: #aebbd3;
  font-size: 11px;
}

/* About */

.about-section {
  padding: 100px 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
}

.about-grid h2 {
  color: var(--navy);
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -1.5px;
}

.about-grid p {
  color: var(--muted);
  font-size: 17px;
  margin-bottom: 18px;
}

.built-with-customers {
  display: inline-block;
  margin-top: 9px;
  color: var(--navy);
  border-bottom: 3px solid var(--orange);
  padding-bottom: 4px;
}

/* Final CTA */

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

.final-cta-inner {
  padding: 54px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 95% 15%, rgba(17, 197, 220, 0.19), transparent 30%),
    var(--cyan-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
}

.final-cta-inner > div:first-child {
  max-width: 650px;
}

.final-cta-inner > div:first-child > span {
  color: var(--cyan-dark);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 2px;
}

.final-cta h2 {
  color: var(--navy);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.12;
  margin-top: 8px;
}

.final-cta p {
  color: var(--muted);
  margin-top: 12px;
}

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

/* Footer */

.site-footer {
  padding: 65px 0 24px;
  background: #07122d;
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.8fr 1.2fr;
  gap: 50px;
}

.footer-brand {
  font-size: 28px;
  font-weight: 850;
}

.footer-tagline {
  color: var(--orange);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 1.3px;
  margin-top: -3px;
}

.footer-grid p {
  color: #aeb9cd;
  font-size: 12px;
  margin-top: 13px;
}

.footer-grid h4 {
  font-size: 13px;
  margin-bottom: 15px;
}

.footer-grid a {
  display: block;
  color: #aeb9cd;
  font-size: 12px;
  margin: 8px 0;
}

.footer-grid a:hover {
  color: var(--cyan);
}

.footer-bottom {
  margin-top: 45px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  color: #8592aa;
  font-size: 11px;
}

.trial-anchor {
  height: 0;
}

/* Responsive */

@media (max-width: 1050px) {
  .main-nav {
    display: none;
  }

  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

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

  .hero-content {
    max-width: 760px;
  }

  .hero-product-card {
    max-width: 800px;
  }

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

  .feature-card:last-child {
    grid-column: span 2;
  }
}

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

  .site-header {
    position: relative;
  }

  .nav-wrap {
    min-height: 70px;
  }

  .language-btn,
  .signin-link,
  .nav-actions .btn-small {
    display: none;
  }

  .hero {
    padding: 40px 0 60px;
  }

  .hero h1 {
    font-size: 42px;
    letter-spacing: -1.8px;
  }

  .hero-description {
    font-size: 15px;
  }

  .hero-points {
    flex-direction: column;
    gap: 8px;
  }

  .erp-layout {
    grid-template-columns: 92px 1fr;
  }

  .erp-main {
    padding: 15px;
  }

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

  .erp-layout {
    min-height: auto;
  }

  .feature-grid,
  .module-grid,
  .pricing-grid,
  .trust-grid,
  .about-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .feature-card:last-child {
    grid-column: auto;
  }

  .trust-grid div,
  .trust-grid div:first-child {
    padding: 17px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .about-grid {
    gap: 30px;
  }

  .about-grid h2 {
    font-size: 36px;
  }

  .final-cta-inner {
    padding: 36px 25px;
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-grid {
    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 7px;
  }
}

@media (max-width: 520px) {
  .hero-actions,
  .cta-actions {
    flex-direction: column;
  }

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

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

  .erp-sidebar {
    display: none;
  }

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

  .price strong {
    font-size: 32px;
  }
}

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

.footer-logo {
  height: 72px;
  width: auto;
  display: block;
  margin-bottom: 12px;
}

@media (max-width: 760px) {
  .brand-logo {
    height: 48px;
  }

  .footer-logo {
    height: 62px;
  }
}

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

.footer-logo {
  height: 72px;
  width: auto;
  display: block;
  margin-bottom: 12px;
}

@media (max-width: 760px) {
  .brand-logo {
    height: 48px;
  }

  .footer-logo {
    height: 62px;
  }
}

.hero-erp-logo {
  width: 270px;
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 28px;
}

@media (max-width: 1050px) {
  .main-nav.mobile-open {
    display: flex;
    position: absolute;
    top: 76px;
    left: 20px;
    right: 20px;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
  }
}

/* Premium Feature Slider */

.feature-slider {
  position: relative;
}

.feature-slides {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 10%, rgba(17,197,220,.13), transparent 32%),
    #ffffff;
  box-shadow: 0 22px 60px rgba(11, 23, 57, 0.08);
}

.feature-slide {
  display: none;
  min-height: 440px;
  grid-template-columns: 0.88fr 1.12fr;
  align-items: center;
  gap: 65px;
  padding: 58px 70px;
}

.feature-slide.active {
  display: grid;
  animation: featureFade .45s ease;
}

@keyframes featureFade {
  from {
    opacity: 0;
    transform: translateX(12px);
  }

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

.feature-number {
  color: var(--cyan-dark);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 2px;
}

.feature-copy h3 {
  margin-top: 14px;
  color: var(--navy);
  font-size: clamp(30px, 3vw, 45px);
  line-height: 1.1;
  letter-spacing: -1.5px;
}

.feature-copy p {
  max-width: 500px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 16px;
}

.feature-highlight {
  display: inline-flex;
  margin-top: 27px;
  padding: 11px 15px;
  border-radius: 11px;
  background: var(--cyan-soft);
  color: var(--cyan-dark);
  font-size: 13px;
  font-weight: 800;
}

.feature-highlight strong {
  margin: 0 8px;
}

.feature-demo {
  min-height: 310px;
  padding: 28px;
  border-radius: 22px;
  background: #f7fafc;
  border: 1px solid #e1e9f0;
}

.demo-window {
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: white;
  border: 1px solid var(--line);
}

.demo-topbar {
  min-height: 55px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
}

.demo-language {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--cyan-soft);
  color: var(--cyan-dark);
}

.language-preview {
  min-height: 205px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 28px;
}

.language-preview > div:not(.language-switch) {
  min-height: 130px;
  padding: 20px;
  border-radius: 14px;
  background: #f7fafc;
  display: flex;
  flex-direction: column;
}

.language-preview small {
  color: var(--cyan-dark);
  font-weight: 750;
}

.language-preview strong {
  margin-top: 7px;
  color: var(--navy);
  font-size: 18px;
}

.language-preview span {
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
}

.language-switch {
  color: var(--orange);
  font-size: 24px;
  font-weight: 900;
}

.search-box-demo {
  margin: 24px;
  height: 54px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--cyan);
  border-radius: 12px;
  color: var(--navy);
}

.search-box-demo span {
  color: var(--cyan-dark);
  font-size: 22px;
}

.search-result-demo {
  margin: 0 24px 12px;
  padding: 13px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  background: var(--cyan-soft);
}

.result-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: white;
  color: var(--cyan-dark);
  font-weight: 850;
}

.search-result-demo strong,
.search-result-demo span {
  display: block;
}

.search-result-demo strong {
  color: var(--navy);
  font-size: 13px;
}

.search-result-demo span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.search-result-demo b {
  color: var(--cyan-dark);
}

.muted-result {
  background: #f6f8fa;
}

.connected-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.flow-card {
  min-width: 105px;
  padding: 21px 14px;
  border-radius: 14px;
  background: white;
  border: 1px solid var(--line);
  color: var(--navy);
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(11,23,57,.05);
}

.flow-arrow {
  color: var(--cyan-dark);
  font-size: 24px;
  font-weight: 900;
}

.permission-demo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
}

.permission-row {
  padding: 16px 18px;
  border-radius: 13px;
  background: white;
  border: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
}

.permission-pill {
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 10px;
}

.permission-pill.view {
  background: #e8f4ff;
  color: #1976c9;
}

.permission-pill.work {
  background: #fff3df;
  color: #c77c0a;
}

.permission-pill.manager {
  background: #e9f7ff;
  color: #087da1;
}

.permission-pill.full {
  background: #e8f8ee;
  color: #1c8c4b;
}

.stock-demo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
}

.stock-option {
  padding: 16px 17px;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 13px;
  border-radius: 13px;
  background: white;
  border: 1px solid var(--line);
}

.stock-option.selected {
  border-color: var(--cyan);
  background: var(--cyan-soft);
}

.stock-option strong,
.stock-option small {
  display: block;
}

.stock-option strong {
  color: var(--navy);
  font-size: 13px;
}

.stock-option small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.stock-option > b {
  color: var(--cyan-dark);
  font-size: 10px;
}

.stock-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.stock-dot.block {
  background: #ef5b5b;
}

.stock-dot.approval {
  background: #f0a52b;
}

.stock-dot.allow {
  background: #3abd72;
}

.slider-arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: white;
  color: var(--navy);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(11,23,57,.10);
  transition: .2s ease;
}

.slider-arrow:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  color: white;
}

.slider-prev {
  left: -23px;
}

.slider-next {
  right: -23px;
}

.slider-dots {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.slider-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ced8e2;
  cursor: pointer;
  transition: .25s ease;
}

.slider-dots button.active {
  width: 27px;
  border-radius: 10px;
  background: var(--cyan);
}

@media (max-width: 900px) {
  .feature-slide {
    grid-template-columns: 1fr;
    padding: 38px;
    gap: 35px;
  }

  .slider-prev {
    left: 8px;
  }

  .slider-next {
    right: 8px;
  }
}

@media (max-width: 560px) {
  .feature-slide {
    padding: 28px 20px;
  }

  .feature-demo {
    padding: 15px;
  }

  .language-preview {
    grid-template-columns: 1fr;
  }

  .language-switch {
    text-align: center;
  }

  .slider-arrow {
    display: none;
  }

  .connected-demo {
    flex-direction: column;
  }

  .flow-arrow {
    transform: rotate(90deg);
  }
}

.conversion-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.conversion-step {
  min-width: 125px;
  padding: 24px 16px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  text-align: center;
  box-shadow: 0 8px 22px rgba(11,23,57,.05);
}

.conversion-step small,
.conversion-step strong,
.conversion-step span {
  display: block;
}

.conversion-step small {
  color: var(--cyan-dark);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.conversion-step strong {
  margin-top: 8px;
  color: var(--navy);
  font-size: 14px;
}

.conversion-step span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}

.active-conversion {
  border-color: var(--cyan);
  background: var(--cyan-soft);
}

.conversion-arrow {
  color: var(--cyan-dark);
  font-size: 25px;
  font-weight: 900;
  text-align: center;
}

.conversion-arrow span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

@media (max-width: 650px) {
  .conversion-demo {
    flex-direction: column;
  }

  .conversion-arrow {
    transform: rotate(90deg);
  }

  .conversion-arrow span {
    display: none;
  }
}

.annual-price {
  color: var(--cyan-dark);
  font-weight: 800;
}

.annual-main {
  font-size: 1em;
}

.annual-decimal {
  font-size: 0.72em;
  vertical-align: super;
  margin-left: 1px;
}

.annual-text {
  font-size: 1em;
  margin-left: 4px;
}

.featured-price {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.price-currency {
  color: var(--orange);
  font-size: 16px;
  font-weight: 850;
  letter-spacing: 1px;
}

.price-main {
  margin-top: 2px;
  line-height: 1;
  color: var(--navy);
}

.price-whole {
  font-size: 58px;
  letter-spacing: -3px;
}

.price-decimal {
  font-size: 27px;
  color: var(--cyan-dark);
  vertical-align: top;
  margin-left: 2px;
}

.price-period {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

.monthly-note {
  margin-top: 11px;
  color: var(--muted);
  font-size: 12px;
}

.monthly-note strong {
  color: var(--navy);
}





/* =========================================================
   PKORIX HERO MESSAGE STYLING
   ========================================================= */

.hero-lead {
  display: block;
  margin-bottom: 0.18em;
  color: #0b1f54;
  font-style: italic;
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero-script-line {
  display: block;
  max-width: 700px;
  color: #0b1f54;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 0.62em;
  font-style: italic;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.02em;
}

.hero-better-way {
  position: relative;
  display: inline-block;
  z-index: 1;

  padding: 0.02em 0.12em 0.05em;

  color: inherit;
  font-weight: 800;
  white-space: nowrap;

  border-radius: 8px;

  background:
    linear-gradient(
      96deg,
      #ff8a4c 0%,
      #ff9f58 50%,
      #ff7243 100%
    );

  transform: rotate(-1deg);

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
@media (max-width: 760px) {
  .hero-script-line {
    font-size: 0.60em;
    line-height: 1.45;
  }

  .hero-better-way {
    white-space: normal;
  }
}



.hero-better-way {
  position: relative;
  display: inline-block !important;
  width: auto !important;
  max-width: max-content;
  z-index: 1;

  padding: 0 0.04em;
  margin: 0 0.02em;

  color: inherit;
  font-weight: 800;
  white-space: nowrap;

  background: none !important;
}

.hero-better-way::before {
  content: "";

  position: absolute;
  z-index: -1;

  left: -0.08em;
  right: -0.10em;

  top: 52%;
  height: 0.58em;

  background: #ff874d;

  border-radius:
    7px 10px 6px 9px;

  transform:
    rotate(-1.5deg)
    skewX(-3deg);

  clip-path: polygon(
    1% 13%,
    96% 0%,
    100% 18%,
    98% 88%,
    4% 100%,
    0% 78%
  );

  opacity: 0.94;
}

.hero-better-way::after {
  content: "";

  position: absolute;
  right: -0.22em;
  top: 0.03em;

  width: 0.20em;
  height: 0.055em;

  border-radius: 999px;
  background: #ff6c35;

  transform: rotate(-55deg);
}


.hero-business-accent {
  position: relative;
  display: inline-block;
  color: inherit;
  white-space: nowrap;
}

.hero-business-accent::after {
  content: "";
  position: absolute;

  left: 2%;
  right: 1%;
  bottom: -0.10em;

  height: 0.075em;
  border-radius: 999px;

  background: #ff7a45;

  transform: rotate(-2deg);
  opacity: 0.95;
}




/* =========================================================
   PKORIX WEBSITE NEXUS PREVIEW
   Light Mode - Website Adaptation of ERP Nexus
   ========================================================= */

.hero-nexus {
  width: 100%;
  overflow: hidden;
  border: 1px solid #dbe7ee;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(14, 48, 77, 0.14);
}

.hero-nexus svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-nexus-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 12px;
  border-bottom: 1px solid #e4edf2;
  background: rgba(255,255,255,0.98);
}

.hero-nexus-product {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 118px;
}

.hero-nexus-product-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(135deg,#14c4e3,#087fae);
}

.hero-nexus-product-icon svg {
  font-size: 18px;
}

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

.hero-nexus-product strong {
  color: #0b2152;
  font-size: .68rem;
}

.hero-nexus-product small {
  margin-top: 1px;
  color: #08a8c8;
  font-size: .52rem;
  font-weight: 800;
}

.hero-nexus-company {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 126px;
  padding: 6px 8px;
  border: 1px solid #e0eaf0;
  border-radius: 10px;
  background: #fbfdff;
}

.hero-nexus-company-icon {
  display: grid;
  place-items: center;
  color: #5c6fe5;
}

.hero-nexus-company-icon svg {
  font-size: 18px;
}

.hero-nexus-company small,
.hero-nexus-company strong {
  display: block;
}

.hero-nexus-company small {
  color: #8a99a9;
  font-size: .42rem;
}

.hero-nexus-company strong {
  color: #263c5d;
  font-size: .52rem;
}

.hero-nexus-company b {
  margin-left: auto;
  color: #8494a6;
  font-size: .55rem;
}

.hero-nexus-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 90px;
  max-width: 180px;
  padding: 8px 10px;
  border: 1px solid #e0eaf0;
  border-radius: 10px;
  color: #92a0af;
  background: #fbfdff;
  font-size: .5rem;
}

.hero-nexus-search svg {
  font-size: 14px;
}

.hero-nexus-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
}

.hero-nexus-tool {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #61748b;
  font-size: .47rem;
  font-weight: 750;
}

.hero-nexus-tool svg {
  font-size: 13px;
}

.hero-nexus-suggest {
  color: #079fbe;
}

.hero-nexus-language {
  padding: 5px 7px;
  border-radius: 7px;
  color: #173b66;
  background: #f2f7fb;
  font-size: .45rem;
  font-weight: 850;
}

.hero-nexus-icon-button,
.hero-nexus-profile {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  color: #566c83;
  background: #f4f8fa;
}

.hero-nexus-profile {
  color: #ffffff;
  background: linear-gradient(135deg,#0fbfdd,#087da8);
}

.hero-nexus-icon-button svg,
.hero-nexus-profile svg {
  font-size: 13px;
}

.hero-nexus-workspace {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  min-height: 490px;
}

.hero-nexus-sidebar {
  padding: 12px 7px;
  border-right: 1px solid #e4edf2;
  background: #f8fbfd;
}

.hero-nexus-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 54px;
  margin-bottom: 5px;
  border-radius: 10px;
  color: #6d7f92;
  font-size: .43rem;
  font-weight: 750;
}

.hero-nexus-nav svg {
  font-size: 18px;
}

.hero-nexus-nav.active {
  color: #049dbd;
  background: #e8faff;
  box-shadow: inset 3px 0 0 #06b8d7;
}

.hero-nexus-main {
  min-width: 0;
  padding: 16px;
  background:
    radial-gradient(circle at 42% 65%,rgba(40,182,221,.055),transparent 32%),
    linear-gradient(180deg,#fbfdff 0%,#f7fbfd 100%);
}

.hero-nexus-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 10px;
}

.hero-nexus-heading small {
  color: #0798b8;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.hero-nexus-heading h3 {
  margin: 3px 0 0;
  color: #0c2353;
  font-size: .94rem;
  line-height: 1.15;
}

.hero-nexus-demo {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 999px;
  color: #64788d;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(35,69,98,.06);
  font-size: .43rem;
  font-weight: 750;
}

.hero-nexus-demo i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #13b987;
}

.hero-nexus-period {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid #e0eaf0;
  border-radius: 11px;
  background: #ffffff;
}

.hero-nexus-period > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-nexus-period svg {
  color: #0aaaca;
  font-size: 17px;
}

.hero-nexus-period small,
.hero-nexus-period strong {
  display: block;
}

.hero-nexus-period small {
  color: #8594a4;
  font-size: .42rem;
}

.hero-nexus-period strong {
  margin-top: 2px;
  color: #233b5c;
  font-size: .52rem;
}

.hero-nexus-period-status {
  padding: 4px 7px;
  border-radius: 999px;
  color: #0ba374;
  background: #e9fbf4;
  font-size: .41rem;
  font-weight: 850;
}

.hero-nexus-kpis {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.hero-nexus-kpi {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #e1ebf0;
  border-radius: 11px;
  background: #ffffff;
  box-shadow: 0 5px 16px rgba(28,67,96,.035);
}

.hero-nexus-kpi-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 10px;
}

.hero-nexus-kpi-icon svg {
  font-size: 17px;
}

.icon-company { color:#5b6ee5; background:#eef0ff; }
.icon-sales   { color:#00a3c4; background:#e7fbff; }
.icon-gross   { color:#13a87b; background:#e8fbf4; }
.icon-profit  { color:#8a55e4; background:#f1ebff; }

.hero-nexus-kpi small,
.hero-nexus-kpi strong,
.hero-nexus-kpi span {
  display: block;
}

.hero-nexus-kpi small {
  color: #8090a1;
  font-size: .42rem;
}

.hero-nexus-kpi strong {
  margin-top: 2px;
  color: #0e2654;
  font-size: .65rem;
  white-space: nowrap;
}

.hero-nexus-kpi span {
  margin-top: 1px;
  color: #7f90a0;
  font-size: .39rem;
}

.hero-nexus-kpi .positive {
  color: #12a678;
}

.hero-nexus-content {
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(155px,.65fr);
  gap: 9px;
}

.hero-nexus-universe {
  position: relative;
  min-height: 244px;
  overflow: hidden;
  border: 1px solid #dfeaf0;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 58%,rgba(56,90,235,.10),transparent 20%),
    linear-gradient(180deg,#ffffff,#fbfdff);
}

.hero-nexus-section-title {
  position: absolute;
  z-index: 6;
  left: 13px;
  top: 11px;
}

.hero-nexus-section-title small,
.hero-nexus-section-title strong {
  display: block;
}

.hero-nexus-section-title small {
  color: #8595a5;
  font-size: .4rem;
  font-weight: 850;
  letter-spacing: .10em;
}

.hero-nexus-section-title strong {
  margin-top: 2px;
  color: #18345a;
  font-size: .53rem;
}

.hero-nexus-orbit {
  position: absolute;
  left: 52%;
  top: 57%;
  border: 1px solid rgba(77,112,207,.15);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}

.orbit-a { width: 46%; height: 42%; }
.orbit-b { width: 68%; height: 62%; }
.orbit-c { width: 89%; height: 80%; }

.hero-nexus-core {
  position: absolute;
  left: 52%;
  top: 57%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 94px;
  height: 94px;
  border: 6px solid rgba(215,221,255,.95);
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(145deg,#4169f3 0%,#253ab5 48%,#141b79 100%);
  box-shadow: 0 16px 34px rgba(43,60,190,.24);
  transform: translate(-50%,-50%);
}

.hero-nexus-core-glow {
  position: absolute;
  width: 17px;
  height: 17px;
  right: 13px;
  top: 11px;
  border-radius: 50%;
  background: #40d6ec;
  box-shadow: 0 0 15px rgba(64,214,236,.85);
}

.hero-nexus-core strong {
  font-size: .76rem;
  letter-spacing: .05em;
}

.hero-nexus-core small {
  margin-top: 4px;
  max-width: 72px;
  color: rgba(255,255,255,.78);
  font-size: .38rem;
  text-align: center;
}

.hero-nexus-orbit-node {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #536b84;
  font-size: .4rem;
  font-weight: 800;
}

.hero-nexus-orbit-node > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 4px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(31,66,95,.10);
}

.hero-nexus-orbit-node svg {
  font-size: 16px;
}

.node-company { left:46%; top:20%; }
.node-company > span { color:#7656dc; background:#efeaff; }

.node-performance { left:9%; top:48%; }
.node-performance > span { color:#0aa777; background:#e6fbf3; }

.node-finance { right:7%; top:46%; }
.node-finance > span { color:#e34e91; background:#ffe8f2; }

.node-billing { left:18%; bottom:8%; }
.node-billing > span { color:#e97928; background:#fff0e3; }

.node-alerts { right:23%; bottom:8%; }
.node-alerts > span { color:#2d76d9; background:#e8f2ff; }

.hero-nexus-right {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
}

.hero-nexus-watch,
.hero-nexus-quick {
  padding: 10px;
  border: 1px solid #dfeaf0;
  border-radius: 14px;
  background: #ffffff;
}

.hero-nexus-panel-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.hero-nexus-panel-title small,
.hero-nexus-panel-title strong {
  display: block;
}

.hero-nexus-panel-title small {
  color: #8898a8;
  font-size: .37rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.hero-nexus-panel-title strong {
  margin-top: 2px;
  color: #163158;
  font-size: .52rem;
}

.hero-nexus-panel-title > span {
  color: #00a2c1;
  font-size: .38rem;
  font-weight: 800;
}

.hero-nexus-watch-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 7px 0;
  border-top: 1px solid #edf2f5;
}

.watch-design-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #7058d9;
  background: #efebff;
}

.watch-design-icon.cyan {
  color: #00a1bf;
  background: #e8fbff;
}

.watch-design-icon svg {
  font-size: 15px;
}

.hero-nexus-watch-row strong,
.hero-nexus-watch-row small {
  display: block;
}

.hero-nexus-watch-row strong {
  color: #1b365a;
  font-size: .46rem;
}

.hero-nexus-watch-row small {
  margin-top: 2px;
  color: #8997a6;
  font-size: .38rem;
}

.watch-active,
.watch-good {
  padding: 4px 5px;
  border-radius: 999px;
  font-size: .35rem;
  font-weight: 850;
}

.watch-active { color:#7655da; background:#f1edff; }
.watch-good   { color:#0c9f71; background:#eafbf5; }

.hero-nexus-shortcuts {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 5px;
}

.hero-nexus-shortcuts button {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 31px;
  padding: 5px 6px;
  border: 1px solid #dceaf0;
  border-radius: 8px;
  color: #087f99;
  background: #f5fcfe;
  font-family: inherit;
  font-size: .4rem;
  font-weight: 800;
}

.hero-nexus-shortcuts svg {
  font-size: 12px;
}

@media (max-width: 1080px) {
  .hero-nexus-tool { display:none; }
  .hero-nexus-company { display:none; }
  .hero-nexus-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 800px) {
  .hero-nexus-workspace { grid-template-columns: 58px minmax(0,1fr); }
  .hero-nexus-nav span { display:none; }
  .hero-nexus-content { grid-template-columns:1fr; }
  .hero-nexus-right { display:none; }
  .hero-nexus-search { display:none; }
}

@media (max-width: 560px) {
  .hero-nexus-workspace { grid-template-columns: 1fr; }
  .hero-nexus-sidebar { display:none; }
  .hero-nexus-main { padding:11px; }
  .hero-nexus-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-nexus-tools .hero-nexus-language { display:none; }
  .hero-nexus-universe { min-height:225px; }
}


/* =========================================================
   HERO NEXUS SIDEBAR - MATCH STAGING
   ========================================================= */

.hero-nexus-workspace {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  min-height: 490px;
}

.hero-nexus-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #e5edf3;
  background: #ffffff;
}

.hero-nexus-sidebar-top {
  display: flex;
  justify-content: center;
  padding: 14px 0 10px;
}

.hero-nexus-logo-tile {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #ff8a1f;
  box-shadow: 0 8px 18px rgba(255, 138, 31, 0.18);
}

.hero-nexus-logo-tile span {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.hero-nexus-sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 0 8px;
}

.hero-nexus-sidebar-bottom {
  padding: 4px 0 12px;
}

.hero-nexus-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 68px;
  color: #7a8da0;
  font-size: 0.43rem;
  font-weight: 800;
  text-align: center;
}

.hero-nexus-nav svg {
  width: 20px;
  height: 20px;
}

.hero-nexus-nav span {
  display: block;
  line-height: 1.1;
}

.hero-nexus-nav.active {
  color: #019fbe;
  background: #eef8ff;
}

.hero-nexus-nav.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #12b9dd;
}

.nexus-item svg      { color: #149fd0; }
.sales-item svg      { color: #ff4d93; }
.purchase-item svg   { color: #ff8a1f; }
.inventory-item svg  { color: #17b56e; }
.expenses-item svg   { color: #ff5c5c; }
.accounting-item svg { color: #2376ff; }
.projects-item svg   { color: #347dff; }
.support-item svg    { color: #f39c12; }

.signout-item {
  color: #ef5a4c;
}

.signout-item svg {
  color: #ef5a4c;
}

@media (max-width: 800px) {
  .hero-nexus-workspace {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .hero-nexus-nav span {
    font-size: 0.39rem;
  }
}

@media (max-width: 560px) {
  .hero-nexus-workspace {
    grid-template-columns: 1fr;
  }

  .hero-nexus-sidebar {
    display: none;
  }
}


/* =========================================================
   HERO NEXUS LIGHT CLEANUP
   ========================================================= */

.hero-nexus {
  background: #ffffff !important;
}

.hero-nexus-topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e5edf3 !important;
}

.hero-nexus-workspace {
  background: #ffffff !important;
}

.hero-nexus-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e5edf3 !important;
}

.hero-nexus-main {
  background: #ffffff !important;
}

.hero-nexus-heading,
.hero-nexus-content {
  background: transparent !important;
}

.hero-nexus-period,
.hero-nexus-kpi,
.hero-nexus-watch,
.hero-nexus-quick,
.hero-nexus-universe {
  background: #ffffff !important;
}

.hero-nexus-universe {
  border: 1px solid #e3ebf1 !important;
}

.hero-nexus-watch,
.hero-nexus-quick,
.hero-nexus-kpi,
.hero-nexus-period {
  border: 1px solid #e3ebf1 !important;
  box-shadow: none !important;
}

.hero-nexus-main {
  box-shadow: none !important;
}

.hero-nexus-nav {
  background: transparent;
}

.hero-nexus-nav.active {
  background: #eef8ff !important;
}

.hero-nexus-sidebar-menu {
  gap: 6px;
  padding-bottom: 12px;
  justify-content: flex-start;
}

.hero-nexus-sidebar {
  justify-content: flex-start;
}


/* =========================================================
   HERO NEXUS PURE WHITE OVERRIDE
   ========================================================= */

.hero-nexus,
.hero-nexus-topbar,
.hero-nexus-workspace,
.hero-nexus-main,
.hero-nexus-heading,
.hero-nexus-content,
.hero-nexus-period,
.hero-nexus-universe,
.hero-nexus-watch,
.hero-nexus-quick,
.hero-nexus-kpi,
.hero-nexus-right {
  background: #ffffff !important;
  background-image: none !important;
}

.hero-nexus-main {
  box-shadow: none !important;
}

.hero-nexus,
.hero-nexus-topbar,
.hero-nexus-sidebar,
.hero-nexus-period,
.hero-nexus-universe,
.hero-nexus-watch,
.hero-nexus-quick,
.hero-nexus-kpi {
  border-color: #e3ebf1 !important;
}

.hero-nexus-orbit {
  border-color: rgba(77, 112, 207, 0.12) !important;
}

.hero-nexus-sidebar {
  background: #ffffff !important;
}

.hero-nexus-nav {
  background: transparent !important;
}

.hero-nexus-nav.active {
  background: #eef8ff !important;
}


/* =========================================================
   PKORIX SIGNATURE HEADING SYSTEM
   FINAL REFINED VERSION
   ========================================================= */

:root {
    --pk-navy: #0b1f54;
    --pk-navy-soft: #18346f;

    --pk-cyan: #14b8d4;
    --pk-cyan-soft: #78e1ef;

    --pk-coral: #ff704d;
    --pk-coral-soft: #ff9a76;
}


/* =========================================================
   1. TEMPUS BRAND TYPOGRAPHY
   ========================================================= */

.pk-signature-heading {
    color: var(--pk-navy);

    font-family:
        "MV Boli",
        "Segoe Print",
        "Lucida Handwriting",
        cursive;

    font-style: normal;
    font-weight: 700;
    line-height: 1.04;
}


.pk-signature-soft {
    color: var(--pk-navy-soft);

    font-family:
        "MV Boli",
        "Segoe Print",
        "Lucida Handwriting",
        cursive;

    font-style: normal;
    font-weight: 400;
}


/* =========================================================
   2. HERO BALANCE
   Slightly smaller than previous version
   ========================================================= */

.hero-lead.pk-signature-heading {
    font-size: clamp(2.75rem, 5.15vw, 4.65rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 700;
}


.hero-script-line.pk-signature-soft {
    line-height: 1.20;
    font-weight: 400;
    letter-spacing: -0.015em;
}


/* =========================================================
   3. HERO CORAL BRUSH
   Softer + thinner
   ========================================================= */

.pk-brush {
    position: relative;
    display: inline-block;
    padding: 0 0.08em;
    color: var(--pk-navy);
    isolation: isolate;
    z-index: 1;
}


.pk-brush::after {
    content: "";
    position: absolute;

    left: -0.08em;
    right: 0.03em;
    bottom: 0.02em;

    height: 0.16em;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 112, 77, 0.72) 12%,
            rgba(255, 112, 77, 0.82) 68%,
            rgba(255, 150, 105, 0.25) 100%
        );

    border-radius: 45% 55% 40% 60%;

    transform:
        rotate(-1deg)
        skewX(-7deg);

    z-index: -1;
}


.pk-brush::before {
    content: "";
    position: absolute;

    left: -0.16em;
    right: -0.18em;
    top: 54%;

    height: 0.72em;

    transform:
        translateY(-50%)
        rotate(-1.5deg);

    background:
        linear-gradient(
            90deg,
            rgba(255, 143, 108, 0.22) 0%,
            rgba(255, 128, 87, 0.52) 10%,
            rgba(255, 112, 77, 0.68) 45%,
            rgba(255, 133, 93, 0.58) 82%,
            rgba(255, 151, 117, 0.16) 100%
        );

    clip-path: polygon(
        1% 28%,
        8% 17%,
        20% 21%,
        33% 11%,
        48% 18%,
        63% 9%,
        78% 18%,
        91% 12%,
        100% 30%,
        96% 53%,
        100% 72%,
        87% 83%,
        72% 78%,
        57% 91%,
        41% 82%,
        25% 91%,
        10% 81%,
        0% 67%,
        5% 48%
    );

    filter: blur(0.25px);
    z-index: -1;
}


/* =========================================================
   4. PKORIX CONNECTED STROKE
   Signature: Human coral -> Technology cyan
   ========================================================= */

.pk-connected {
    position: relative;
    display: inline-block;

    padding-bottom: 0.12em;
}


.pk-connected::after {
    content: "";

    position: absolute;

    left: 3%;
    bottom: -0.035em;

    width: 76%;
    height: 0.065em;

    background:
        linear-gradient(
            90deg,
            var(--pk-coral) 0%,
            #ff8d67 34%,
            #65d8e7 72%,
            var(--pk-cyan) 100%
        );

    border-radius: 999px;

    transform:
        rotate(-1deg)
        skewX(-8deg);

    transform-origin: left center;
}


.pk-connected::before {
    content: "";

    position: absolute;

    left: 78%;
    bottom: -0.095em;

    width: 0.16em;
    height: 0.16em;

    background: var(--pk-cyan);

    border: 0.035em solid white;
    border-radius: 50%;

    box-shadow:
        0 0 0 0.035em rgba(20, 184, 212, 0.16),
        0 3px 9px rgba(20, 184, 212, 0.24);

    z-index: 2;
}


/* =========================================================
   5. MAIN SECTION HEADINGS
   Clean sans + Tempus emphasis
   ========================================================= */

.pk-section-heading {
    color: var(--pk-navy);

    font-family:
        "MV Boli",
        "Segoe Print",
        "Lucida Handwriting",
        cursive;

    font-style: normal;
    font-weight: 700;

    letter-spacing: -0.025em;
    line-height: 1.08;
}


.pk-section-heading .pk-signature-soft {
    font-family:
        "MV Boli",
        "Segoe Print",
        "Lucida Handwriting",
        cursive;

    font-style: normal;
    font-weight: 400;

    letter-spacing: -0.015em;
}


/* =========================================================
   6. CENTERED SECTION VARIANT
   Cyan leads, coral finishes
   Gives modules section its own treatment
   ========================================================= */

.section-heading.centered .pk-connected::after {
    background:
        linear-gradient(
            90deg,
            var(--pk-cyan) 0%,
            #69dbea 58%,
            var(--pk-coral) 100%
        );
}


.section-heading.centered .pk-connected::before {
    background: var(--pk-coral);

    box-shadow:
        0 0 0 0.035em rgba(255, 112, 77, 0.15),
        0 3px 9px rgba(255, 112, 77, 0.22);
}


/* =========================================================
   7. PRICING
   Cleaner / technology-led stroke
   ========================================================= */

#pricing .pk-connected::after {
    background:
        linear-gradient(
            90deg,
            var(--pk-cyan) 0%,
            #54d2e5 72%,
            var(--pk-coral) 100%
        );

    width: 70%;
}


#pricing .pk-connected::before {
    left: 72%;
    background: var(--pk-coral);
}


/* =========================================================
   8. REFERRAL SIGNAL
   Cyan only ? prevents repetitive orange
   ========================================================= */

.pk-signal {
    position: relative;
    display: inline-block;

    padding-bottom: 0.10em;
}


.pk-signal::after {
    content: "";

    position: absolute;

    left: 5%;
    right: 12%;

    bottom: -0.01em;

    height: 0.06em;

    background:
        linear-gradient(
            90deg,
            rgba(20, 184, 212, 0.20) 0%,
            var(--pk-cyan) 46%,
            #70deeb 100%
        );

    border-radius: 999px;

    transform: rotate(-0.8deg);
}


/* =========================================================
   9. FEATURE TITLE NODES
   Small pKorix coral/cyan signature
   ========================================================= */

.pk-node-title {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 13px;
}


.pk-node-title::before {
    content: "";

    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    background: var(--pk-coral);

    border-radius: 50%;

    box-shadow:
        13px 0 0 -2px var(--pk-cyan);
}


/* =========================================================
   10. FINAL CTA
   Tempus comes back strongly at the end
   ========================================================= */

.final-cta .pk-signature-heading {
    color: var(--pk-navy);

    font-weight: 700;
}


.final-cta .pk-connected {
    color: var(--pk-navy);
}


.final-cta .pk-connected::after {
    background:
        linear-gradient(
            90deg,
            var(--pk-coral) 0%,
            #ff8a61 36%,
            #5bd7e8 76%,
            var(--pk-cyan) 100%
        );

    height: 0.07em;
}


.final-cta .pk-connected::before {
    border-color: #0b1f54;
}


/* =========================================================
   11. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .hero-lead.pk-signature-heading {
        font-size: clamp(2.35rem, 10vw, 3.55rem);
    }

    .pk-brush::after {
        height: 0.21em;
    }

    .pk-connected::after {
        width: 72%;
    }

    .pk-connected::before {
        left: 74%;
    }

    #pricing .pk-connected::after {
        width: 66%;
    }

    #pricing .pk-connected::before {
        left: 68%;
    }
}




/* PKORIX SECTION COLOR LANGUAGE
   Each major section gets its own controlled accent.
   No wording/layout changes.
   ========================================================= */


/* ---------------------------------------------------------
   1. MODULES
   Cyan wash + violet/cyan connection
   --------------------------------------------------------- */

.modules-section .pk-signature-soft.pk-connected {
    color: #173b66;

    padding:
        0.01em 0.12em
        0.05em;

    background:
        radial-gradient(
            ellipse at 22% 55%,
            rgba(73, 210, 230, 0.20),
            transparent 60%
        ),
        radial-gradient(
            ellipse at 76% 48%,
            rgba(124, 92, 255, 0.13),
            transparent 62%
        );

    border-radius:
        42% 58% 47% 53% /
        55% 43% 57% 45%;
}

.modules-section .pk-connected::after {
    background:
        linear-gradient(
            90deg,
            #16bdd7 0%,
            #57cee2 42%,
            #7c5cff 100%
        );
}

.modules-section .pk-connected::before {
    background: #7c5cff;
}


/* ---------------------------------------------------------
   2. PRICING
   Coral ink wash + cyan finish
   --------------------------------------------------------- */

#pricing .pk-signature-soft.pk-connected {
    color: #ff6547;

    padding:
        0.01em 0.12em
        0.05em;

    background:
        radial-gradient(
            ellipse at 30% 52%,
            rgba(255, 112, 77, 0.17),
            transparent 63%
        ),
        radial-gradient(
            ellipse at 75% 48%,
            rgba(255, 163, 120, 0.13),
            transparent 60%
        );

    border-radius:
        52% 48% 58% 42% /
        43% 57% 46% 54%;
}

#pricing .pk-connected::after {
    background:
        linear-gradient(
            90deg,
            #ff704d 0%,
            #ff9674 38%,
            #5cd8e8 76%,
            #14b8d4 100%
        );
}

#pricing .pk-connected::before {
    background: #14b8d4;
}


/* ---------------------------------------------------------
   3. REFERRAL
   Mint wash + teal/cyan signal
   --------------------------------------------------------- */

#referralRewardsTitle .pk-signature-soft {
    color: #087f79;

    padding:
        0.01em 0.10em
        0.04em;

    background:
        radial-gradient(
            ellipse at 36% 52%,
            rgba(72, 211, 167, 0.18),
            transparent 62%
        ),
        radial-gradient(
            ellipse at 76% 45%,
            rgba(20, 184, 212, 0.12),
            transparent 60%
        );

    border-radius:
        47% 53% 42% 58% /
        55% 42% 58% 45%;
}

#referralRewardsTitle .pk-signal::after {
    background:
        linear-gradient(
            90deg,
            #47cfa6 0%,
            #26c9bc 44%,
            #14b8d4 100%
        );
}


/* ---------------------------------------------------------
   4. JOURNEY
   Lavender wash + violet/cyan line
   --------------------------------------------------------- */

.about-section .pk-signature-soft.pk-connected {
    color: #473a88;

    padding:
        0.01em 0.12em
        0.05em;

    background:
        radial-gradient(
            ellipse at 32% 50%,
            rgba(129, 103, 255, 0.16),
            transparent 62%
        ),
        radial-gradient(
            ellipse at 78% 48%,
            rgba(56, 199, 225, 0.10),
            transparent 62%
        );

    border-radius:
        55% 45% 50% 50% /
        44% 58% 42% 56%;
}

.about-section .pk-connected::after {
    background:
        linear-gradient(
            90deg,
            #8068ef 0%,
            #637be9 45%,
            #14b8d4 100%
        );
}

.about-section .pk-connected::before {
    background: #14b8d4;
}


/* ---------------------------------------------------------
   5. FINAL CTA
   Fix white text + premium blue/lilac wash
   --------------------------------------------------------- */

.final-cta .pk-signature-heading {
    color: #10285f;
}

.final-cta .pk-connected {
    color: #263c7c;

    padding:
        0.01em 0.12em
        0.06em;

    background:
        radial-gradient(
            ellipse at 24% 50%,
            rgba(87, 208, 230, 0.20),
            transparent 62%
        ),
        radial-gradient(
            ellipse at 72% 48%,
            rgba(131, 105, 245, 0.15),
            transparent 62%
        );

    border-radius:
        45% 55% 58% 42% /
        54% 44% 56% 46%;
}

.final-cta .pk-connected::after {
    height: 0.065em;

    background:
        linear-gradient(
            90deg,
            #7b61e8 0%,
            #557ddd 30%,
            #13bdd5 66%,
            #ff7656 100%
        );
}

.final-cta .pk-connected::before {
    background: #ff7656;
    border-color: #dff8fb;
}


/* Mobile keeps washes subtle */
@media (max-width: 768px) {

    .modules-section .pk-signature-soft.pk-connected,
    #pricing .pk-signature-soft.pk-connected,
    #referralRewardsTitle .pk-signature-soft,
    .about-section .pk-signature-soft.pk-connected,
    .final-cta .pk-connected {
        padding-left: 0.06em;
        padding-right: 0.06em;
    }
}


/* END PKORIX SECTION COLOR LANGUAGE */




/* PKORIX MAJOR HEADING MV BOLI
   Major marketing headings only.
   Product UI, cards, buttons and navigation stay sans-serif.
   ========================================================= */

#referralRewardsTitle,
.final-cta h2 {
    font-family:
        "MV Boli",
        "Segoe Print",
        "Lucida Handwriting",
        cursive;

    font-style: normal;
    font-weight: 700;

    letter-spacing: -0.025em;
    line-height: 1.10;
}


/* Referral supporting phrase stays lighter */
#referralRewardsTitle .pk-signature-soft {
    font-family:
        "MV Boli",
        "Segoe Print",
        "Lucida Handwriting",
        cursive;

    font-style: normal;
    font-weight: 400;
}


/* Final CTA remains readable on pale background */
.final-cta h2 {
    color: var(--pk-navy);
}


/* Mobile balance */
@media (max-width: 768px) {

    .pk-section-heading,
    #referralRewardsTitle,
    .final-cta h2 {
        line-height: 1.14;
        letter-spacing: -0.015em;
    }
}

/* END PKORIX MAJOR HEADING MV BOLI */


/* END PKORIX SIGNATURE HEADING SYSTEM */




/* =========================================================
   PKORIX MODULE MORE CARD
   ========================================================= */

.module-card-more {
    grid-column: 1 / -1;

    min-height: 125px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 28px 34px;

    border: 1px solid rgba(20, 184, 212, 0.22);
    border-radius: 18px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(20, 184, 212, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 76% 90%,
            rgba(124, 92, 255, 0.08),
            transparent 32%
        ),
        linear-gradient(
            120deg,
            #ffffff 0%,
            #f6fdff 60%,
            #eefbff 100%
        );

    box-shadow:
        0 12px 34px rgba(31, 78, 120, 0.05);
}


.module-more-copy h3 {
    margin: 0 0 8px;

    color: var(--pk-navy);

    font-family:
        "MV Boli",
        "Segoe Print",
        "Lucida Handwriting",
        cursive;

    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.05;
}


.module-more-copy p {
    margin: 0;

    color: var(--muted);
    font-size: 0.95rem;
}


/* Coral ? Violet ? Cyan connection nodes */

.module-more-mark {
    display: flex;
    align-items: center;
    gap: 14px;

    padding-right: 10px;
}


.module-more-mark span {
    display: block;
    border-radius: 50%;
}


.module-more-mark span:nth-child(1) {
    width: 9px;
    height: 9px;

    background: #ff704d;
}


.module-more-mark span:nth-child(2) {
    width: 13px;
    height: 13px;

    background: #7c5cff;
}


.module-more-mark span:nth-child(3) {
    width: 18px;
    height: 18px;

    background: #14b8d4;

    box-shadow:
        0 0 0 7px rgba(20, 184, 212, 0.10);
}


@media (max-width: 768px) {

    .module-card-more {
        min-height: auto;

        padding: 24px;

        gap: 24px;
    }

    .module-more-copy h3 {
        font-size: 1.55rem;
    }

    .module-more-mark {
        gap: 9px;
    }
}

/* END PKORIX MODULE MORE CARD */


/* PKORIX BOOK DEMO MODAL START */

.pk-demo-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 24px;
}

.pk-demo-modal.is-open {
    display: flex;
}

.pk-demo-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(10, 24, 45, .48);

    backdrop-filter:
        blur(6px);
}

.pk-demo-dialog {
    position: relative;
    z-index: 2;

    width: min(100%, 720px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;

    padding: 36px;

    border: 1px solid #dfecef;
    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fbfeff
        );

    box-shadow:
        0 35px 90px
        rgba(15, 35, 65, .24);

    transform:
        translateY(14px)
        scale(.975);

    opacity: 0;

    animation:
        pkDemoOpen
        .26s ease forwards;
}

.pk-demo-close {
    position: absolute;
    top: 17px;
    right: 18px;

    width: 36px;
    height: 36px;

    border: 0;
    border-radius: 50%;

    background: #f2f7f8;
    color: #53677e;

    cursor: pointer;

    font-size: 23px;
    line-height: 1;
}

.pk-demo-eyebrow {
    display: inline-block;

    color: #0da7b8;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.pk-demo-head h2 {
    margin: 9px 0 8px;

    color: #111827;

    font-family:
        "MV Boli",
        "Segoe Print",
        cursive;

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

    line-height: 1.15;
}

.pk-demo-head p {
    max-width: 570px;

    margin: 0 0 27px;

    color: #718096;

    font-size: 13px;
    line-height: 1.65;
}

.pk-demo-grid {
    display: grid;

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

    gap: 16px;
}

.pk-demo-form label > span {
    display: block;

    margin-bottom: 7px;

    color: #263446;

    font-size: 11px;
    font-weight: 800;
}

.pk-demo-form input,
.pk-demo-form select,
.pk-demo-form textarea {
    width: 100%;

    border: 1px solid #dce8ec;
    border-radius: 11px;

    outline: 0;

    background: #fbfdfe;

    color: #18273e;

    font: inherit;
    font-size: 13px;

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.pk-demo-form input,
.pk-demo-form select {
    min-height: 48px;

    padding:
        0 13px;
}

.pk-demo-form textarea {
    padding: 13px;

    resize: vertical;
}

.pk-demo-form input:focus,
.pk-demo-form select:focus,
.pk-demo-form textarea:focus {
    border-color: #17bfd0;

    background: #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(23,191,208,.10);
}

.pk-demo-message {
    display: block;

    margin-top: 17px;
}

.pk-demo-actions {
    display: flex;
    justify-content: flex-end;

    gap: 10px;

    margin-top: 22px;
}

.pk-demo-cancel,
.pk-demo-submit {
    min-height: 48px;

    padding:
        0 20px;

    border-radius: 11px;

    cursor: pointer;

    font-size: 12.5px;
    font-weight: 850;
}

.pk-demo-cancel {
    border:
        1px solid #dfe8ec;

    background:
        #ffffff;

    color:
        #53677e;
}

.pk-demo-submit {
    border:
        1px solid #13bdd1;

    color:
        #ffffff;

    background:
        linear-gradient(
            100deg,
            #13b8d4,
            #13c6d8 50%,
            #20d1df
        );

    box-shadow:
        0 10px 24px
        rgba(19,190,211,.18);
}

.pk-demo-submit span {
    margin-left: 7px;
}

.pk-demo-note {
    margin:
        13px 0 0;

    text-align:
        right;

    color:
        #98a5b3;

    font-size:
        9.5px;
}

body.pk-demo-open {
    overflow: hidden;
}

@keyframes pkDemoOpen {

    from {
        opacity: 0;

        transform:
            translateY(14px)
            scale(.975);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@media (max-width: 650px) {

    .pk-demo-modal {
        padding: 12px;
    }

    .pk-demo-dialog {
        padding:
            29px 19px 24px;

        border-radius:
            20px;
    }

    .pk-demo-grid {
        grid-template-columns:
            1fr;
    }

    .pk-demo-actions {
        flex-direction: column-reverse;
    }

    .pk-demo-cancel,
    .pk-demo-submit {
        width: 100%;
    }
}

/* PKORIX BOOK DEMO MODAL END */


/* PKORIX BOOK DEMO HEADING COLOR */

#pkDemoTitle {
    color: #111827;
}

#pkDemoTitle .pk-demo-brand {
    color: #ff704d;
    font-weight: 700;
}

#pkDemoTitle .pk-demo-action {
    color: #13b8d4;
    font-weight: 700;
}

/* PKORIX BOOK DEMO HEADING COLOR END */


/* PKORIX ABOUT EXPERIENCE START */

.pk-about-section {
    position: relative;
    overflow: hidden;
    padding: 105px 0 112px;

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(19, 190, 211, .07),
            transparent 24%
        ),
        radial-gradient(
            circle at 8% 82%,
            rgba(124, 92, 255, .055),
            transparent 26%
        ),
        #ffffff;
}


.pk-about-container {
    display: grid;

    grid-template-columns:
        minmax(300px, .82fr)
        minmax(0, 1.18fr);

    gap: clamp(55px, 7vw, 105px);

    align-items: start;
}


.pk-about-intro {
    position: sticky;
    top: 110px;
}


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

    margin-bottom: 17px;

    color: #0da7b8;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.7px;
}


/* =====================================================
   MAIN ABOUT STATEMENT
   ===================================================== */

.pk-about-heading {
    max-width: 550px;
    margin: 0;

    line-height: 1;
}


.pk-about-heading-main {
    display: block;

    color: #111827;

    font-size:
        clamp(39px, 4.15vw, 59px);

    font-weight: 800;

    line-height: 1.04;

    letter-spacing: -2.4px;
}


.pk-about-moving {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: .20em;

    margin-top: 8px;

    font-family:
        "MV Boli",
        "Segoe Print",
        "Lucida Handwriting",
        cursive;

    font-style: normal;
    font-weight: 400;

    font-size:
        clamp(40px, 4.35vw, 63px);

    line-height: 1.04;

    letter-spacing: -1.4px;

    transform:
        rotate(-1deg);

    transform-origin:
        left center;
}


.pk-about-moving-word {
    color: #ff704d;
}


.pk-about-parts-word {
    color: #13b8d4;
}


.pk-about-motion-mark {
    width: min(245px, 70%);

    display: flex;
    align-items: center;

    margin:
        17px 0 3px 5px;
}


.pk-about-motion-mark span {
    height: 3px;

    flex: 1;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #7659d9 0%,
            #13b8d4 100%
        );
}


.pk-about-motion-mark i {
    width: 9px;
    height: 9px;

    margin-left: -2px;

    border-radius: 50%;

    background: #13b8d4;

    box-shadow:
        0 0 0 4px
        rgba(19,184,212,.11);
}


.pk-about-handwritten {
    font-family:
        "MV Boli",
        "Segoe Print",
        "Lucida Handwriting",
        cursive;

    font-style: normal;
}


.pk-about-coral {
    max-width: 500px;

    margin: 27px 0 0;

    color: #173f8f;

    font-size:
        clamp(25px, 2.5vw, 36px);

    line-height: 1.25;

    transform:
        rotate(-1deg);
}


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

.pk-about-story {
    max-width: 720px;
}


.pk-about-story > p {
    margin: 0 0 25px;

    color: #65748a;

    font-size: 16px;
    line-height: 1.85;
}


.pk-about-statement strong {
    color: #111827;

    font-size: 19px;
}


/* =====================================================
   THE QUESTION
   ===================================================== */

.pk-about-question {
    position: relative;

    overflow: hidden;

    margin: 35px 0;

    padding:
        31px 40px 32px 43px;

    border:
        1px solid #e3ebef;

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 91% 13%,
            rgba(19,184,212,.055),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #fbfeff
        );

    box-shadow:
        0 18px 48px
        rgba(24,54,88,.065);
}


.pk-about-question::before {
    content: "";

    position: absolute;

    top: 24px;
    bottom: 24px;
    left: 0;

    width: 4px;

    border-radius:
        0 999px 999px 0;

    background:
        linear-gradient(
            180deg,
            #7659d9 0%,
            #13b8d4 100%
        );
}


.pk-about-question::after {
    content: "“";

    position: absolute;

    top: -25px;
    right: 23px;

    color:
        rgba(19,184,212,.08);

    font-family:
        Georgia,
        serif;

    font-size: 150px;
    line-height: 1;

    pointer-events: none;
}


.pk-about-question-eyebrow {
    position: relative;
    z-index: 2;

    display: inline-block;

    margin-bottom: 18px;

    color: #0da7b8;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.6px;
}


.pk-about-question p {
    position: relative;
    z-index: 2;

    margin: 0;
}


.pk-about-question-old {
    color: #79879a;

    font-size: 14.5px;

    line-height: 1.7;
}


.pk-about-question-old span {
    color: #64748b;
}


.pk-about-question-lead {
    margin-top: 19px !important;

    color: #65748a;

    font-size: 14px;
}


.pk-about-question-focus {
    margin-top: 5px !important;
}


.pk-about-question-focus strong {
    display: block;

    color: #111827;

    font-size:
        clamp(18px, 1.55vw, 22px);

    font-weight: 850;

    line-height: 1.35;
}


.pk-about-question-script {
    display: block;

    margin-top: 4px;

    color: #7659d9;

    font-family:
        "MV Boli",
        "Segoe Print",
        "Lucida Handwriting",
        cursive;

    font-size:
        clamp(25px, 2.25vw, 33px);

    font-style: normal;
    font-weight: 400;

    line-height: 1.28;

    transform:
        rotate(-.6deg);

    transform-origin:
        left center;
}


/* =====================================================
   BELIEF
   ===================================================== */

.pk-about-belief {
    margin-top: 35px;
    padding-top: 31px;

    border-top:
        1px solid #e8eef1;
}


.pk-about-belief > span {
    color: #65748a;

    font-size: 16px;
    line-height: 1.75;
}


.pk-about-belief > span strong {
    color: #111827;
}


.pk-about-cyan {
    margin: 13px 0 0;

    color: #13b8d4;

    font-size:
        clamp(24px, 2.45vw, 35px);

    line-height: 1.3;
}


/* =====================================================
   CLOSING
   ===================================================== */

.pk-about-closing {
    margin-top: 39px;

    display: flex;
    flex-direction: column;

    gap: 7px;
}


.pk-about-closing > strong {
    color: #111827;

    font-size: 20px;
}


.pk-about-closing-line {
    color: #7659d9;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        clamp(21px, 2vw, 29px);

    font-weight: 800;

    line-height: 1.28;

    letter-spacing: -.35px;
}


.pk-about-tagline {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 37px;

    color: #173f8f;

    font-size: 12px;
    font-weight: 850;

    letter-spacing: 1.2px;
}


.pk-about-tagline i {
    width: 32px;
    height: 2px;

    border-radius: 999px;

    background: #ff704d;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 900px) {

    .pk-about-section {
        padding: 80px 0;
    }

    .pk-about-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .pk-about-intro {
        position: static;
    }

    .pk-about-heading {
        max-width: 680px;
    }

}


@media (max-width: 620px) {

    .pk-about-section {
        padding:
            65px 0 72px;
    }

    .pk-about-heading-main {
        font-size: 38px;

        letter-spacing:
            -1.7px;
    }

    .pk-about-moving {
        font-size: 40px;
    }

    .pk-about-motion-mark {
        width: 190px;
    }

    .pk-about-coral,
    .pk-about-cyan {
        font-size: 25px;
    }

    .pk-about-closing-line {
        font-size: 22px;
    }

    .pk-about-question {
        padding:
            25px 22px 25px 28px;
    }

    .pk-about-question::after {
        right: 7px;

        font-size: 110px;
    }

    .pk-about-question-script {
        font-size: 25px;
    }

    .pk-about-story > p,
    .pk-about-belief > span {
        font-size: 14px;
    }

}

/* PKORIX ABOUT EXPERIENCE END */