/*
 * Production art direction
 * The structural and accessibility layer is shared with wireframe.css.
 */

:root {
  --navy-950: #041628;
  --navy-900: #08243f;
  --navy-800: #103858;
  --blue-700: #0f54ca;
  --blue-600: #1769e8;
  --blue-500: #4b8df2;
  --blue-100: #dceafe;
  --blue-50: #f0f6ff;
  --gold: #c3a060;
  --gold-soft: #eadfc9;
  --ink: #102338;
  --muted: #526478;
  --line: #d9e1ea;
  --surface: #ffffff;
  --off-white: #f5f8fc;
  --warm: #f5f1e9;
  --shadow: 0 30px 80px rgb(5 29 52 / 12%);
}

html {
  scroll-padding-top: 90px;
}

.production-site {
  overflow-x: clip;
  background:
    linear-gradient(180deg, #f8fbff 0, #fff 24rem);
}

.production-site ::selection {
  color: white;
  background: var(--blue-600);
}

.site-header {
  border-color: rgb(14 49 82 / 8%);
  background: rgb(255 255 255 / 86%);
  box-shadow: 0 1px 0 rgb(4 22 40 / 4%);
  backdrop-filter: saturate(145%) blur(22px);
}

.site-header.is-scrolled {
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 14px 44px rgb(4 22 40 / 10%);
}

.header-inner {
  min-height: 82px;
}

.brand {
  gap: 13px;
  color: #10283e;
  letter-spacing: 0.035em;
}

.brand img {
  width: 32px;
  height: 29px;
}

.site-nav {
  gap: clamp(17px, 1.8vw, 29px);
  color: #24394f;
  font-size: 13px;
}

.nav-cta,
.mobile-consult {
  min-height: 48px;
  padding-inline: 22px;
  border-radius: 2px;
  background: linear-gradient(135deg, #1769e8, #0e55cc);
  box-shadow: 0 10px 26px rgb(23 105 232 / 18%);
}

.hero {
  isolation: isolate;
  min-height: calc(100svh - 82px);
  border-bottom: 1px solid rgb(16 56 88 / 9%);
  background:
    radial-gradient(circle at 15% 15%, rgb(255 255 255 / 95%), transparent 32%),
    linear-gradient(135deg, #f9fbfe 0%, #f1f6fc 55%, #edf3fa 100%);
}

.hero::after {
  width: max(39%, calc((100vw - 1180px) / 2 + 465px));
  background:
    radial-gradient(circle at 52% 48%, rgb(53 137 255 / 28%), transparent 22%),
    radial-gradient(circle at 45% 55%, rgb(195 160 96 / 9%), transparent 43%),
    linear-gradient(145deg, #0a2a46 0%, #041628 58%, #03111f 100%);
}

.hero::before {
  position: absolute;
  z-index: 1;
  inset: auto 38% 0 0;
  height: 170px;
  content: "";
  background: linear-gradient(to top, rgb(238 244 251 / 88%), transparent);
  pointer-events: none;
}

.hero-grid {
  opacity: 0.72;
  background-image:
    linear-gradient(rgb(35 91 148 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(35 91 148 / 7%) 1px, transparent 1px);
  background-size: 64px 64px;
}

.hero-layout {
  min-height: max(760px, calc(100svh - 82px));
  padding-block: 68px 88px;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.industry-label {
  margin-bottom: 22px;
  color: #0f54ca;
  font-size: 12px;
  letter-spacing: 0.055em;
}

.industry-label b {
  font: inherit;
  white-space: nowrap;
}

.hero h1 {
  margin-bottom: 25px;
  text-wrap: balance;
}

.hero h1 em {
  color: #1769e8;
  text-shadow: 0 10px 32px rgb(23 105 232 / 10%);
}

.hero h1 em::after {
  bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0 18%, var(--blue-600) 18% 66%, transparent);
  transform: scaleX(0.92);
  transform-origin: left;
}

.hero-lead {
  color: #42566c;
  font-size: 17px;
}

.button {
  border-radius: 2px;
}

.button--primary {
  background: linear-gradient(135deg, #1769e8, #0f55ce);
  box-shadow: 0 15px 35px rgb(23 105 232 / 20%);
}

.button--secondary {
  border-color: #cbd5e1;
  background: rgb(255 255 255 / 72%);
  backdrop-filter: blur(8px);
}

.hero-assurance {
  color: #5a6a7b;
}

.hero-visual {
  filter: drop-shadow(0 28px 55px rgb(0 0 0 / 22%));
}

.hero-visual figcaption {
  position: relative;
  z-index: 4;
}

.concept-map {
  transform: translateZ(0);
}

.concept-ring {
  border-color: rgb(107 160 221 / 24%);
}

.concept-ring--inner {
  border-color: rgb(108 174 247 / 34%);
  box-shadow:
    inset 0 0 45px rgb(33 111 207 / 8%),
    0 0 50px rgb(24 108 218 / 6%);
}

.concept-line {
  background: linear-gradient(90deg, rgb(195 160 96 / 82%), rgb(112 170 237 / 48%));
}

.concept-node {
  border-color: rgb(126 177 233 / 39%);
  background: linear-gradient(145deg, rgb(21 62 97 / 94%), rgb(6 32 55 / 94%));
  box-shadow:
    0 18px 42px rgb(0 0 0 / 25%),
    inset 0 1px 0 rgb(255 255 255 / 7%);
  backdrop-filter: blur(10px);
}

.concept-core {
  background:
    radial-gradient(circle at 42% 35%, rgb(91 163 255 / 70%), transparent 48%),
    linear-gradient(145deg, #1b68c8, #0c3965);
  box-shadow:
    0 0 0 15px rgb(59 127 205 / 8%),
    0 0 80px rgb(45 135 242 / 35%);
}

.moving-point {
  box-shadow:
    0 0 0 6px rgb(195 160 96 / 11%),
    0 0 24px rgb(234 205 143 / 65%);
}

.hero-ambient {
  position: absolute;
  z-index: 1;
  inset: 0 0 0 62%;
  overflow: hidden;
  pointer-events: none;
}

.hero-ambient i {
  position: absolute;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #76b4ff;
  box-shadow: 0 0 18px #65a9ff;
  animation: ambient-float 8s ease-in-out infinite;
}

.hero-ambient i:nth-child(1) {
  top: 22%;
  left: 20%;
}

.hero-ambient i:nth-child(2) {
  top: 68%;
  left: 76%;
  animation-delay: -2.8s;
}

.hero-ambient i:nth-child(3) {
  top: 48%;
  left: 48%;
  width: 4px;
  height: 4px;
  animation-delay: -5.3s;
}

.hero-scroll {
  position: absolute;
  z-index: 5;
  bottom: 22px;
  left: max(24px, calc((100vw - 1180px) / 2));
  display: flex;
  align-items: center;
  gap: 12px;
  color: #66778a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.hero-scroll span {
  width: 42px;
  height: 1px;
  overflow: hidden;
  background: #cbd5df;
}

.hero-scroll span::after {
  display: block;
  width: 55%;
  height: 100%;
  content: "";
  background: var(--blue-600);
  animation: scroll-line 2.4s ease-in-out infinite;
}

.issues {
  background:
    linear-gradient(rgb(17 76 128 / 3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(17 76 128 / 3%) 1px, transparent 1px),
    white;
  background-size: 80px 80px;
}

.issue-entry-grid {
  gap: 2px;
  padding: 2px;
  background: #d7e0e9;
  box-shadow: 0 28px 70px rgb(15 48 79 / 8%);
}

.issue-entry-grid a {
  border: 0;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 99%), rgb(247 250 254 / 98%));
}

.issue-entry-grid a::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: linear-gradient(var(--blue-600), var(--gold));
  transform: scaleY(0);
  transition: transform 200ms ease;
}

.issue-entry-grid a:hover::before,
.issue-entry-grid a:focus-visible::before {
  transform: scaleY(1);
}

.services {
  background:
    radial-gradient(circle at 92% 12%, rgb(35 110 219 / 6%), transparent 24%),
    var(--off-white);
}

.service-group {
  overflow: hidden;
  border: 1px solid #d8e1eb;
  background: rgb(255 255 255 / 76%);
  box-shadow: 0 22px 60px rgb(14 43 70 / 6%);
  backdrop-filter: blur(8px);
}

.service-group--consult {
  border-color: #274b6e;
  background:
    radial-gradient(circle at 86% 25%, rgb(39 110 204 / 21%), transparent 32%),
    linear-gradient(145deg, #0d3454, #061b31);
}

.service-group--support {
  border-color: #ded3c0;
  background: linear-gradient(135deg, #f7f2e9, #f0e9dc);
}

.service-item {
  background: rgb(255 255 255 / 92%);
}

.service-group--consult .service-item {
  color: white;
  border-color: rgb(255 255 255 / 22%);
  background: rgb(255 255 255 / 5%);
}

.service-item:hover,
.service-item:focus-visible {
  box-shadow: 0 18px 40px rgb(9 43 75 / 13%);
}

.crm {
  background:
    radial-gradient(circle at 12% 20%, rgb(42 123 226 / 24%), transparent 30%),
    radial-gradient(circle at 88% 84%, rgb(195 160 96 / 10%), transparent 28%),
    linear-gradient(140deg, #0b3355, #04182a 60%, #031321);
}

.crm-layout {
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(44px, 5vw, 62px);
}

.crm h2 {
  font-size: clamp(40px, 3.5vw, 50px);
}

.crm-line {
  white-space: nowrap;
}

.crm-grid {
  opacity: 0.23;
}

.demo-device {
  border-color: #496989;
  background: #102e4a;
  box-shadow:
    0 42px 90px rgb(0 0 0 / 34%),
    0 0 0 10px rgb(255 255 255 / 3%);
}

.demo-main {
  background:
    radial-gradient(circle at 75% 0, rgb(43 113 210 / 8%), transparent 35%),
    #f6f8fb;
}

.demo-kpis span,
.demo-chart,
.demo-ai,
.demo-table {
  box-shadow: 0 8px 22px rgb(9 45 76 / 6%);
}

.proof {
  background:
    radial-gradient(circle at 9% 48%, rgb(195 160 96 / 7%), transparent 25%),
    white;
}

.tool-proof {
  border: 1px solid #ded5c5;
  background:
    linear-gradient(145deg, rgb(250 247 241 / 98%), rgb(244 238 227 / 96%));
  box-shadow: 0 26px 62px rgb(81 61 29 / 10%);
}

.tool-window {
  box-shadow:
    0 30px 70px rgb(39 55 71 / 16%),
    0 0 0 1px rgb(255 255 255 / 70%);
}

.principles article {
  transition:
    background 180ms ease,
    transform 180ms ease;
}

.principles article:hover {
  background: #f8fbff;
  transform: translateX(4px);
}

.trust-strip {
  box-shadow: 0 22px 60px rgb(8 39 67 / 7%);
}

.three-piece-statement {
  border: 1px solid #dbe3eb;
  background:
    radial-gradient(circle at 90% 50%, rgb(29 102 211 / 9%), transparent 28%),
    linear-gradient(110deg, #f7fafc, #eef4fb);
}

.process {
  background:
    linear-gradient(180deg, #f4f8fd, #eef4fa);
}

.process-list {
  padding: 1px;
  gap: 1px;
  background: #d6e0ea;
}

.process-list li {
  border: 0 !important;
  background: white;
}

.process-list li::after {
  position: absolute;
  right: -12px;
  top: 50%;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: 1px solid #d5e0eb;
  border-radius: 50%;
  color: var(--blue-600);
  content: "›";
  background: white;
  line-height: 20px;
  text-align: center;
}

.process-list li:nth-child(3)::after,
.process-list li:nth-child(6)::after {
  display: none;
}

.support-panel {
  box-shadow: 0 30px 70px rgb(6 28 48 / 18%);
}

.faq {
  background: white;
}

.faq-list details {
  transition: background 180ms ease;
}

.faq-list details[open] {
  background: #f5f9ff;
}

.hearing {
  background:
    radial-gradient(circle at 20% 20%, rgb(89 159 255 / 19%), transparent 34%),
    radial-gradient(circle at 80% 100%, rgb(195 160 96 / 9%), transparent 28%),
    linear-gradient(135deg, #0d4f9f, #0b3770 50%, #061f3b);
}

.hearing-preview {
  border: 1px solid rgb(255 255 255 / 32%);
  box-shadow:
    0 38px 90px rgb(0 0 0 / 24%),
    0 0 0 10px rgb(255 255 255 / 3%);
}

.hearing-options label {
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.hearing-options label:hover {
  transform: translateY(-1px);
}

.company {
  background:
    linear-gradient(90deg, rgb(25 89 151 / 4%) 1px, transparent 1px),
    white;
  background-size: 96px 96px;
}

.site-footer {
  background:
    radial-gradient(circle at 75% 0, rgb(37 107 187 / 12%), transparent 28%),
    var(--navy-950);
}

@keyframes ambient-float {
  0%,
  100% {
    opacity: 0.35;
    transform: translate3d(0, 0, 0) scale(0.8);
  }

  50% {
    opacity: 1;
    transform: translate3d(14px, -18px, 0) scale(1.15);
  }
}

@keyframes scroll-line {
  0% {
    transform: translateX(-110%);
  }

  55%,
  100% {
    transform: translateX(190%);
  }
}

@media (max-width: 1120px) {
  .process-list li:nth-child(3)::after {
    display: block;
  }

  .process-list li:nth-child(3n)::after {
    display: none;
  }
}

@media (max-width: 900px) {
  html {
    scroll-padding-top: 82px;
  }

  .header-inner {
    min-height: 72px;
  }

  .hero {
    min-height: auto;
  }

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

  .crm-line {
    white-space: normal;
  }

  .hero::before {
    display: none;
  }

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

  .hero-scroll {
    display: none;
  }

  .hero-ambient {
    inset: auto 0 0;
    height: 340px;
  }

  .process-list li::after {
    display: none !important;
  }
}

@media (max-width: 620px) {
  .production-site {
    background: white;
  }

  .hero {
    background: #f6f9fd;
  }

  .hero::after {
    background:
      radial-gradient(circle at 50% 42%, rgb(63 141 242 / 25%), transparent 27%),
      linear-gradient(145deg, #082944, #031625);
  }

  .hero-layout {
    padding-top: 54px;
  }

  .industry-label {
    line-height: 1.8;
  }

  .hero-ambient {
    height: 290px;
  }

  .issue-entry-grid a::before {
    width: 2px;
  }

  .service-group {
    box-shadow: 0 15px 38px rgb(14 43 70 / 7%);
  }

  .process-list {
    background: #d6e0ea;
  }

  .hearing-preview {
    box-shadow: 0 28px 65px rgb(0 0 0 / 20%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ambient i,
  .hero-scroll span::after {
    animation: none;
  }
}