/* ==========================================================================
   Prodaff — full site stylesheet
   --------------------------------------------------------------------------
   Loaded alongside hero.css, which owns the hero section only and stays
   self-contained so it can ship to WordPress on its own (see INTEGRATION.md).
   Everything is namespaced `pd-`.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* brand */
  --blue:        #034ff4;
  --blue-lift:   #2f6bff;
  --blue-soft:   #eaf0ff;
  --indigo:      #325be1;
  --navy:        #2c3371;
  --ink:         #070b1c;

  /* surfaces */
  --bg:          #ffffff;
  --bg-alt:      #f6f8fd;
  --bg-tint:     #eef3fc;
  --line:        #e4eaf6;
  --line-soft:   #eef2fa;

  /* type */
  --text:        #0b1020;
  --text-mid:    #454f68;
  --text-muted:  #6b7590;

  /* dark-section type */
  --d-text:      #ffffff;
  --d-soft:      rgba(255, 255, 255, 0.74);
  --d-faint:     rgba(255, 255, 255, 0.55);
  --d-line:      rgba(255, 255, 255, 0.13);
  --d-glass:     rgba(255, 255, 255, 0.06);

  /* geometry */
  --shell:       1200px;
  --r-sm:        10px;
  --r:           16px;
  --r-lg:        22px;
  --r-pill:      100px;

  --shadow-sm:   0 1px 2px rgba(11, 16, 32, 0.05), 0 2px 8px rgba(11, 16, 32, 0.04);
  --shadow:      0 2px 4px rgba(11, 16, 32, 0.04), 0 12px 32px -12px rgba(11, 16, 32, 0.14);
  --shadow-lg:   0 30px 70px -30px rgba(11, 16, 32, 0.30);

  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --pad-y:       clamp(4.5rem, 8.5vw, 7.5rem);

  --nav-h:       74px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Sprite icon. Symbols carry their own fill/stroke, so this only sizes them. */
.pd-i { width: 18px; height: 18px; flex: none; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.pd-shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 1.5rem; }

.pd-section { padding-block: var(--pad-y); }
.pd-section--alt { background: var(--bg-alt); }
.pd-section--dark { background: var(--ink); color: var(--d-text); }

.pd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* skip link */
.pd-skip {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  padding: 0.7rem 1.1rem; border-radius: var(--r-sm);
  background: var(--blue); color: #fff; font-weight: 600; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.pd-skip:focus { top: 1rem; }

/* ==========================================================================
   3. Type helpers
   ========================================================================== */

.pd-eyebrow {
  display: inline-block;
  margin: 0 0 0.9rem;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.pd-section--dark .pd-eyebrow { color: #7ea6ff; }

.pd-h2 {
  margin: 0;
  font-size: clamp(1.85rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.pd-lede {
  margin: 1.1rem 0 0;
  max-width: 60ch;
  color: var(--text-mid);
  font-size: 1.0625rem;
  line-height: 1.7;
  text-wrap: pretty;
}
.pd-section--dark .pd-lede { color: var(--d-soft); }

.pd-head { max-width: 52rem; }
.pd-head--center { margin-inline: auto; text-align: center; }
.pd-head--center .pd-lede { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Gradient headline accent.
   Only ever applied to a PHRASE inside a heading, never the whole line —
   background-clip:text drops the text colour, so a full heading in gradient
   loses contrast at the pale end and reads as washed out rather than emphatic.
   The extra padding-bottom stops descenders (g, y, p) being clipped by the
   background box.
   -------------------------------------------------------------------------- */
.pd-grad {
  background: linear-gradient(100deg, var(--blue-lift) 0%, var(--indigo) 42%, #7c5cff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: pd-grad-shift 9s ease-in-out infinite;
}
.pd-section--dark .pd-grad,
.pd-cta .pd-grad {
  background-image: linear-gradient(100deg, #ffffff 0%, #a9c6ff 45%, #6f9dff 100%);
}
@keyframes pd-grad-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Hairline accent under an eyebrow. */
.pd-eyebrow::after {
  content: "";
  display: block;
  width: 26px; height: 2px;
  margin: 0.55rem 0 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), transparent);
}
.pd-head--center .pd-eyebrow::after { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--blue), transparent); }

/* ==========================================================================
   3b. Decorative layers
   Purely ornamental, always aria-hidden, always behind content and
   pointer-events:none so they can never intercept a click.
   ========================================================================== */

.pd-deco { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.pd-section, .pd-cta, .pd-stats { position: relative; }

/* dot field */
.pd-deco__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(3, 79, 244, 0.16) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
  opacity: 0.55;
}
.pd-deco__dots--br {
  -webkit-mask-image: radial-gradient(60% 60% at 100% 100%, #000 0%, transparent 72%);
  mask-image: radial-gradient(60% 60% at 100% 100%, #000 0%, transparent 72%);
}

/* soft colour orb */
.pd-deco__orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.5;
}
.pd-deco__orb--a { width: 420px; height: 420px; top: -180px; left: -120px;  background: rgba(3, 79, 244, 0.16); }
.pd-deco__orb--b { width: 380px; height: 380px; bottom: -170px; right: -110px; background: rgba(124, 92, 255, 0.13); }

/* faint ruled grid */
.pd-deco__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(3, 79, 244, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3, 79, 244, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 65%);
  mask-image: linear-gradient(180deg, #000, transparent 65%);
}

/* corner arc */
.pd-deco__arc {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(3, 79, 244, 0.10);
  box-shadow: 0 0 0 44px rgba(3, 79, 244, 0.022);
}

/* film grain, dark sections only — kills gradient banding */
.pd-deco__noise {
  position: absolute; inset: 0; opacity: 0.28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* gradient hairline between bands */
.pd-rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.pd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.95rem 1.7rem;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: 0.95rem; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.pd-btn:hover { transform: translateY(-2px); }
.pd-btn:active { transform: translateY(0); }

.pd-btn--primary {
  background: linear-gradient(180deg, var(--blue-lift) 0%, var(--blue) 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 10px 24px -10px rgba(3,79,244,0.85);
}
.pd-btn--primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 16px 34px -12px rgba(3,79,244,1); }

.pd-btn--outline { border-color: var(--line); background: #fff; color: var(--text); }
.pd-btn--outline:hover { border-color: #c3d2f0; background: var(--blue-soft); color: var(--blue); }

.pd-btn--ghost-d {
  border-color: var(--d-line); background: var(--d-glass); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pd-btn--ghost-d:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.13); }

.pd-btn--sm { padding: 0.7rem 1.25rem; font-size: 0.875rem; }

/* text link with arrow */
.pd-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--blue); font-size: 0.9rem; font-weight: 600; text-decoration: none;
}
.pd-link svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.pd-link:hover svg { transform: translateX(4px); }

/* ==========================================================================
   5. Header
   ========================================================================== */

.pd-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}
/* Over the hero: transparent, blurred. Past it: solid white. */
.pd-header.is-stuck {
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -18px rgba(11,16,32,0.5);
}

.pd-header__bar {
  display: flex; align-items: center; gap: 1.75rem;
  height: var(--nav-h);
  max-width: var(--shell); margin-inline: auto; padding-inline: 1.5rem;
}

.pd-logo { display: block; flex: none; }
.pd-logo img { height: 34px; width: auto; }
.pd-logo__light { display: block; }   /* white wordmark, over hero */
.pd-logo__dark  { display: none; }    /* colour wordmark, once stuck */
.is-stuck .pd-logo__light { display: none; }
.is-stuck .pd-logo__dark  { display: block; }

.pd-nav { position: relative; display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }

.pd-nav__item { position: relative; }

/* A wide panel centred on its own trigger runs off the left of the screen —
   "Product" sits well left of centre, so a 1000px panel would start at a
   negative offset. Dropping the item to `static` makes .pd-nav the containing
   block, so wide panels centre on the nav as a whole instead. */
.pd-nav__item--mega { position: static; }

.pd-nav__link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.6rem 0.8rem; border-radius: var(--r-sm);
  background: none; border: 0;
  color: rgba(255,255,255,0.82);
  font-size: 0.9rem; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.pd-nav__link:hover { color: #fff; }
.is-stuck .pd-nav__link { color: var(--text-mid); }
.is-stuck .pd-nav__link:hover { color: var(--blue); background: var(--blue-soft); }

.pd-nav__link svg { width: 10px; height: 10px; opacity: 0.7; transition: transform 0.25s var(--ease); }
.pd-nav__item.is-open .pd-nav__link svg { transform: rotate(180deg); }

.pd-header__cta { display: flex; align-items: center; gap: 0.6rem; margin-left: 0.75rem; }
.pd-header__cta .pd-btn--outline { background: transparent; border-color: rgba(255,255,255,0.28); color: #fff; }
.pd-header__cta .pd-btn--outline:hover { background: rgba(255,255,255,0.12); color: #fff; }
.is-stuck .pd-header__cta .pd-btn--outline { background: #fff; border-color: var(--line); color: var(--text); }
.is-stuck .pd-header__cta .pd-btn--outline:hover { background: var(--blue-soft); color: var(--blue); }

/* ---- dropdown / mega panel ---- */
.pd-panel {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  padding: 1.15rem;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.pd-nav__item.is-open .pd-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.pd-panel--mega { width: min(95vw, 1000px); max-width: calc(100vw - 2rem); padding: 1.5rem 1.5rem 0.75rem; }
.pd-panel--wide { width: min(95vw, 720px); }
.pd-panel--sm   { width: 320px; left: 0; transform: translateY(-6px); padding: 0.75rem; }
.pd-nav__item.is-open .pd-panel--sm { transform: translateY(0); }

.pd-panel__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.1rem 1rem; }
.pd-panel--cols2 .pd-panel__grid { grid-template-columns: repeat(2, 1fr); }

.pd-panel__title {
  margin: 0 0 0.6rem; padding-inline: 0.6rem;
  color: var(--text-muted); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
}
.pd-panel__col + .pd-panel__col { border-left: 1px solid var(--line-soft); padding-left: 1rem; }

/* ---- menu item with icon ---- */
/* align-items:center, not flex-start. The tile is 34px against a ~19px title
   line, so top-aligning parked the icon well below the words it labels. The
   panel also mixes one-line items (Solutions) with two- and three-line ones
   (Product); centring is the only value that reads correctly for both. */
.pd-mi {
  position: relative;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem; border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s var(--ease);
}
.pd-mi > span { min-width: 0; }   /* let long labels wrap instead of overflowing */
.pd-mi:hover { background: var(--bg-alt); }

.pd-mi__ico {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--bg-tint); color: var(--blue);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.pd-mi__ico .pd-i { width: 17px; height: 17px; }
.pd-mi span svg {
    margin-top: 8px;
    margin-left: 8px;
}
.pd-mi:hover .pd-mi__ico {
  background: linear-gradient(150deg, var(--blue-lift), var(--blue));
  color: #fff;
  transform: translateY(-1px) scale(1.06);
}

.pd-mi b { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text); line-height: 1.35; }
.pd-mi span { display: block; margin-top: 0.1rem; font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }

/* "New" flag.
   Selector is .pd-mi .pd-mi__tag, not .pd-mi__tag: the badge is a <span> inside
   the item, so the generic `.pd-mi span` rule (0,1,1) outranks a lone class
   (0,1,0) and was forcing it to display:block — a full-width blue bar with
   muted text. Two classes (0,2,0) win it back. */
.pd-mi .pd-mi__tag {
  display: inline-block;
  margin: 0 0 0 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 100px;
  background: var(--blue);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* ---- promo card inside a panel ---- */
.pd-panel__promo {
  position: relative; overflow: hidden;
  /* Centred, not bottom-aligned: the promo stretches to the tallest column,
     and flex-end left a large empty band above the text. */
  display: flex; flex-direction: column; justify-content: center;
  padding: 1.35rem; border-radius: var(--r);
  background: linear-gradient(140deg, var(--blue) 0%, var(--indigo) 55%, var(--navy) 100%);
  color: #fff; text-decoration: none;
  transition: transform 0.3s var(--ease);
}
.pd-panel__promo:hover { transform: translateY(-2px); }
.pd-panel__promo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 15% 0%, rgba(255,255,255,0.24), transparent 60%);
  pointer-events: none;
}
.pd-panel__promo .pd-i { width: 22px; height: 22px; margin-bottom: 0.75rem; }
.pd-panel__promo b { display: block; font-size: 0.95rem; font-weight: 700; }
.pd-panel__promo span { display: block; margin: 0.3rem 0 0.9rem; font-size: 0.78rem; color: rgba(255,255,255,0.82); line-height: 1.5; }
.pd-panel__promo em {
  font-style: normal; display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.8rem; font-weight: 600;
}

/* ---- panel footer strip ---- */
.pd-panel__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
  margin: 1rem -1.5rem 0; padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-alt);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.pd-panel__foot a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; font-weight: 600; color: var(--text-mid); text-decoration: none;
  transition: color 0.2s var(--ease);
}
.pd-panel__foot a:hover { color: var(--blue); }
.pd-panel__foot a .pd-i { width: 15px; height: 15px; color: var(--blue); }
.pd-panel__foot .pd-panel__foot-cta { margin-left: auto; color: var(--blue); }

/* ---- staggered item entrance ---- */
.pd-panel .pd-mi,
.pd-panel .pd-panel__promo {
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}
.pd-nav__item.is-open .pd-panel .pd-mi,
.pd-nav__item.is-open .pd-panel .pd-panel__promo { opacity: 1; transform: none; }
/* Cascade by column, then by row — cheap approximation of a real stagger. */
.pd-panel__col:nth-child(1) .pd-mi { transition-delay: 40ms; }
.pd-panel__col:nth-child(2) .pd-mi { transition-delay: 80ms; }
.pd-panel__col:nth-child(3) .pd-mi { transition-delay: 120ms; }
.pd-panel__col:nth-child(4) .pd-mi { transition-delay: 160ms; }
.pd-panel .pd-panel__promo { transition-delay: 180ms; }

/* ---- mobile ---- */
.pd-burger {
  display: none; place-items: center;
  width: 42px; height: 42px; margin-left: auto;
  border: 1px solid rgba(255,255,255,0.24); border-radius: var(--r-sm);
  background: rgba(255,255,255,0.08); cursor: pointer;
}
.is-stuck .pd-burger { border-color: var(--line); background: #fff; }
.pd-burger span { display: block; width: 17px; height: 2px; border-radius: 2px; background: #fff; transition: 0.25s var(--ease); }
.pd-burger span + span { margin-top: 4px; }
.is-stuck .pd-burger span { background: var(--text); }

.pd-mobile {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99;
  padding: 1.25rem 1.5rem 3rem;
  background: #fff; overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.pd-mobile.is-open { opacity: 1; visibility: visible; transform: none; }
.pd-mobile__group + .pd-mobile__group { border-top: 1px solid var(--line-soft); }
.pd-mobile__toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 1rem 0; border: 0; background: none;
  font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer;
}
.pd-mobile__toggle svg { width: 12px; height: 12px; transition: transform 0.25s var(--ease); }
.pd-mobile__group.is-open .pd-mobile__toggle svg { transform: rotate(180deg); }
.pd-mobile__body { display: none; padding-bottom: 0.75rem; }
.pd-mobile__group.is-open .pd-mobile__body { display: block; }
.pd-mobile__body a { display: block; padding: 0.55rem 0; color: var(--text-mid); font-size: 0.925rem; text-decoration: none; }
.pd-mobile__body a:hover { color: var(--blue); }
.pd-mobile__cta { display: grid; gap: 0.65rem; margin-top: 1.5rem; }

/* ==========================================================================
   6. Cards + grids
   ========================================================================== */

.pd-grid { display: grid; gap: 1.25rem; }
.pd-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pd-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pd-grid--4 { grid-template-columns: repeat(4, 1fr); }

.pd-card {
  padding: 1.75rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pd-card:hover { transform: translateY(-4px); border-color: #cfdcf6; box-shadow: var(--shadow); }
.pd-card h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
.pd-card p  { margin: 0; color: var(--text-mid); font-size: 0.925rem; line-height: 1.65; }

.pd-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 1.15rem;
  border-radius: 13px;
  background: linear-gradient(150deg, var(--blue-lift), var(--blue));
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(3,79,244,0.75);
}
.pd-icon svg { width: 21px; height: 21px; }

/* ==========================================================================
   7. Features intro (two-column head)
   ========================================================================== */

.pd-split {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
/* For sections where the copy column is the main event and the image is
   support — the default ratio squeezed the heading onto four lines. */
.pd-split--even { grid-template-columns: 1.02fr 0.98fr; }

.pd-callout {
  margin-top: 1.75rem; padding: 1.25rem 1.4rem;
  border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: var(--r-sm); background: var(--bg-alt);
}
.pd-callout strong { display: block; margin-bottom: 0.3rem; font-size: 0.95rem; }
.pd-callout p { margin: 0; color: var(--text-mid); font-size: 0.9rem; line-height: 1.6; }

/* ==========================================================================
   8. Tabs (used by "Not Surveillance" and Security)
   ========================================================================== */

.pd-tabs { display: grid; grid-template-columns: 320px 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: 3rem; }

.pd-tabs__list { display: flex; flex-direction: column; gap: 0.4rem; }

.pd-tab {
  position: relative;
  display: flex; align-items: center; gap: 0.85rem;
  width: 100%; padding: 1rem 1.15rem;
  border: 1px solid transparent; border-radius: var(--r);
  background: none; text-align: left; cursor: pointer;
  font-size: 0.975rem; font-weight: 600; color: var(--text-mid);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.pd-tab:hover { background: var(--bg-alt); color: var(--text); }
.pd-tab[aria-selected="true"] {
  background: #fff; border-color: var(--line); color: var(--text);
  box-shadow: var(--shadow-sm);
}
.pd-tab__dot { display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 9px; background: var(--bg-tint); color: var(--blue); transition: 0.25s var(--ease); }
.pd-tab__dot svg { width: 16px; height: 16px; }
.pd-tab[aria-selected="true"] .pd-tab__dot { background: linear-gradient(150deg, var(--blue-lift), var(--blue)); color: #fff; }

/* dark variant */
.pd-section--dark .pd-tab { color: var(--d-soft); }
.pd-section--dark .pd-tab:hover { background: rgba(255,255,255,0.05); color: #fff; }
.pd-section--dark .pd-tab[aria-selected="true"] {
  background: var(--d-glass); border-color: var(--d-line); color: #fff; box-shadow: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pd-section--dark .pd-tab__dot { background: rgba(255,255,255,0.1); color: #9dbcff; }
.pd-section--dark .pd-tab[aria-selected="true"] .pd-tab__dot { background: var(--blue); color: #fff; }

.pd-tabs__panels { position: relative; }
.pd-tabpanel[hidden] { display: none; }
.pd-tabpanel {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff; box-shadow: var(--shadow-sm);
  animation: pd-fade 0.4s var(--ease);
}
.pd-section--dark .pd-tabpanel {
  border-color: var(--d-line); background: var(--d-glass); box-shadow: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.pd-tabpanel h3 { margin: 0 0 0.6rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; }
.pd-tabpanel > p { margin: 0 0 1.4rem; color: var(--text-mid); line-height: 1.7; }
.pd-section--dark .pd-tabpanel > p { color: var(--d-soft); }

@keyframes pd-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.pd-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.pd-checks li { display: flex; gap: 0.7rem; font-size: 0.9375rem; line-height: 1.55; color: var(--text-mid); }
.pd-section--dark .pd-checks li { color: var(--d-soft); }
.pd-checks svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--blue); }
.pd-section--dark .pd-checks svg { color: #7ea6ff; }

/* Framed "browser chrome" wrapper for real product-dashboard screenshots
   (traffic-light dot bar + rounded card + shadow), so a screenshot reads as
   a deliberate product-preview mockup rather than a bare image. Used here
   by the homepage's tabbed feature panels; inner pages get the same class
   via inner.css (which layers on top of this file). */
.pd-shot-frame {
  display: block; margin-top: 1.5rem;
  border-radius: 16px; border: 1px solid var(--line);
  background: #fff; box-shadow: 0 24px 55px -24px rgba(2,32,71,0.28), var(--shadow);
  overflow: hidden;
}
.pd-shot-frame__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px; background: var(--bg-alt); border-bottom: 1px solid var(--line);
}
.pd-shot-frame__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.pd-shot-frame__dot:nth-child(1) { background: #ff5f57; }
.pd-shot-frame__dot:nth-child(2) { background: #febc2e; }
.pd-shot-frame__dot:nth-child(3) { background: #28c840; }
.pd-shot-frame img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   9. Why-choose list
   ========================================================================== */

.pd-reasons { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.pd-reason {
  display: flex; gap: 1rem; padding: 1.15rem;
  border: 1px solid transparent; border-radius: var(--r);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.pd-reason:hover { background: #fff; border-color: var(--line); }
.pd-reason__n {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--blue-soft); color: var(--blue);
  font-size: 0.8rem; font-weight: 800;
}
.pd-reason h3 { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 700; }
.pd-reason p { margin: 0; color: var(--text-mid); font-size: 0.9rem; line-height: 1.6; }

.pd-figure {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff; padding: 8px; box-shadow: var(--shadow);
  overflow: hidden;
}
.pd-figure img { border-radius: 14px; }

/* Fixed-height screenshot — crops to fill rather than letterboxing, since
   the card is narrower than the source screenshot's aspect ratio. Anchored
   to the top so the app header and first row of stat cards stay in frame. */
.pd-figure--tall img {
  width: 100%; height: 700px; max-height: none;
  object-fit: cover; object-position: top center;
}
@media (max-width: 720px) {
  .pd-figure--tall img { height: 420px; }
}

/* ==========================================================================
   10. Stats band
   ========================================================================== */

.pd-stats {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: clamp(20px, 3vw, 32px);
  padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(115deg, var(--blue) 0%, var(--indigo) 45%, var(--navy) 100%);
  color: #fff;
}
.pd-stats::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 120% at 15% 0%, rgba(255,255,255,0.20) 0%, transparent 60%);
}
.pd-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.pd-stat__n {
  display: block; font-size: clamp(2rem, 4.2vw, 3.25rem); font-weight: 800;
  line-height: 1; letter-spacing: -0.035em;
}
.pd-stat__l { display: block; margin-top: 0.6rem; color: rgba(255,255,255,0.8); font-size: 0.9rem; }

/* ==========================================================================
   11. Testimonials
   ========================================================================== */

.pd-quote {
  display: flex; flex-direction: column;
  padding: 1.9rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.pd-quote:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pd-quote__mark { width: 30px; height: 30px; color: #c9d8f7; margin-bottom: 0.9rem; }
.pd-quote p { margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.7; color: var(--text); }
.pd-quote__by { display: flex; align-items: center; gap: 0.8rem; margin-top: auto; }
.pd-quote__by img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.pd-quote__by b { display: block; font-size: 0.925rem; font-weight: 700; }
.pd-quote__by span { display: block; font-size: 0.8rem; color: var(--text-muted); }
.pd-stars { display: flex; gap: 2px; margin-bottom: 0.9rem; color: #f5a623; }
.pd-stars svg { width: 15px; height: 15px; }

/* ==========================================================================
   12. Industries
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bento layout. Seven industries in an even 3-up grid always left one orphan
   card on the last row. Making the first card span two columns and adding a
   closing CTA tile fills a 3x3 exactly — nine cells, no gap, and the varied
   sizes read as deliberate rather than as a grid that ran out.
   -------------------------------------------------------------------------- */
.pd-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
  margin-top: 3rem;
}
.pd-bento > .pd-ind--wide { grid-column: span 2; }

/* The featured tile earns its width with a tint and a soft concentric ring,
   so the size difference reads as hierarchy rather than as a layout accident. */
.pd-ind--wide {
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(3, 79, 244, 0.07) 0%, transparent 55%),
    linear-gradient(140deg, #f8faff 0%, #ffffff 60%);
  border-color: #dbe6fa;
}
/* Tucked well past the corner: only the arc reads, so it works as a flourish
   instead of a stray circle floating across the card. */
.pd-ind--wide .pd-ind__ring {
  position: absolute; top: -150px; right: -130px; z-index: -1;
  width: 300px; height: 300px; border-radius: 50%;
  border: 1px solid rgba(3, 79, 244, 0.11);
  box-shadow: 0 0 0 40px rgba(3, 79, 244, 0.028);
  transition: transform 0.8s var(--ease);
  pointer-events: none;
}
.pd-ind--wide:hover .pd-ind__ring { transform: scale(1.07); }

.pd-ind {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.pd-ind:hover {
  transform: translateY(-5px);
  border-color: #c6d6f7;
  box-shadow: var(--shadow);
}

/* Cursor-tracked spotlight. --mx/--my are written by site.js on pointermove;
   the fallback keeps it centred and invisible until then. */
.pd-ind::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              rgba(3, 79, 244, 0.09), transparent 65%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.pd-ind:hover::before { opacity: 1; }

/* Hairline sweep along the top edge on hover. */
.pd-ind::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue-lift), transparent);
  transform: scaleX(0);
  transition: transform 0.6s var(--ease);
}
.pd-ind:hover::after { transform: scaleX(1); }

.pd-ind h3 {
  margin: 1.15rem 0 0.45rem;
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em;
}
.pd-ind--wide h3 { font-size: 1.25rem; }
.pd-ind > p { margin: 0 0 1.15rem; color: var(--text-mid); font-size: 0.9rem; line-height: 1.65; }
.pd-ind--wide > p { max-width: 46ch; font-size: 0.95rem; }

.pd-ind ul { margin: auto 0 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
/* The wide tile is shorter than its row neighbour, so the `auto` top margin
   opened a dead band under the description. Let it flow instead. */
.pd-ind--wide ul { margin-top: 0.25rem; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.25rem; }
.pd-ind li {
  display: flex; gap: 0.6rem; align-items: flex-start;
  font-size: 0.85rem; color: var(--text-muted); line-height: 1.5;
}
.pd-ind li .pd-i { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--blue); }

/* ---- animated icon tile ---- */
.pd-ind__ico {
  position: relative;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 16px;
  background: linear-gradient(150deg, var(--blue-lift), var(--blue));
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(3, 79, 244, 0.85);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.pd-ind:hover .pd-ind__ico {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 16px 30px -12px rgba(3, 79, 244, 1);
}
/* Pulsing halo, hover only — seven cards pulsing at rest would be noise. */
.pd-ind__ico::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1.5px solid var(--blue-lift);
  opacity: 0;
}
.pd-ind:hover .pd-ind__ico::after { animation: pd-halo 1.6s var(--ease) infinite; }
@keyframes pd-halo {
  0%   { opacity: 0.55; transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.45); }
  100% { opacity: 0;    transform: scale(1.45); }
}

.pd-ind__ico svg { width: 26px; height: 26px; overflow: visible; }

/* --------------------------------------------------------------------------
   Per-icon motion.
   These SVGs are inlined rather than pulled from the sprite with <use>: <use>
   builds a shadow tree whose internals cannot be targeted from this stylesheet,
   so only whole-icon transforms would be possible. Inlining is what lets each
   icon animate its own parts.
   Every path carries pathLength="1", so one dash rule draws any length of line.
   -------------------------------------------------------------------------- */
.pd-ind__ico [data-draw] {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
/* Draw-on when the card is revealed by the scroll observer. */
.pd-ind.is-in .pd-ind__ico [data-draw] { animation: pd-draw 1.1s var(--ease) both; }
@keyframes pd-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* clock hand — sweeps a full turn */
.pd-ind:hover .ico-hand { animation: pd-spin 1.9s linear infinite; transform-origin: 12px 12px; }
@keyframes pd-spin { to { transform: rotate(360deg); } }

/* megaphone waves — ripple outward */
.pd-ind:hover .ico-wave { animation: pd-wave 1.5s var(--ease) infinite; }
.pd-ind:hover .ico-wave:nth-of-type(2) { animation-delay: 0.22s; }
@keyframes pd-wave {
  0%   { opacity: 0.15; transform: translateX(-2px); }
  45%  { opacity: 1;    transform: translateX(0); }
  100% { opacity: 0.15; transform: translateX(-2px); }
}

/* calculator keys — light up in sequence */
.pd-ind:hover .ico-key { animation: pd-key 1.5s var(--ease) infinite; }
.pd-ind:hover .ico-key:nth-of-type(2) { animation-delay: 0.15s; }
.pd-ind:hover .ico-key:nth-of-type(3) { animation-delay: 0.3s; }
.pd-ind:hover .ico-key:nth-of-type(4) { animation-delay: 0.45s; }
@keyframes pd-key { 0%, 100% { opacity: 0.35; } 40% { opacity: 1; } }

/* code brackets — separate then settle */
.pd-ind:hover .ico-brk-l { animation: pd-brk-l 1.5s var(--ease) infinite; }
.pd-ind:hover .ico-brk-r { animation: pd-brk-r 1.5s var(--ease) infinite; }
@keyframes pd-brk-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-2.5px); } }
@keyframes pd-brk-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2.5px); } }
.pd-ind:hover .ico-caret { animation: pd-blink 1s steps(1) infinite; }
@keyframes pd-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.15; } }

/* globe meridians — drift across */
.pd-ind:hover .ico-meridian { animation: pd-meridian 3s var(--ease) infinite; }
@keyframes pd-meridian {
  0%, 100% { transform: scaleX(1);    opacity: 1; }
  50%      { transform: scaleX(0.35); opacity: 0.55; }
}

/* stacked layers — rise in sequence */
.pd-ind:hover .ico-layer { animation: pd-layer 1.7s var(--ease) infinite; }
.pd-ind:hover .ico-layer:nth-of-type(2) { animation-delay: 0.14s; }
.pd-ind:hover .ico-layer:nth-of-type(3) { animation-delay: 0.28s; }
@keyframes pd-layer { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-2px); } }

/* headset arcs — pulse like audio */
.pd-ind:hover .ico-cup { animation: pd-cup 1.3s var(--ease) infinite; }
.pd-ind:hover .ico-cup:nth-of-type(2) { animation-delay: 0.2s; }
@keyframes pd-cup { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.72); } }

/* Transform-origin has to sit on the element for SVG sub-part transforms. */
.pd-ind__ico [class^="ico-"] { transform-box: fill-box; transform-origin: center; }
.pd-ind__ico .ico-hand { transform-box: view-box; }

/* ---- closing CTA tile ---- */
.pd-ind--cta {
  position: relative; isolation: isolate; overflow: hidden;
  justify-content: center;
  border: 0;
  text-decoration: none;   /* it is an <a>; without this every line underlines */
  background: linear-gradient(135deg, var(--blue) 0%, var(--indigo) 55%, var(--navy) 100%);
  color: #fff;
}
.pd-ind--cta::before { display: none; }
.pd-ind--cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: none;
  background: radial-gradient(70% 100% at 20% 0%, rgba(255,255,255,0.24), transparent 62%);
}
.pd-ind--cta h3 { margin-top: 1.15rem; color: #fff; font-size: 1.15rem; }
.pd-ind--cta p  { margin-bottom: 1.4rem; color: rgba(255,255,255,0.84); }
.pd-ind--cta .pd-ind__ico {
  background: rgba(255,255,255,0.16); box-shadow: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pd-ind--cta:hover .pd-ind__ico::after { border-color: rgba(255,255,255,0.6); }
.pd-ind--cta .pd-link { margin-top: auto; color: #fff; }

/* ==========================================================================
   13. Blog
   ========================================================================== */

.pd-post {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; text-decoration: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.pd-post:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pd-post__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-tint); }
.pd-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.pd-post:hover .pd-post__img img { transform: scale(1.05); }
.pd-post__body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem; }
.pd-post__meta { margin: 0 0 0.6rem; color: var(--text-muted); font-size: 0.78rem; }
.pd-post h3 { margin: 0 0 1.1rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; }
.pd-post .pd-link { margin-top: auto; }

/* ==========================================================================
   14. FAQ
   ========================================================================== */

.pd-faq { max-width: 820px; margin-inline: auto; margin-top: 2.75rem; }
.pd-faq__item { border-bottom: 1px solid var(--line); }
.pd-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  width: 100%; padding: 1.3rem 0.25rem;
  border: 0; background: none; cursor: pointer;
  font-size: 1.0125rem; font-weight: 600; text-align: left; letter-spacing: -0.01em;
  transition: color 0.2s var(--ease);
}
.pd-faq__q:hover { color: var(--blue); }
.pd-faq__ico {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--bg-tint); color: var(--blue);
  transition: transform 0.3s var(--ease), background 0.25s var(--ease);
}
.pd-faq__ico svg { width: 13px; height: 13px; }
.pd-faq__item.is-open .pd-faq__ico { transform: rotate(45deg); background: var(--blue); color: #fff; }
.pd-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s var(--ease); }
.pd-faq__item.is-open .pd-faq__a { grid-template-rows: 1fr; }
.pd-faq__a > div { overflow: hidden; }
.pd-faq__a p { margin: 0; padding: 0 3.5rem 1.4rem 0.25rem; color: var(--text-mid); line-height: 1.75; }

/* ==========================================================================
   15. Contact
   ========================================================================== */

.pd-contact { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 3rem; align-items: start; }

.pd-info { display: grid; gap: 1rem; margin-top: 2rem; }
.pd-info__row { display: flex; gap: 0.9rem; align-items: flex-start; }
.pd-info__ico {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 11px; background: var(--blue-soft); color: var(--blue);
}
.pd-info__ico svg { width: 17px; height: 17px; }
.pd-info__row b { display: block; font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.pd-info__row a, .pd-info__row span { font-size: 0.95rem; color: var(--text); text-decoration: none; }
.pd-info__row a:hover { color: var(--blue); }

.pd-social { display: flex; gap: 0.55rem; margin-top: 1.75rem; }
.pd-social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 11px; color: var(--text-mid);
  transition: 0.22s var(--ease);
}
.pd-social a:hover { border-color: var(--blue); background: var(--blue); color: #fff; transform: translateY(-2px); }
.pd-social svg { width: 16px; height: 16px; }

.pd-form {
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff; box-shadow: var(--shadow);
}
.pd-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pd-field { display: flex; flex-direction: column; gap: 0.4rem; }
.pd-field--full { grid-column: 1 / -1; }
.pd-field label { font-size: 0.82rem; font-weight: 600; color: var(--text-mid); }
.pd-field input, .pd-field textarea, .pd-field select {
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-alt); font: inherit; font-size: 0.925rem; color: var(--text);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.pd-field textarea { resize: vertical; min-height: 108px; }
.pd-field input:focus, .pd-field textarea:focus, .pd-field select:focus {
  outline: none; border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(3,79,244,0.12);
}
.pd-form .pd-btn { width: 100%; margin-top: 0.25rem; }
.pd-form__note { margin: 0.9rem 0 0; font-size: 0.78rem; color: var(--text-muted); text-align: center; }

.pd-embed-form { width: 100%; }
.pd-embed-form iframe { width: 100%; height: 697px; border: none; border-radius: 8px; display: block; }

/* ==========================================================================
   16. Final CTA
   ========================================================================== */

.pd-cta {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: clamp(20px, 3vw, 32px);
  padding: clamp(3rem, 6vw, 4.75rem) clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(115deg, var(--blue) 0%, var(--indigo) 50%, var(--navy) 100%);
  color: #fff; text-align: center;
}
.pd-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(55% 110% at 50% 0%, rgba(255,255,255,0.22) 0%, transparent 62%);
}
.pd-cta h2 { margin: 0; font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; }
.pd-cta p { margin: 1rem auto 0; max-width: 52ch; color: rgba(255,255,255,0.85); line-height: 1.7; }
.pd-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 2.1rem; }
.pd-cta .pd-btn--primary { background: #fff; color: var(--blue); box-shadow: 0 12px 30px -12px rgba(0,0,0,0.5); }
.pd-cta .pd-btn--ghost-d { border-color: rgba(255,255,255,0.4); }

/* ==========================================================================
   17. Footer
   ========================================================================== */

.pd-footer { background: var(--ink); color: var(--d-soft); padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.pd-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(1.75rem, 4vw, 3.5rem); }
.pd-footer img.pd-footer__logo { height: 38px; width: auto; margin-bottom: 1.25rem; }
.pd-footer p { margin: 0; font-size: 0.9rem; line-height: 1.75; color: var(--d-faint); }
.pd-footer h4 {
  margin: 0 0 1.1rem; color: #fff; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.pd-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.65rem; }
.pd-footer ul a { font-size: 0.9rem; color: var(--d-soft); text-decoration: none; transition: color 0.2s var(--ease); }
.pd-footer ul a:hover { color: #fff; }
.pd-footer__contact { display: grid; gap: 0.75rem; font-size: 0.9rem; }
.pd-footer__contact a { color: var(--d-soft); text-decoration: none; }
.pd-footer__contact a:hover { color: #fff; }
.pd-footer .pd-social { margin-top: 1.5rem; }
.pd-footer .pd-social a { border-color: var(--d-line); color: var(--d-soft); }
.pd-footer .pd-social a:hover { border-color: var(--blue-lift); background: var(--blue); color: #fff; }
.pd-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-block: 1.5rem;
  border-top: 1px solid var(--d-line);
  font-size: 0.82rem; color: var(--d-faint);
}
.pd-footer__bottom nav { display: flex; gap: 1.5rem; }
.pd-footer__bottom a { color: var(--d-faint); text-decoration: none; }
.pd-footer__bottom a:hover { color: #fff; }

/* ==========================================================================
   18. Motion layer
   Everything here is transform/opacity only — no layout-triggering properties —
   so it composites on the GPU and never forces reflow during scroll.
   ========================================================================== */

/* ---- reveal, with directional variants ---- */
.pd-r {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
}
.pd-r[data-anim="left"]  { transform: translateX(-26px); }
.pd-r[data-anim="right"] { transform: translateX(26px); }
.pd-r[data-anim="scale"] { transform: scale(0.955); }
.pd-r[data-anim="none"]  { transform: none; }
.pd-r.is-in { opacity: 1; transform: none; }
.no-js .pd-r { opacity: 1; transform: none; }

/* ---- scroll progress ---- */
.pd-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--blue-lift), var(--blue), #7ea6ff);
  pointer-events: none;
}

/* ---- back to top ---- */
.pd-totop {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--blue); cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(14px) scale(0.9); pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background 0.2s var(--ease);
}
.pd-totop.is-in { opacity: 1; transform: none; pointer-events: auto; }
.pd-totop:hover { background: var(--blue); color: #fff; }
.pd-totop .pd-i { width: 18px; height: 18px; transform: rotate(-90deg); }

/* ---- aurora: slow drifting blobs behind dark sections ---- */
.pd-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.pd-aurora span {
  position: absolute; display: block;
  width: 46vw; height: 46vw; max-width: 680px; max-height: 680px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.pd-aurora span:nth-child(1) { top: -14%; left: -8%;  background: rgba(3, 79, 244, 0.55);  animation: pd-drift-a 22s ease-in-out infinite; }
.pd-aurora span:nth-child(2) { bottom: -18%; right: -6%; background: rgba(50, 91, 225, 0.45); animation: pd-drift-b 27s ease-in-out infinite; }
.pd-aurora span:nth-child(3) { top: 30%; left: 55%;   background: rgba(124, 92, 255, 0.30); animation: pd-drift-c 32s ease-in-out infinite; }

@keyframes pd-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(14%, 12%, 0) scale(1.14); }
}
@keyframes pd-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50%      { transform: translate3d(-16%, -10%, 0) scale(0.92); }
}
@keyframes pd-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.95); }
  50%      { transform: translate3d(-12%, 14%, 0) scale(1.18); }
}
.pd-section--dark { position: relative; isolation: isolate; overflow: hidden; }

/* ---- stats: light sweeping across the gradient ---- */
.pd-stats { position: relative; }
.pd-stats__sheen {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.16) 50%, transparent 65%);
  background-size: 260% 100%;
  animation: pd-sheen 7s var(--ease) infinite;
}
@keyframes pd-sheen { 0% { background-position: 130% 0; } 60%, 100% { background-position: -60% 0; } }

/* ---- testimonial marquee ---- */
.pd-marquee {
  position: relative;
  margin-top: 3rem;
  /* The track is `width: max-content`, so without clipping here it widens the
     document and gives the whole page a horizontal scrollbar. The mask only
     hides pixels — it does not clip layout. */
  overflow: hidden;
  /* Fade the ends so cards enter and leave rather than being cut off. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.pd-marquee__track {
  display: flex; gap: 1.25rem; width: max-content;
  animation: pd-marquee var(--speed, 46s) linear infinite;
  will-change: transform;
}
.pd-marquee:hover .pd-marquee__track,
.pd-marquee:focus-within .pd-marquee__track { animation-play-state: paused; }
.pd-marquee .pd-quote { width: 380px; flex: none; }
/* The track holds two identical halves, so -50% lands exactly on a seam. */
@keyframes pd-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ---- sliding indicator on the vertical tab rail ---- */
.pd-tabs__list { position: relative; }
.pd-tabs__ind {
  position: absolute; left: 0; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--blue-lift), var(--blue));
  transition: transform 0.4s var(--ease), height 0.4s var(--ease), opacity 0.3s var(--ease);
  pointer-events: none;
}
.pd-section--dark .pd-tabs__ind { background: linear-gradient(180deg, #9dbcff, var(--blue-lift)); }

/* ==========================================================================
   Icon motion system
   --------------------------------------------------------------------------
   Every icon carries data-ia="<motion>". The animation is declared once and
   left PAUSED, so at rest the icon sits on frame 0 and looks untouched; hover
   on any interactive ancestor simply flips animation-play-state to running.
   This is why one short block can animate every icon on the page instead of a
   bespoke rule per component — and why sprite icons drawn with <use> work too:
   the transform applies to the <svg> host, never to its shadow internals.
   ========================================================================== */

[data-ia] {
  transform-box: fill-box;
  transform-origin: center;
}
/* The <svg> host of a sprite icon is a replaced element, not SVG content —
   fill-box would collapse its reference box to zero. */
svg[data-ia] { transform-box: border-box; }

/* `paused` is written INSIDE each shorthand, deliberately. The `animation`
   shorthand resets every animation-* longhand, so a separate
   `[data-ia] { animation-play-state: paused }` rule gets wiped by these — and
   an attribute selector with a value carries the same specificity as one
   without, so source order alone would decide it. Getting this wrong left all
   80 icons spinning permanently. */
[data-ia="spin"]   { animation: pd-ia-spin   1.9s linear      infinite paused; }
[data-ia="pulse"]  { animation: pd-ia-pulse  1.1s ease-in-out infinite paused; }
[data-ia="swing"]  { animation: pd-ia-swing  1.1s ease-in-out infinite paused; }
[data-ia="bob"]    { animation: pd-ia-bob    1.1s ease-in-out infinite paused; }
[data-ia="tick"]   { animation: pd-ia-tick   1.3s ease-in-out infinite paused; }
[data-ia="beat"]   { animation: pd-ia-beat   1.0s ease-in-out infinite paused; }
[data-ia="slide"]  { animation: pd-ia-slide  1.1s ease-in-out infinite paused; }
[data-ia="flip"]   { animation: pd-ia-flip   1.6s ease-in-out infinite paused; }
[data-ia="jitter"] { animation: pd-ia-jitter 0.5s ease-in-out infinite paused; }
[data-ia="rise"]   { animation: pd-ia-rise   1.2s ease-in-out infinite paused; }

@keyframes pd-ia-spin  { to { transform: rotate(360deg); } }
@keyframes pd-ia-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes pd-ia-swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-13deg); } 75% { transform: rotate(13deg); } }
@keyframes pd-ia-bob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes pd-ia-tick  { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(9deg) scale(1.08); } }
@keyframes pd-ia-beat  { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.22); } 55% { transform: scale(0.96); } }
@keyframes pd-ia-slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes pd-ia-flip  { 0%, 60%, 100% { transform: rotateY(0); } 30% { transform: rotateY(180deg); } }
@keyframes pd-ia-jitter{ 0%, 100% { transform: translate(0,0); } 25% { transform: translate(-1px,1px); } 75% { transform: translate(1px,-1px); } }
@keyframes pd-ia-rise  { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-3px) scale(1.1); } }

/* Every ancestor that should start its icons moving. */
.pd-mi:hover [data-ia],
.pd-card:hover [data-ia],
.pd-tab:hover [data-ia],
.pd-info__row:hover [data-ia],
.pd-social a:hover [data-ia],
.pd-post:hover [data-ia],
.pd-quote:hover [data-ia],
.pd-panel__promo:hover [data-ia],
.pd-panel__foot a:hover [data-ia],
.pd-reason:hover [data-ia],
.pd-ind:hover [data-ia],
.pd-btn:hover [data-ia],
.pd-link:hover [data-ia],
.pd-faq__q:hover [data-ia],
.pd-totop:hover [data-ia],
.pd-checks li:hover [data-ia],
.pd-nav__item.is-open .pd-nav__link [data-ia] { animation-play-state: running; }

/* ---- feature-card icon tile ---- */
.pd-card .pd-icon { transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.pd-card:hover .pd-icon {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 16px 30px -12px rgba(3, 79, 244, 1);
}

/* ---- gentle float, used on the hero-adjacent figure ---- */
.pd-float { animation: pd-float 7s ease-in-out infinite; }
@keyframes pd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ==========================================================================
   19. Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .pd-nav, .pd-header__cta { display: none; }
  .pd-burger { display: grid; }
  .pd-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pd-tabs { grid-template-columns: 1fr; }
  .pd-tabs__list { flex-direction: row; overflow-x: auto; padding-bottom: 0.35rem; scrollbar-width: none; }
  .pd-tabs__list::-webkit-scrollbar { display: none; }
  .pd-tab { white-space: nowrap; }
  .pd-split, .pd-contact { grid-template-columns: 1fr; }
  .pd-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .pd-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .pd-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  /* Two columns: the wide tile spanning 2 is still a full row, so the 3x3
     becomes a clean 1 + 3x2 with the CTA closing it. */
  .pd-bento { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  :root { --pad-y: 3.5rem; }
  .pd-grid--2, .pd-grid--3, .pd-grid--4 { grid-template-columns: 1fr; }
  .pd-bento { grid-template-columns: 1fr; }
  .pd-bento > .pd-ind--wide { grid-column: span 1; }
  .pd-ind--wide ul { grid-template-columns: 1fr; }
  .pd-footer__top { grid-template-columns: 1fr; }
  .pd-form__grid { grid-template-columns: 1fr; }
  .pd-faq__a p { padding-right: 1rem; }
  .pd-cta__btns .pd-btn { width: 100%; }
  .pd-footer__bottom { flex-direction: column; }
}

/* ==========================================================================
   20. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pd-r { opacity: 1; transform: none; transition: none; }
  .pd-btn:hover, .pd-card:hover, .pd-quote:hover, .pd-ind:hover, .pd-post:hover { transform: none; }
  .pd-post:hover .pd-post__img img { transform: none; }
  .pd-tabpanel { animation: none; }

  /* Icons render in their finished state and never loop. The draw-on must be
     cancelled explicitly, or the dash offset would freeze the strokes hidden. */
  .pd-ind__ico [data-draw],
  .pd-ind.is-in .pd-ind__ico [data-draw] { animation: none; stroke-dashoffset: 0; }
  .pd-ind:hover .pd-ind__ico::after,
  .pd-ind:hover .ico-hand, .pd-ind:hover .ico-wave, .pd-ind:hover .ico-key,
  .pd-ind:hover .ico-brk-l, .pd-ind:hover .ico-brk-r, .pd-ind:hover .ico-caret,
  .pd-ind:hover .ico-meridian, .pd-ind:hover .ico-layer, .pd-ind:hover .ico-cup {
    animation: none;
  }
  .pd-ind:hover .pd-ind__ico { transform: none; }
  .pd-ind::after { display: none; }

  /* Motion layer off. The marquee must fall back to a static, scrollable row —
     paused mid-animation it would strand cards half off-screen. */
  .pd-aurora span,
  .pd-stats__sheen,
  .pd-float { animation: none; }
  /* Reflow into a normal wrapping row rather than a horizontal scroller, so
     no card is left clipped at the edge. */
  .pd-marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .pd-marquee__track { animation: none; width: auto; flex-wrap: wrap; }
  .pd-marquee .pd-quote { width: auto; flex: 1 1 260px; }
  .pd-card:hover .pd-icon { transform: none; }
  .pd-progress { display: none; }

  /* Icon motion off. `animation: none` alone is sufficient and correct — it
     clears animation-name, so play-state is irrelevant. (Pairing it with
     `animation-play-state: paused` reads as belt-and-braces but the shorthand
     resets that longhand anyway, so it was only noise.) */
  [data-ia] { animation: none !important; }
  .pd-grad { animation: none; }
  .pd-deco__orb, .pd-deco__noise { display: none; }

  * { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   21. Print
   ========================================================================== */

@media print {
  .pd-header, .pd-mobile, .pd-burger, .pd-cta, .pd-form { display: none !important; }
  body { color: #000; }
}

/* ==========================================================================
   22. Book a Demo modal
   ========================================================================== */

html.pd-lock-scroll, html.pd-lock-scroll body { overflow: hidden; }

.pd-demo-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(11, 16, 32, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0s linear 0.25s;
}
.pd-demo-modal.is-open {
  opacity: 1; visibility: visible;
  transition: opacity 0.25s var(--ease), visibility 0s;
}

.pd-demo-modal__dialog {
  position: relative; width: 100%; max-width: 850px; max-height: 90vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -20px rgba(11, 16, 32, 0.45);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  transform: translateY(18px) scale(0.98);
  transition: transform 0.28s var(--ease);
}
.pd-demo-modal.is-open .pd-demo-modal__dialog { transform: translateY(0) scale(1); }

.pd-demo-modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--text-mid); cursor: pointer;
  transition: 0.2s var(--ease);
}
.pd-demo-modal__close svg { width: 15px; height: 15px; }
.pd-demo-modal__close:hover { background: var(--bg-alt); color: var(--text); border-color: var(--blue); }

.pd-demo-modal__logo { display: block; margin: 0 auto 1.1rem; height: 34px; width: auto; }

.pd-demo-modal__title {
  font-size: clamp(1.35rem, 2.4vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em;
  text-align: center; color: var(--text); margin: 0 0 1.5rem;
}

.pd-demo-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }
.pd-demo-form__grid textarea { grid-column: 1 / -1; }

.pd-demo-form input, .pd-demo-form textarea {
  width: 100%; border: none; border-bottom: 1px solid var(--line);
  padding: 0.6rem 0.15rem; font: inherit; font-size: 0.9rem;
  background: transparent; color: var(--text);
  border-radius: 0;
  transition: border-color 0.2s var(--ease);
}
.pd-demo-form input::placeholder, .pd-demo-form textarea::placeholder { color: var(--text-muted); }
.pd-demo-form input:focus, .pd-demo-form textarea:focus {
  outline: none; border-bottom: 2px solid var(--blue);
}
.pd-demo-form textarea { height: 100px; resize: none; margin-top: 0.2rem; }

.pd-demo-form button[type="submit"] {
  margin-top: 1.5rem; padding: 0.95rem; width: 100%;
  background: var(--blue); color: #fff; border: none; border-radius: var(--r-sm);
  font-size: 0.98rem; font-weight: 700; letter-spacing: 0.01em; cursor: pointer;
  transition: background 0.2s var(--ease);
}
.pd-demo-form button[type="submit"]:hover { background: var(--indigo); }
.pd-demo-form button[type="submit"]:disabled { opacity: 0.65; cursor: default; }

.pd-demo-form__error { color: #d92d20; margin: 0.85rem 0 0; font-size: 0.85rem; min-height: 1em; }
.pd-demo-form__success { color: #16794c; margin: 0.4rem 0 0; font-size: 0.85rem; min-height: 1em; }

@media (max-width: 640px) {
  .pd-demo-form__grid { grid-template-columns: 1fr; }
  .pd-demo-modal__dialog { padding: 1.5rem 1.25rem; }
}