/* PRO PATH Marketing Website — Phase 1 */
:root {
  --wcm-bg: #070b12;
  --wcm-surface: #0f172a;
  --wcm-surface-glass: rgba(15, 23, 42, 0.72);
  --wcm-border: rgba(56, 189, 248, 0.18);
  --wcm-text: #e8edf5;
  --wcm-muted: #94a3b8;
  --wcm-accent: #22d3ee;
  --wcm-accent-dim: #0891b2;
  --wcm-glow: 0 0 40px rgba(34, 211, 238, 0.15);
  --wcm-radius: 14px;
  --wcm-container: min(1200px, calc(100% - 2rem));
  --wcm-header-h: 72px;
  --wcm-font: "Segoe UI", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--wcm-bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.wcm-body {
  margin: 0;
  font-family: var(--wcm-font);
  color: var(--wcm-text);
  background: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(8, 145, 178, 0.18), transparent 55%), var(--wcm-bg);
  line-height: 1.6;
  overflow-x: hidden;
}
.wcm-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.wcm-container { width: var(--wcm-container); margin-inline: auto; }

/* Preview banner */
.wcm-preview-banner {
  position: sticky; top: 0; z-index: 200;
  background: #7c2d12; color: #fff; text-align: center; padding: .6rem 1rem; font-size: .9rem;
}
.wcm-preview-banner a { color: #fde68a; margin-left: .75rem; }

/* Header */
.wcm-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--wcm-header-h);
  background: rgba(7, 11, 18, 0.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--wcm-border);
}
.wcm-header__inner {
  width: var(--wcm-container); margin-inline: auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.wcm-header__logo { height: 36px; width: auto; display: block; }
.wcm-nav__list { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.wcm-nav__link {
  color: var(--wcm-muted); text-decoration: none; font-size: .82rem; font-weight: 500;
  padding: .45rem .65rem; border-radius: 8px; transition: color .15s, background .15s;
}
.wcm-nav__link:hover, .wcm-nav__link:focus-visible { color: var(--wcm-text); background: rgba(34,211,238,.08); outline: none; }
.wcm-nav__link--cta {
  background: linear-gradient(135deg, var(--wcm-accent-dim), var(--wcm-accent));
  color: #041018 !important; font-weight: 700;
}
.wcm-header__menu-toggle {
  display: none; background: transparent; border: 1px solid var(--wcm-border);
  border-radius: 8px; width: 44px; height: 44px; padding: 0; cursor: pointer;
}
.wcm-header__menu-toggle span {
  display: block; width: 18px; height: 2px; background: var(--wcm-text); margin: 4px auto;
}

/* Hero */
.wcm-main { padding-top: var(--wcm-header-h); }
.wcm-hero {
  position: relative; min-height: calc(100vh - var(--wcm-header-h)); min-height: calc(100dvh - var(--wcm-header-h));
  display: grid; align-items: center; overflow: hidden;
}
.wcm-hero--free-overlay {
  display: block;
}
.wcm-hero__media { position: absolute; inset: 0; }
.wcm-hero__media .wcm-image, .wcm-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%;
}
.wcm-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(7,11,18,.92) 0%, rgba(7,11,18,.75) 45%, rgba(7,11,18,.35) 100%);
}
.wcm-hero--overlay-dark-blue .wcm-hero__overlay {
  background: linear-gradient(105deg, rgba(7,16,35,.94) 0%, rgba(8,47,73,.62) 42%, rgba(7,11,18,.18) 68%, rgba(7,11,18,.08) 100%);
}
.wcm-hero--overlay-left-to-right.wcm-hero--overlay-dark-blue .wcm-hero__overlay {
  background: linear-gradient(100deg, rgba(7,16,35,.96) 0%, rgba(7,22,45,.88) 28%, rgba(8,47,73,.45) 48%, rgba(7,11,18,.12) 62%, transparent 72%);
}
.wcm-hero__grid-motif {
  position: absolute; inset: 0; opacity: .35;
  background-image:
    linear-gradient(rgba(34,211,238,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to right, black 0%, black 45%, transparent 75%);
}
.wcm-hero__content {
  position: relative; z-index: 2; width: var(--wcm-container); margin-inline: auto;
  padding: 4rem 0 5rem; max-width: 720px;
}
.wcm-hero--align-left .wcm-hero__content {
  margin-inline: 0 auto 0;
  margin-left: max(6vw, 1.25rem);
  max-width: min(600px, 92vw);
  text-align: left;
}
.wcm-hero--free-overlay .wcm-hero__content {
  position: absolute;
  left: var(--hero-x, 7.5%);
  top: var(--hero-y, 48%);
  width: min(var(--hero-w, 38%), var(--hero-max, 600px));
  max-width: min(var(--hero-max, 600px), 92vw);
  min-height: var(--hero-min-h, auto);
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  text-align: left;
}
.wcm-hero--free-overlay .wcm-hero__content-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.wcm-hero--free-overlay .wcm-hero__btn-wrap {
  display: inline-flex;
}
.wcm-hero__free-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pb-section-overlay-plane,
.pb-canvas-section--free-overlay .pb-section-overlay-plane {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.wcm-hero__free-layer > .wcm-hero__widget,
.pb-section-overlay-plane > .pb-overlay-widget {
  pointer-events: auto;
}
.wcm-hero__widget--positioned {
  position: absolute;
  z-index: 4;
  max-width: min(92vw, 640px);
}
.wcm-hero__widget--richtext-overlay {
  position: absolute;
  z-index: 4;
  left: var(--rt-x, 5%);
  top: var(--rt-y, 48%);
  width: var(--rt-w, 68%);
  max-width: var(--rt-max, 800px);
  min-height: var(--rt-min-h, auto);
  transform: translateY(-50%);
  overflow: visible;
}
.wcm-hero__widget--richtext-overlay .pb-widget--rich-text {
  width: 100%;
  max-width: none;
}
.wcm-hero--free-overlay .wcm-hero__widget--positioned .wcm-btn {
  margin: 0;
}
.wcm-hero--free-overlay .wcm-hero__content-inner > .wcm-hero__btn-wrap {
  margin-top: .25rem;
}
.wcm-hero--free-overlay .wcm-btn { margin: .35rem .5rem .35rem 0; }
.wcm-rich-text :where(p, ul, ol, blockquote) { margin: 0 0 1rem; }
.wcm-rich-text :where(p:last-child, ul:last-child, ol:last-child) { margin-bottom: 0; }
.wcm-rich-text a { color: var(--wcm-accent); }
.wcm-prose:not(.wcm-rich-text--custom) { max-width: 56ch; }
.pb-widget--rich-text,
.wcm-rich-text--custom {
  max-width: none;
  width: 100%;
}
.pb-widget-with-bg {
  position: relative;
  width: 100%;
}
.pb-widget-with-bg__content {
  position: relative;
  z-index: 1;
}
.pb-widget-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.pb-widget-bg__image {
  width: 100%;
  height: 100%;
  background-image: var(--wbg-image);
  background-position: var(--wbg-position, center center);
  background-repeat: no-repeat;
  background-size: var(--wbg-size, cover);
}
.pb-widget-bg__fade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--wbg-fade, 0));
  pointer-events: none;
}
.wcm-hero__widget--richtext-overlay > .pb-widget-bg {
  border-radius: 4px;
}
.wcm-hero__widget--richtext-overlay > .pb-widget--rich-text,
.wcm-hero__widget--richtext-overlay > .pb-widget-with-bg {
  position: relative;
  z-index: 1;
}
.pb-media-display,
.pb-hero-media-display {
  position: relative;
  display: block;
  overflow: hidden;
}
.pb-media-display.pb-widget-bg--full-width .wcm-image,
.pb-media-display.pb-widget-bg--full-width .wcm-screenshot,
.pb-hero-media-display.pb-widget-bg--full-width .wcm-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.pb-media-display.pb-widget-bg--full-height .wcm-image,
.pb-media-display.pb-widget-bg--full-height .wcm-screenshot,
.pb-hero-media-display.pb-widget-bg--full-height .wcm-image {
  width: auto;
  height: 100%;
  max-height: 100vh;
  object-fit: cover;
}
.pb-media-display.pb-widget-bg--custom .wcm-image,
.pb-hero-media-display.pb-widget-bg--custom .wcm-image {
  width: var(--wbg-size);
  height: auto;
  max-width: 100%;
}
.pb-media-display .wcm-image,
.pb-media-display .wcm-screenshot,
.pb-hero-media-display .wcm-image {
  object-position: var(--wbg-position, center center);
}
.pb-section-bg .pb-widget-bg__image {
  background-size: cover;
}
.pb-media-display.pb-widget-bg--faded::after,
.pb-hero-media-display.pb-widget-bg--faded::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--wbg-fade, 0));
  pointer-events: none;
}
.pb-widget-bg--filter-grayscale .pb-widget-bg__image,
.pb-media-display.pb-widget-bg--filter-grayscale .wcm-image,
.pb-hero-media-display.pb-widget-bg--filter-grayscale .wcm-image {
  filter: grayscale(1);
}
.pb-widget-bg--filter-sepia .pb-widget-bg__image,
.pb-media-display.pb-widget-bg--filter-sepia .wcm-image,
.pb-hero-media-display.pb-widget-bg--filter-sepia .wcm-image {
  filter: sepia(0.85);
}
.pb-widget-bg--filter-dim .pb-widget-bg__image,
.pb-media-display.pb-widget-bg--filter-dim .wcm-image,
.pb-hero-media-display.pb-widget-bg--filter-dim .wcm-image {
  filter: brightness(0.65);
}
.pb-widget-bg--filter-blur .pb-widget-bg__image,
.pb-media-display.pb-widget-bg--filter-blur .wcm-image,
.pb-hero-media-display.pb-widget-bg--filter-blur .wcm-image {
  filter: blur(4px);
}
.wcm-section.pb-section-has-bg {
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.pb-section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  min-height: 100%;
}
.wcm-section.pb-section-has-bg > .wcm-container,
.wcm-section.pb-section-has-bg > .wcm-section__inner,
.wcm-section.pb-section-has-bg > :not(.pb-section-bg) {
  position: relative;
  z-index: 1;
  min-height: var(--pb-section-min-h, 0);
}
.wcm-hero--align-center .wcm-hero__content { margin-inline: auto; text-align: center; max-width: 800px; }
.wcm-eyebrow {
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--wcm-accent);
  margin: 0 0 1rem; font-weight: 600;
}
.wcm-heading--hero {
  font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.08; margin: 0 0 1.25rem;
  font-weight: 800; letter-spacing: -.02em;
}
.wcm-paragraph { color: var(--wcm-muted); font-size: 1.05rem; max-width: 56ch; margin: 0 0 1.75rem; }
.wcm-status-line {
  margin-top: 2rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(34,211,238,.85); font-weight: 600;
}
.wcm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 1.25rem; border-radius: 10px; font-weight: 600; text-decoration: none;
  font-size: .92rem; margin: .25rem .5rem .25rem 0; border: 1px solid transparent;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.wcm-btn:focus-visible { outline: 2px solid var(--wcm-accent); outline-offset: 2px; }
.wcm-btn--primary {
  background: linear-gradient(135deg, #0891b2, #22d3ee); color: #041018;
  box-shadow: var(--wcm-glow);
}
.wcm-btn--secondary {
  background: rgba(15,23,42,.65); border-color: var(--wcm-border); color: var(--wcm-text);
}
.wcm-btn--ghost { background: transparent; border-color: rgba(148,163,184,.35); color: var(--wcm-text); }
.wcm-btn:hover { transform: translateY(-1px); }

/* Sections */
.wcm-section { padding: 5rem 0; position: relative; min-height: var(--pb-section-min-h, auto); }
.wcm-section:nth-child(even) { background: rgba(15,23,42,.35); }
.wcm-heading { font-size: clamp(1.75rem, 3vw, 2.4rem); margin: 0 0 1rem; font-weight: 700; }
.wcm-section__intro--connected { position: relative; max-width: 720px; }
.wcm-data-motif {
  position: absolute; right: -10%; top: 20%; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.12), transparent 70%);
  pointer-events: none;
}
.wcm-feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 2rem;
}
.wcm-feature-card {
  background: var(--wcm-surface-glass); border: 1px solid var(--wcm-border);
  border-radius: var(--wcm-radius); padding: 1.25rem; box-shadow: var(--wcm-glow);
}
.wcm-feature-card__title { margin: 0; font-size: 1rem; color: var(--wcm-text); }
.wcm-feature-card__title::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--wcm-accent); margin-right: .5rem; vertical-align: middle;
}
.wcm-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center;
}
.wcm-mini-features {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 1.5rem;
}
.wcm-mini-features .wcm-feature-card { padding: .85rem 1rem; }
.wcm-screenshot, .wcm-image {
  width: 100%; border-radius: var(--wcm-radius); border: 1px solid var(--wcm-border);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.wcm-media-fallback {
  min-height: 320px; border-radius: var(--wcm-radius);
  background: linear-gradient(135deg, #0f172a, #164e63);
  border: 1px dashed var(--wcm-border);
}
.wcm-reports, .wcm-portal {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center;
}
.wcm-portal__device { position: relative; max-width: 320px; margin-inline: auto; }
.wcm-portal__device::before {
  content: ""; position: absolute; inset: -12px; border-radius: 28px;
  border: 2px solid rgba(34,211,238,.25); pointer-events: none;
}
.wcm-section--cta {
  text-align: center;
  background: linear-gradient(180deg, rgba(8,47,73,.35), rgba(7,11,18,0));
}
.wcm-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.5rem; }

/* Footer */
.wcm-footer {
  border-top: 1px solid var(--wcm-border); padding: 3rem 0 2rem;
  background: #05080f;
}
.wcm-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; }
.wcm-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.wcm-footer a { color: var(--wcm-muted); text-decoration: none; font-size: .9rem; }
.wcm-footer a:hover { color: var(--wcm-accent); }
.wcm-footer__bottom { width: var(--wcm-container); margin: 2rem auto 0; padding-top: 1rem; border-top: 1px solid var(--wcm-border); color: var(--wcm-muted); font-size: .85rem; }
.wcm-logo { max-height: 48px; width: auto; margin-bottom: 1rem; }
.wcm-contact { display: grid; gap: .35rem; margin-top: 1rem; font-size: .9rem; }

/* Demo form */
.wcm-demo { min-height: 60vh; display: grid; place-items: center; padding: 6rem 1rem; }
.wcm-demo-card {
  width: min(520px, 100%); background: var(--wcm-surface-glass);
  border: 1px solid var(--wcm-border); border-radius: var(--wcm-radius); padding: 2rem;
}
.wcm-demo-card label { display: block; margin-bottom: .35rem; font-size: .85rem; color: var(--wcm-muted); }
.wcm-demo-card input, .wcm-demo-card textarea {
  width: 100%; margin-bottom: 1rem; padding: .65rem .75rem; border-radius: 8px;
  border: 1px solid var(--wcm-border); background: #0b1220; color: var(--wcm-text);
}
.wcm-demo-card .wcm-alert { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.wcm-demo-card .wcm-alert--ok { background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.35); }
.wcm-demo-card .wcm-alert--err { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); }

/* Mobile */
@media (max-width: 900px) {
  .wcm-hero--free-overlay .wcm-hero__content {
    left: var(--hero-tablet-x, var(--hero-x, 6%));
    top: var(--hero-tablet-y, var(--hero-y, 52%));
    width: min(var(--hero-tablet-w, var(--hero-w, 50%)), var(--hero-tablet-max, var(--hero-max, 520px)));
    max-width: min(var(--hero-tablet-max, 520px), 94vw);
    min-height: var(--hero-tablet-min-h, var(--hero-min-h, auto));
  }
  .wcm-hero__widget--richtext-overlay {
    left: var(--rt-tablet-x, var(--rt-x, 5%));
    top: var(--rt-tablet-y, var(--rt-y, 52%));
    width: var(--rt-tablet-w, var(--rt-w, 78%));
    max-width: var(--rt-tablet-max, var(--rt-max, 650px));
    min-height: var(--rt-tablet-min-h, var(--rt-min-h, auto));
  }
  .wcm-header__menu-toggle { display: block; }
  .wcm-nav {
    position: fixed; inset: var(--wcm-header-h) 0 0; background: rgba(7,11,18,.97);
    padding: 1.5rem; transform: translateX(100%); transition: transform .25s ease;
    overflow-y: auto;
  }
  .wcm-nav.is-open { transform: translateX(0); }
  .wcm-nav__list { flex-direction: column; align-items: stretch; }
  .wcm-nav__link { padding: .85rem 1rem; font-size: 1rem; }
  .wcm-split, .wcm-reports, .wcm-portal, .wcm-footer__grid { grid-template-columns: 1fr; }
  .wcm-portal__device { order: -1; }
  .wcm-hero__content { padding: 3rem 0 4rem; }
  .wcm-hero--free-overlay .wcm-hero__content { padding: 0; }
  .wcm-mini-features { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .wcm-hero--free-overlay .wcm-hero__content {
    left: var(--hero-mobile-x, var(--hero-tablet-x, 6%));
    top: var(--hero-mobile-y, 66%);
    width: min(var(--hero-mobile-w, 88%), 94vw);
    max-width: 94vw;
    min-height: var(--hero-mobile-min-h, var(--hero-tablet-min-h, var(--hero-min-h, auto)));
    transform: translateY(-50%);
  }
  .wcm-hero__widget--richtext-overlay {
    left: var(--rt-mobile-x, var(--rt-tablet-x, 5%));
    top: var(--rt-mobile-y, var(--rt-tablet-y, 66%));
    width: var(--rt-mobile-w, var(--rt-tablet-w, 90%));
    max-width: var(--rt-mobile-max, var(--rt-tablet-max, none));
    min-height: var(--rt-mobile-min-h, var(--rt-tablet-min-h, auto));
  }
  .wcm-hero__media .wcm-image, .wcm-hero__media img {
    object-position: 80% 35%;
  }
  .wcm-hero--free-overlay .wcm-btn {
    width: 100%;
    margin-right: 0;
  }
}