:root {
  --brand-navy: #17166B;
  --brand-navy-dark: #0F0E4D;
  --brand-navy-deep: #09083A;
  --brand-navy-light: #302E91;
  --brand-orange: #FF9400;
  --brand-orange-hover: #E98200;
  --brand-orange-light: #FFB347;
  --brand-orange-soft: #FFF0D9;
  --background-main: #FFFFFF;
  --background-soft: #F8F9FC;
  --background-muted: #F4F5F8;
  --surface: #FFFFFF;
  --surface-dark: #12113F;
  --text-primary: #17166B;
  --text-dark: #111827;
  --text-secondary: #5C6070;
  --text-muted: #8B8FA1;
  --text-light: #FFFFFF;
  --border-light: #E7E8EE;
  --border-medium: #D5D7E0;
  --border-navy: rgba(23, 22, 107, 0.20);
  --border-orange: rgba(255, 148, 0, 0.45);
  --success: #16A34A;
  --warning: #FF9400;
  --error: #DC2626;
  --info: #4F46E5;
  --primary: var(--brand-orange);
  --primary-hover: var(--brand-orange-hover);
  --primary-light: var(--brand-orange-light);
  --primary-soft: var(--brand-orange-soft);
  --secondary: var(--brand-navy);
  --secondary-soft: #ECEBFF;
  --dark: var(--brand-navy-deep);
  --dark-secondary: var(--brand-navy-dark);
  --dark-surface: var(--surface-dark);
  --background: var(--background-soft);
  --surface-alt: var(--background-muted);
  --border: var(--border-medium);
  --color-primary: var(--primary);
  --color-primary-light: var(--primary-light);
  --color-primary-lighter: var(--brand-orange-light);
  --color-primary-dark: var(--primary-hover);
  --color-primary-deep: var(--brand-navy);
  --color-navy-accent: var(--dark-surface);
  --color-neutral-muted: var(--text-muted);
  --color-navy-dark: var(--dark-secondary);
  --color-brand-deep: var(--dark);
  --color-dark: var(--dark);
  --color-dark-secondary: var(--dark-secondary);
  --color-dark-tertiary: var(--brand-navy-light);
  --color-dark-card: var(--surface-dark);
  --surface-dark-elevated: var(--dark-surface);
  --color-background: var(--background);
  --color-background-soft: var(--surface-alt);
  --color-surface: var(--surface);
  --color-surface-secondary: var(--surface-alt);
  --color-surface-deep: var(--primary-soft);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-text-light: var(--text-light);
  --color-text-light-muted: #D5D7E0;
  --color-border-light: var(--border-light);
  --color-border-medium: var(--border);
  --color-border-dark: rgba(226, 232, 240, .14);
  --color-border-accent: var(--border-orange);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-error: var(--error);
  --color-info: var(--info);
  --gradient-primary: linear-gradient(135deg, var(--brand-orange-hover), var(--brand-orange), var(--brand-orange-light));
  --gradient-accent: linear-gradient(135deg, var(--brand-navy), var(--brand-orange));
  --gradient-dark: linear-gradient(180deg, var(--brand-navy-deep), var(--brand-navy-dark));
  --gradient-light: linear-gradient(180deg, #ffffff, var(--background-soft));
  --gradient-glow: radial-gradient(circle, rgba(255,148,0,.18), transparent 70%);
  --gradient-card-highlight: linear-gradient(135deg, rgba(255,148,0,.1), rgba(255, 255, 255, .02));
  --navy: var(--color-dark);
  --indigo: var(--color-dark-secondary);
  --midnight: var(--color-dark-card);
  --soft: var(--color-background);
  --white: var(--color-surface);
  --accent: var(--color-primary);
  --accent-light: var(--color-primary-light);
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --line: var(--color-border-light);
  --dark-line: var(--color-border-dark);
  --container: 1280px;
  --wide: 1440px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-soft: 0 18px 50px rgba(23, 22, 107, .08);
  --shadow-medium: 0 24px 70px rgba(23, 22, 107, .12);
  --shadow-dark: 0 24px 80px rgba(0, 0, 0, .3);
  --shadow-primary: 0 16px 45px rgba(255, 148, 0, .22);
  --shadow: var(--shadow-soft);
  font-family: Inter, Manrope, "Plus Jakarta Sans", Sora, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.reveal,
.stagger-item {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1),
    transform .7s cubic-bezier(.22, 1, .36, 1),
    filter .7s cubic-bezier(.22, 1, .36, 1);
  filter: blur(8px);
  will-change: opacity, transform, filter;
}
.reveal.is-visible,
.stagger-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}
.section-head h2,
.hero h1,
.final-cta h2 {
  animation: textLift .9s cubic-bezier(.22, 1, .36, 1) both;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  height: 3px;
  pointer-events: none;
  background: transparent;
}
.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left;
  background: var(--gradient-primary);
  box-shadow: 0 0 18px rgba(255, 148, 0, .32);
}

.cursor-dot,
.cursor-ring {
  display: none;
  pointer-events: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  border-radius: 999px;
  will-change: transform;
}

.boot {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--gradient-glow), var(--gradient-dark);
}
.boot-card {
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 32px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(18px);
}
.boot-logo, .brand span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--white);
  background: var(--gradient-primary);
  border-radius: 12px;
  font-weight: 950;
  box-shadow: var(--shadow-primary);
}
.text-logo span,
.text-logo em {
  display: inline;
  width: auto;
  height: auto;
  color: inherit;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.text-logo strong { font-size: 24px; letter-spacing: 0; }
.text-logo em {
  color: transparent;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px clamp(18px, 4vw, 64px);
  color: var(--brand-navy);
  background: rgba(255, 255, 255, .86);
  border-bottom: 1px solid rgba(23, 22, 107, .08);
  transition: background .24s ease, backdrop-filter .24s ease, padding .24s ease, border-color .24s ease;
}
.nav-scrolled {
  padding-block: 11px;
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--color-border-light);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 950; }
.brand strong { font-size: 17px; }
.brand-logo {
  flex: 0 0 auto;
  gap: 9px;
  line-height: 1;
}
.brand-logo img {
  display: block;
  width: 44px;
  height: 42px;
  object-fit: contain;
}
.brand-logo strong {
  color: var(--brand-navy);
  font-size: 22px;
  letter-spacing: 0;
}
.nav-links { display: flex; align-items: center; gap: 18px; color: var(--brand-navy); font-size: 14px; font-weight: 850; }
.nav-links a { transition: color .18s ease, transform .18s ease; }
.nav-links a:hover { color: var(--brand-orange); transform: translateY(-1px); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  color: var(--color-dark-secondary);
  background: var(--gradient-primary);
  background-size: 180% 180%;
  font-weight: 850;
  box-shadow: var(--shadow-primary);
  transition: transform .18s ease, box-shadow .18s ease, background-position .35s ease;
}
.button:hover { transform: translateY(-2px); background-position: 100% 50%; box-shadow: 0 24px 62px rgba(255, 148, 0, .24); }
.button > span { transition: transform .2s ease; }
.button:hover > span { transform: translateX(4px); }
.button:active { transform: translateY(0) scale(.98); }
.button.small { min-height: 42px; padding-inline: 16px; font-size: 14px; }
.button.ghost { color: var(--color-text-light); background: rgba(255,253,248,.06); border: 1px solid var(--color-border-dark); box-shadow: none; }
.button.magnetic { --mx: 0px; --my: 0px; transform: translate3d(var(--mx), var(--my), 0); }
.button.magnetic:hover { transform: translate3d(var(--mx), calc(var(--my) - 2px), 0); }
.button.magnetic:active { transform: translate3d(var(--mx), var(--my), 0) scale(.98); }
.button:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(255, 148, 0, .56);
  outline-offset: 3px;
}
.mobile-toggle {
  display: none;
  width: 46px;
  height: 46px;
  place-items: center;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--color-border-light);
  background: var(--white);
  border-radius: 14px;
}
.mobile-toggle span { display: block; width: 20px; height: 2px; background: var(--white); }
.mega-menu, .mobile-panel {
  position: absolute;
  left: clamp(18px, 4vw, 64px);
  right: clamp(18px, 4vw, 64px);
  top: calc(100% + 8px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  color: var(--white);
  background: rgba(23, 22, 107, .96);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 90px rgba(0,0,0,.34);
  backdrop-filter: blur(22px);
  animation: menuIn .24s ease both;
}
.mega-menu a {
  min-height: 138px;
  padding: 16px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  animation: itemIn .24s ease both;
  animation-delay: calc(var(--i) * 32ms);
}
.mega-menu span, .icon {
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--gradient-primary);
  font-weight: 950;
}
.mega-menu span { width: 36px; height: 36px; margin-bottom: 12px; border-radius: 12px; font-size: 12px; }
.mega-menu strong { display: block; margin-bottom: 8px; }
.mega-menu small { color: rgba(255,255,255,.64); line-height: 1.45; }

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(430px, .98fr);
  gap: clamp(32px, 6vw, 84px);
  align-items: center;
  margin-top: -75px;
  padding: 148px clamp(18px, 4vw, 64px) 90px;
  color: var(--brand-navy);
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 148, 0, .12), transparent 32%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 68%, #F8F9FC 100%);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.parallax-slow { transform: translate3d(0, var(--parallax-slow, 0px), 0); }
.parallax-medium { transform: translate3d(0, var(--parallax-medium, 0px), 0); }
.parallax-fast { transform: translate3d(0, var(--parallax-fast, 0px), 0); }
.parallax-grid { transform: translate3d(0, var(--parallax-grid, 0px), 0); }
.orb { position: absolute; aspect-ratio: 1; border-radius: 999px; filter: blur(14px); opacity: .82; }
.orb-one { width: 46vw; right: -14vw; top: 4vh; background: var(--gradient-glow); animation: floatOne 10s ease-in-out infinite; }
.orb-two { width: 38vw; left: -16vw; bottom: -18vh; background: radial-gradient(circle at center, rgba(23, 22, 107, .12), transparent 68%); animation: floatTwo 12s ease-in-out infinite; }
.orb-three { width: 24vw; right: 28vw; bottom: 12vh; background: radial-gradient(circle at center, rgba(255, 148, 0, .12), transparent 70%); animation: floatThree 14s ease-in-out infinite; }
.grid-glow {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(23,22,107,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(23,22,107,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 52% 34%, black, transparent 74%);
}
.hero-copy, .ecosystem { position: relative; z-index: 1; }
.hero-copy { max-width: 860px; animation: itemIn .65s ease both; }
.eyebrow {
  margin: 0 0 16px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero .eyebrow { color: var(--brand-orange); }
.dark .eyebrow, .cta .eyebrow, .detail-hero .eyebrow { color: var(--color-primary-lighter); }
h1, h2, h3 { margin: 0; letter-spacing: 0; }
h1 { font-size: clamp(3rem, 6.8vw, 7.3rem); line-height: .95; max-width: 1050px; }
h2 { font-size: clamp(2.1rem, 4.4vw, 4.7rem); line-height: 1.02; }
h3 { line-height: 1.12; }
.gradient-text {
  color: transparent;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
}
.gradient-text.warm { background-image: var(--gradient-accent); }
.hero p:not(.eyebrow) { max-width: 760px; color: var(--text-secondary); font-size: clamp(17px, 1.7vw, 21px); line-height: 1.68; }
.actions, .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.trust-row span, .status-pills span, .pill-list span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--brand-navy);
  background: var(--white);
  border: 1px solid var(--color-border-light);
  font-size: 13px;
  font-weight: 850;
}

.ecosystem {
  position: relative;
  min-height: 560px;
  isolation: isolate;
  border-radius: var(--radius-xl);
  background-color: #F5F7FC;
  background-image:
    linear-gradient(rgba(23, 22, 107, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 22, 107, .055) 1px, transparent 1px);
  background-size: 72px 72px;
  border: 1px solid #DCE3F2;
  box-shadow: 0 34px 92px rgba(23, 22, 107, .13);
  overflow: hidden;
  animation: scaleIn .7s ease .16s both;
}
.connector-map { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; opacity: 1; }
.connector-line {
  fill: none;
  stroke: rgba(73, 102, 214, .42);
  stroke-width: 2;
  stroke-dasharray: 8 10;
  animation: dashMove 4.5s linear infinite;
}
.connector-pulse {
  fill: var(--brand-orange);
  stroke: #FFFFFF;
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(255, 148, 0, .8));
}
.central-node {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 48%;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  color: #FFFFFF;
  background: linear-gradient(145deg, var(--brand-navy), var(--brand-navy-deep));
  border: 2px solid var(--brand-orange);
  box-shadow: 0 0 0 11px rgba(73, 102, 214, .08), 0 20px 54px rgba(23, 22, 107, .24);
}
.central-node::before,
.central-node::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border: 1px dashed rgba(73, 102, 214, .28);
  border-radius: 50%;
}
.central-node::before { inset: -38px; }
.central-node::after { inset: -72px; border-style: solid; border-color: rgba(73, 102, 214, .13); }
.central-node span {
  color: #FFFFFF;
  font-size: 34px;
  font-weight: 950;
}
.central-node strong,
.central-node__title {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  opacity: 1;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .22);
}
.central-node small,
.central-node__subtitle {
  color: rgba(255, 255, 255, .78);
  opacity: 1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .2);
}
.service-node {
  position: absolute;
  z-index: 4;
  width: 142px;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid #C9D4F6;
  box-shadow: 0 14px 36px rgba(23, 22, 107, .11);
  animation: nodeFloat 7s ease-in-out infinite;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.service-node:hover {
  border-color: rgba(255, 148, 0, .75);
  box-shadow: 0 20px 44px rgba(23, 22, 107, .15), 0 0 0 3px rgba(255, 148, 0, .08);
}
.service-node span { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 12px; color: var(--white); background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-light)); font-size: 12px; font-weight: 950; box-shadow: 0 7px 18px rgba(255, 148, 0, .22); }
.service-node strong,
.service-node__title {
  color: var(--brand-navy);
  font-size: 13px;
  font-weight: 700;
  opacity: 1;
  line-height: 1.18;
  text-shadow: none;
}
.service-node__subtitle {
  color: var(--text-secondary);
  opacity: 1;
}
.node-0 { left: 6%; top: 11%; }
.node-1 { right: 8%; top: 11%; }
.node-2 { left: 5%; top: 42%; }
.node-3 { right: 4%; top: 42%; }
.node-4 { left: 8%; bottom: 10%; }
.node-5 { right: 8%; bottom: 10%; }
.node-6 { left: 39%; top: 4%; }
.node-7 { left: 39%; bottom: 4%; }
.mini-dashboard {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  display: none;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: rgba(23, 22, 107, .78);
  border: 1px solid rgba(255,255,255,.13);
}
.dash-head { display: flex; justify-content: space-between; color: rgba(255,255,255,.68); font-size: 12px; font-weight: 950; text-transform: uppercase; }
.dash-head strong { color: var(--color-primary-lighter); }
.signal-bars { height: 88px; display: flex; align-items: end; gap: 9px; margin-top: 16px; }
.signal-bars span { flex: 1; border-radius: 10px 10px 0 0; background: var(--gradient-primary); animation: pulseBar 2.8s ease-in-out infinite; }
.status-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.logo-strip {
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  background: #F8F9FC;
  border-bottom: 1px solid var(--line);
}
.logo-strip::before, .logo-strip::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 1;
  width: 110px;
  height: 100%;
  pointer-events: none;
}
.logo-strip::before { left: 0; background: linear-gradient(90deg, #F8F9FC, transparent); }
.logo-strip::after { right: 0; background: linear-gradient(270deg, #F8F9FC, transparent); }
.marquee-track {
  display: flex;
  width: max-content;
  gap: 10px;
  animation: marquee 26s linear infinite;
}
.logo-strip:hover .marquee-track { animation-play-state: paused; }
.logo-strip span {
  min-width: 150px;
  min-height: 54px;
  display: grid;
  place-items: center;
  color: var(--color-text-secondary);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-weight: 950;
}

.ai-lab {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 112px clamp(18px, 4vw, 64px) 124px;
  color: var(--brand-navy);
  background: var(--white);
  border-bottom: 1px solid var(--color-border-light);
}
.ai-lab-grid-bg {
  position: absolute;
  z-index: -3;
  inset: -120px -6% auto;
  height: 760px;
  pointer-events: none;
  opacity: .46;
  background-image:
    linear-gradient(rgba(23, 22, 107, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 22, 107, .055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 92%);
}
.ai-lab-glow {
  position: absolute;
  z-index: -2;
  top: -180px;
  right: -12%;
  width: 72%;
  height: 900px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 148, 0, .12), transparent 67%);
}
.ai-lab-particles {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}
.ai-lab-particles i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-orange);
  box-shadow: 0 0 16px rgba(255, 148, 0, .48);
}
.ai-lab-inner {
  width: min(100%, var(--wide));
  margin: 0 auto;
}
.ai-lab-hero {
  display: grid;
  grid-template-columns: minmax(360px, .72fr) minmax(680px, 1.28fr);
  gap: clamp(38px, 5vw, 84px);
  align-items: center;
}
.ai-lab-copy { max-width: 610px; }
.ai-lab-copy h2 {
  max-width: 690px;
  margin: 16px 0 24px;
  color: var(--brand-navy);
  font-size: clamp(3.4rem, 6.8vw, 7rem);
  line-height: .95;
  letter-spacing: 0;
}
.ai-lab-copy h2 span {
  display: inline-block;
  margin-right: .2em;
}
.ai-lab-copy h2 span:nth-child(2) { color: var(--brand-orange); }
.ai-lab-copy h2 span:last-child { margin-right: 0; }
.ai-lab-copy > p:not(.eyebrow) {
  max-width: 620px;
  color: var(--text-secondary);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.72;
}
.ai-lab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.ai-lab .button.secondary {
  color: var(--brand-navy);
  background: var(--white);
  border: 1px solid rgba(23, 22, 107, .34);
  box-shadow: 0 12px 34px rgba(23, 22, 107, .08);
}
.ai-lab .button.secondary:hover {
  color: var(--brand-orange-hover);
  border-color: var(--brand-orange);
  box-shadow: 0 18px 42px rgba(255, 148, 0, .14);
}
.ai-lab-magnetic { will-change: transform; }
.ai-lab-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.ai-lab-proof span {
  padding: 8px 11px;
  color: var(--text-secondary);
  background: var(--background-soft);
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}
.ai-ecosystem-wrap {
  min-width: 0;
  perspective: 1200px;
}
.ai-ecosystem-stage {
  position: relative;
  width: min(100%, 760px);
  min-height: 650px;
  margin-left: auto;
  border: 1px solid rgba(23, 22, 107, .18);
  border-radius: 30px;
  background:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px),
    var(--brand-navy-deep);
  background-size: 42px 42px;
  box-shadow: 0 34px 100px rgba(9, 8, 58, .2);
  overflow: hidden;
}
.ai-ecosystem-stage::before {
  content: "";
  position: absolute;
  inset: 8% 18%;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255, 148, 0, .16), transparent 68%);
}
.ai-ecosystem-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ai-lab-line-base,
.ai-lab-line-flow {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.ai-lab-line-base { stroke: rgba(255, 255, 255, .13); stroke-width: 1.2; }
.ai-lab-line-flow {
  stroke: var(--brand-orange);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 5 9;
  filter: drop-shadow(0 0 5px rgba(255, 148, 0, .55));
}
.ai-lab-hub {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 48.5%;
  width: 184px;
  height: 184px;
  display: grid;
  place-content: center;
  justify-items: center;
  transform: translate(-50%, -50%);
  color: var(--white);
  background: var(--brand-navy-dark);
  border: 1px solid rgba(255, 179, 71, .72);
  border-radius: 50%;
  box-shadow: 0 0 0 14px rgba(255, 148, 0, .045), 0 0 64px rgba(255, 148, 0, .28);
}
.ai-lab-hub i {
  position: absolute;
  inset: -13px;
  border: 1px dashed rgba(255, 179, 71, .42);
  border-radius: 50%;
}
.ai-lab-hub span {
  color: var(--brand-orange-light);
  font-size: 12px;
  font-weight: 950;
}
.ai-lab-hub strong {
  margin-top: 2px;
  color: var(--white);
  font-size: 28px;
  line-height: 1;
}
.ai-lab-hub small { margin-top: 8px; color: rgba(255, 255, 255, .66); }
.ai-ecosystem-node {
  position: absolute;
  z-index: 4;
  width: 178px;
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  color: var(--white);
  background: rgba(18, 17, 63, .96);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .24);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ai-ecosystem-node:hover {
  border-color: rgba(255, 148, 0, .82);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .3), 0 0 28px rgba(255, 148, 0, .13);
}
.ai-lab-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  color: var(--brand-orange-light);
  background: rgba(255, 148, 0, .1);
  border: 1px solid rgba(255, 148, 0, .28);
  border-radius: 13px;
  font-size: 11px;
  font-weight: 950;
}
.ai-ecosystem-node strong { display: block; color: var(--white); font-size: 13px; line-height: 1.2; }
.ai-ecosystem-node small { display: block; margin-top: 4px; color: rgba(255, 255, 255, .64); font-size: 10px; line-height: 1.3; }
.ai-ecosystem-node.node-0,
.ai-ecosystem-node.node-1,
.ai-ecosystem-node.node-2,
.ai-ecosystem-node.node-3,
.ai-ecosystem-node.node-4,
.ai-ecosystem-node.node-5,
.ai-ecosystem-node.node-6,
.ai-ecosystem-node.node-7,
.ai-ecosystem-node.node-8 { inset: auto; }
.ai-ecosystem-node.node-0 { left: 38%; top: 4%; }
.ai-ecosystem-node.node-1 { left: 3%; top: 14%; }
.ai-ecosystem-node.node-2 { right: 3%; top: 14%; }
.ai-ecosystem-node.node-3 { left: 1.5%; top: 42%; }
.ai-ecosystem-node.node-4 { right: 1.5%; top: 42%; }
.ai-ecosystem-node.node-5 { left: 5%; bottom: 12%; }
.ai-ecosystem-node.node-6 { right: 5%; bottom: 12%; }
.ai-ecosystem-node.node-7 { left: 25%; bottom: 1.5%; }
.ai-ecosystem-node.node-8 { right: 25%; bottom: 1.5%; }

.ai-lab-slider {
  position: relative;
  width: min(100%, 760px);
  min-height: 650px;
  margin-left: auto;
  color: var(--white);
  background: var(--brand-navy-deep);
  border: 1px solid rgba(23, 22, 107, .2);
  border-radius: 30px;
  box-shadow: 0 34px 100px rgba(9, 8, 58, .2);
  overflow: hidden;
  isolation: isolate;
}
.ai-lab-slider::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: inherit;
}
.ai-lab-slider > .ai-lab-slide {
  position: absolute;
  z-index: 1;
  inset: 0;
  margin: 0;
  cursor: grab;
  touch-action: pan-y;
}
.ai-lab-slide:active { cursor: grabbing; }
.ai-lab-slide picture,
.ai-lab-slide img {
  width: 100%;
  height: 100%;
  display: block;
}
.ai-lab-slide img {
  object-fit: cover;
  object-position: center;
  filter: saturate(.9) contrast(1.04);
  user-select: none;
}
.ai-lab-slide-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 8, 58, .5) 0%, transparent 36%),
    linear-gradient(180deg, transparent 42%, rgba(9, 8, 58, .96) 100%);
  pointer-events: none;
}
.ai-lab-slider > .ai-lab-slider-top {
  position: absolute;
  z-index: 8;
  top: 24px;
  right: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}
.ai-lab-slider-top span,
.ai-lab-slider-top strong {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  color: var(--white);
  background: rgba(9, 8, 58, .58);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  backdrop-filter: blur(12px);
}
.ai-lab-slider-top span { color: var(--brand-orange-light); text-transform: uppercase; }
.ai-lab-slide figcaption {
  position: absolute;
  z-index: 3;
  right: 245px;
  bottom: 31px;
  left: 32px;
  max-width: 520px;
}
.ai-lab-slide figcaption > span {
  display: block;
  margin-bottom: 8px;
  color: var(--brand-orange-light);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}
.ai-lab-slide figcaption > strong {
  display: block;
  color: var(--white);
  font-size: clamp(1.65rem, 3vw, 2.65rem);
  line-height: 1.08;
}
.ai-lab-slide figcaption p {
  max-width: 520px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, .74);
  font-size: 14px;
  line-height: 1.55;
}
.ai-lab-slider > .ai-lab-slider-controls {
  position: absolute;
  z-index: 9;
  right: 25px;
  bottom: 27px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.ai-lab-slider-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-lab-slider-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  background: rgba(255, 255, 255, .42);
  border: 0;
  border-radius: 50%;
  transition: width .22s ease, background .22s ease;
}
.ai-lab-slider-dots button.active {
  width: 24px;
  background: var(--brand-orange);
  border-radius: 999px;
}
.ai-lab-slider-arrows { display: flex; gap: 7px; }
.ai-lab-slider-arrows button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--brand-navy);
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
  font-size: 18px;
  font-weight: 950;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.ai-lab-slider-arrows button:hover {
  color: var(--white);
  background: var(--brand-orange);
  transform: translateY(-2px);
}
.ai-lab-slider button:focus-visible {
  outline: 3px solid var(--brand-orange-light);
  outline-offset: 3px;
}

.ai-lab-block {
  position: relative;
  padding-top: 104px;
  margin-top: 104px;
  border-top: 1px solid var(--color-border-light);
}
.ai-lab-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr);
  gap: 32px;
  align-items: end;
  margin-bottom: 42px;
}
.ai-lab-section-head h3,
.ai-dashboard-copy h3 {
  max-width: 820px;
  margin: 12px 0 0;
  color: var(--brand-navy);
  font-size: clamp(2.2rem, 4.3vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: 0;
}
.ai-lab-section-head > p,
.ai-dashboard-copy > p:not(.eyebrow) {
  margin: 0;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.68;
}
.ai-solutions-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.ai-solution-card {
  position: relative;
  min-height: 238px;
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(23, 22, 107, .06);
  overflow: hidden;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.ai-solution-card.featured { grid-column: span 2; }
.ai-solution-card:hover {
  border-color: rgba(255, 148, 0, .58);
  box-shadow: 0 24px 58px rgba(23, 22, 107, .11);
}
.ai-solution-card h4 {
  margin: 20px 0 9px;
  color: var(--brand-navy);
  font-size: 20px;
  line-height: 1.2;
}
.ai-solution-card p { margin: 0; color: var(--text-secondary); line-height: 1.58; }
.ai-lab-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  margin-top: auto;
  padding-top: 18px;
  color: var(--brand-navy);
  font-size: 13px;
  font-weight: 900;
}
.ai-lab-card-link span { color: var(--brand-orange); transition: transform .2s ease; }
.ai-lab-card-link:hover span { transform: translateX(4px); }

.ai-process-block .ai-lab-section-head {
  position: sticky;
  z-index: 6;
  top: 76px;
  padding: 18px 0;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(16px);
}
.ai-process-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(100px, 1fr));
  gap: 10px;
  padding-top: 42px;
}
.ai-process-track > svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  overflow: visible;
}
.ai-process-line-base,
.ai-process-line-flow { fill: none; vector-effect: non-scaling-stroke; }
.ai-process-line-base { stroke: var(--color-border-medium); stroke-width: 2; }
.ai-process-line-flow { stroke: var(--brand-orange); stroke-width: 3; stroke-linecap: round; }
.ai-process-track article {
  position: relative;
  min-height: 132px;
  display: grid;
  align-content: start;
  gap: 13px;
  padding: 17px 14px;
  background: var(--background-soft);
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
}
.ai-process-track article::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translateX(-50%);
  background: var(--brand-orange);
  border: 3px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 148, 0, .38), 0 0 18px rgba(255, 148, 0, .24);
}
.ai-process-track article span { color: var(--brand-orange-hover); font-size: 12px; font-weight: 950; }
.ai-process-track article strong { color: var(--brand-navy); font-size: 14px; line-height: 1.3; }
.ai-process-track article i { position: absolute; top: 50%; right: -12px; z-index: 2; color: var(--brand-orange); font-style: normal; font-weight: 950; }

.ai-lab-split-block {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 46px;
}
.ai-lab-split-block .ai-lab-section-head { display: block; }
.ai-lab-split-block .ai-lab-section-head > p { margin-top: 16px; }
.ai-lab-split-block .ai-lab-section-head h3 { font-size: clamp(2rem, 3.2vw, 3.4rem); }
.ai-model-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ai-model-grid article,
.ai-industry-grid article {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 13px;
  background: var(--white);
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(23, 22, 107, .05);
}
.ai-model-grid article span,
.ai-industry-grid article span {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  color: var(--brand-orange-hover);
  background: var(--brand-orange-soft);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 950;
}
.ai-model-grid article strong,
.ai-industry-grid article strong { color: var(--brand-navy); font-size: 14px; }
.ai-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ai-capability-card {
  padding: 0 15px;
  background: var(--background-soft);
  border: 1px solid var(--color-border-light);
  border-radius: 15px;
}
.ai-capability-card summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--brand-navy);
  list-style: none;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}
.ai-capability-card summary::-webkit-details-marker { display: none; }
.ai-capability-card summary span {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  color: var(--brand-orange-hover);
  background: var(--brand-orange-soft);
  border-radius: 50%;
  transition: transform .2s ease;
}
.ai-capability-card[open] summary span { transform: rotate(45deg); }
.ai-capability-card p { margin: -2px 0 15px 31px; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
@media (min-width: 761px) {
  .ai-capability-card > p { display: block !important; }
}

.ai-industry-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.ai-industry-grid article { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.ai-industry-grid article:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 148, 0, .48);
  box-shadow: 0 18px 42px rgba(23, 22, 107, .09);
}

.ai-dashboard-block {
  display: grid;
  grid-template-columns: minmax(300px, .62fr) minmax(680px, 1.38fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ai-dashboard-copy { max-width: 480px; }
.ai-dashboard-copy h3 { margin-bottom: 22px; }
.product-preview-label {
  display: inline-flex;
  width: max-content;
  margin: 22px 0;
  padding: 8px 11px;
  color: var(--brand-orange-hover);
  background: var(--brand-orange-soft);
  border: 1px solid rgba(255, 148, 0, .26);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}
.ai-dashboard-copy .button { display: flex; width: max-content; }
.ai-live-dashboard {
  position: relative;
  padding: 20px;
  color: var(--white);
  background: var(--brand-navy-deep);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  box-shadow: 0 30px 88px rgba(9, 8, 58, .25);
  overflow: hidden;
}
.ai-live-dashboard > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
}
.ai-live-dashboard > header div { display: grid; gap: 4px; }
.ai-live-dashboard > header span { color: var(--brand-orange-light); font-size: 11px; font-weight: 950; text-transform: uppercase; }
.ai-live-dashboard > header strong { color: var(--white); }
.ai-live-dashboard > header small { color: rgba(255, 255, 255, .58); }
.ai-preview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.ai-preview-metrics article {
  min-height: 92px;
  display: grid;
  align-content: space-between;
  padding: 14px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 15px;
}
.ai-preview-metrics span { color: rgba(255, 255, 255, .62); font-size: 11px; font-weight: 800; }
.ai-preview-metrics strong { color: var(--white); font-size: clamp(1.45rem, 2.8vw, 2.2rem); line-height: 1; }
.ai-preview-panels {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr);
  gap: 12px;
  margin-top: 12px;
}
.ai-preview-chart,
.ai-preview-status {
  min-height: 220px;
  padding: 15px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
}
.ai-preview-chart > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.ai-preview-chart strong,
.ai-preview-status > strong { color: var(--white); font-size: 13px; }
.ai-preview-chart > div:first-child span { color: rgba(255, 255, 255, .55); font-size: 11px; }
.ai-preview-bars {
  height: 158px;
  display: flex;
  align-items: end;
  gap: 7px;
  padding-top: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.ai-preview-bars i {
  flex: 1;
  min-width: 5px;
  transform-origin: bottom;
  background: linear-gradient(180deg, var(--brand-orange-light), var(--brand-orange-hover));
  border-radius: 6px 6px 2px 2px;
  box-shadow: 0 0 16px rgba(255, 148, 0, .12);
}
.ai-preview-status { display: grid; align-content: start; gap: 15px; }
.ai-preview-status > div { display: grid; gap: 7px; }
.ai-preview-status span { display: flex; justify-content: space-between; gap: 10px; color: rgba(255, 255, 255, .7); font-size: 11px; }
.ai-preview-status small { color: var(--brand-orange-light); }
.ai-preview-status i {
  height: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, .09);
  border-radius: 999px;
}
.ai-preview-status b {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left;
  background: var(--gradient-primary);
  border-radius: inherit;
}

.sticky-story {
  position: relative;
  min-height: 360vh;
  padding: 0 clamp(18px, 4vw, 64px);
  color: var(--brand-navy);
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 148, 0, .08), transparent 32%),
    #F8F9FC;
}
.story-track {
  position: sticky;
  top: 0;
  min-height: 100vh;
  max-width: var(--wide);
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(460px, 1fr);
  gap: clamp(28px, 6vw, 84px);
  align-items: center;
  margin: 0 auto;
  padding: 78px 0 22px;
}
.story-copy h2 {
  max-width: 680px;
  font-size: clamp(2.55rem, 4.2vw, 4.25rem);
  line-height: 1;
}
.story-copy > p:not(.eyebrow) {
  max-width: 590px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.58;
}
.story-motion-options {
  width: max-content;
  display: grid;
  grid-template-columns: auto repeat(3, minmax(82px, 1fr));
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  padding: 5px;
  border: 1px solid var(--color-border-light);
  border-radius: 14px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 10px 28px rgba(23, 22, 107, .06);
}
.story-motion-label {
  padding: 0 10px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.story-motion-options button {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--brand-navy);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}
.story-motion-options button:hover { background: var(--background-muted); }
.story-motion-options button.active {
  color: var(--brand-navy-deep);
  border-color: rgba(255, 148, 0, .28);
  background: var(--brand-orange-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 148, 0, .08);
}
.story-motion-options button:focus-visible {
  outline: 3px solid rgba(255, 148, 0, .24);
  outline-offset: 2px;
}
.story-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.story-step-tab {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 3px 10px;
  min-height: 88px;
  padding: 12px;
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  color: inherit;
  font: inherit;
  text-align: left;
  background: var(--white);
  opacity: .62;
  transform: translateX(calc((var(--i) - var(--story-progress, 0) * 4) * 2px));
  transition: opacity .28s ease, border-color .28s ease, background .28s ease, transform .28s ease, box-shadow .28s ease;
}
.story-step-tab:hover {
  border-color: rgba(255, 148, 0, .26);
  box-shadow: 0 14px 32px rgba(23, 22, 107, .07);
}
.story-step-tab.active {
  opacity: 1;
  border-color: rgba(255, 148, 0, .42);
  background: rgba(255, 148, 0, .09);
  transform: translateX(0);
  box-shadow: 0 16px 36px rgba(255, 148, 0, .09);
}
.story-step-tab:focus-visible {
  outline: 3px solid rgba(255, 148, 0, .24);
  outline-offset: 2px;
}
.story-steps span {
  grid-row: span 2;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--primary-light);
  background: rgba(255, 148, 0, .1);
  border-radius: 11px;
  font-weight: 950;
}
.story-steps strong { color: var(--brand-navy); font-size: 14px; }
.story-steps p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.38; }
.story-visual {
  position: relative;
  padding: 18px;
  border: 1px solid var(--border-navy);
  border-radius: 32px;
  background: linear-gradient(180deg, var(--brand-navy-deep), var(--brand-navy-dark));
  box-shadow: var(--shadow-dark);
  overflow: hidden;
}
.assembly-frame {
  position: relative;
  display: grid;
  gap: 16px;
  min-height: 560px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(23, 22, 107, .72);
  border: 1px solid rgba(226,232,240,.1);
}
.assembly-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226,232,240,.1);
}
.assembly-top span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--dark-surface);
}
.assembly-top span:nth-child(2) { background: var(--secondary); }
.assembly-top span:nth-child(3) { background: var(--primary-light); }
.assembly-top strong { margin-left: 8px; color: var(--color-text-light-muted); font-size: 13px; }
.assembly-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.assembly-panel {
  min-height: 150px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(226,232,240,.1);
  animation: panelAssemble .7s cubic-bezier(.22, 1, .36, 1) both;
}
.assembly-panel.primary-panel { background: rgba(255, 148, 0, .09); border-color: rgba(255, 148, 0, .3); }
.assembly-panel.wide { grid-column: 1 / -1; min-height: 190px; }
.assembly-panel span { color: var(--color-text-light-muted); font-size: 13px; font-weight: 850; }
.assembly-panel strong { display: block; margin-top: 10px; color: var(--color-text-light); font-size: clamp(2.8rem, 6vw, 5.6rem); line-height: 1; }
.assembly-panel p { color: var(--color-text-light-muted); line-height: 1.55; }
.story-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 22px;
}
.story-flow i {
  height: 74px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(226,232,240,.1);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.story-flow i.lit {
  background: linear-gradient(180deg, rgba(255, 148, 0, .34), rgba(255, 148, 0, .08));
  border-color: rgba(255, 148, 0, .34);
  box-shadow: 0 18px 44px rgba(255, 148, 0, .12);
}
.assembly-line {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 102px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary-light), transparent);
  transform: scaleX(calc(.2 + var(--story-progress, 0) * .8));
  transform-origin: left;
}
.assembly-nodes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-self: end;
}
.assembly-nodes b {
  padding: 9px 12px;
  color: var(--color-text-light-muted);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(226,232,240,.11);
  border-radius: 999px;
  animation: itemIn .5s ease both;
  animation-delay: calc(var(--i) * 80ms);
}
.story-image-frame {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.story-stage-progress {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}
.story-stage-progress i {
  width: clamp(18px, 3vw, 42px);
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  transition: background .32s ease, box-shadow .32s ease, transform .32s ease;
}
.story-stage-progress i.complete { background: rgba(255, 148, 0, .38); }
.story-stage-progress i.active {
  background: var(--brand-orange);
  box-shadow: 0 0 14px rgba(255, 148, 0, .42);
  transform: scaleY(1.35);
}
.story-layer-stack {
  position: relative;
  align-self: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  perspective: 1200px;
}
.story-image-reveal {
  position: absolute;
  inset: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 148, 0, .28);
  border-radius: 22px;
  background: var(--brand-navy-deep);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  transform-origin: center top;
  will-change: transform, opacity, filter;
}
.story-image-reveal picture {
  display: block;
  width: 100%;
  height: 100%;
}
.story-image-reveal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.story-image-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 48%, rgba(9, 8, 58, .78) 100%);
  opacity: .54;
  transition: opacity .35s ease;
}
.story-image-caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: grid;
  gap: 4px;
  color: var(--white);
  pointer-events: none;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .48);
}
.story-image-caption span {
  color: var(--brand-orange-light);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.story-image-caption strong {
  max-width: 440px;
  font-size: clamp(1rem, 2vw, 1.4rem);
  line-height: 1.2;
}
.story-image-reveal:hover .story-image-overlay { opacity: .68; }

.section { padding: 96px clamp(18px, 4vw, 64px); }
.section > * { max-width: var(--container); margin-left: auto; margin-right: auto; }
.section.dark { color: var(--white); background: var(--gradient-dark); }
.transition-section { background: var(--gradient-light); }
.light-section, .showcase-section, .industries-section, .faq-section { background: var(--white); }
.services-intro, .digital-delivery, .process-section, .faq-section { background: var(--white); }
.section.workflow-section {
  color: var(--brand-navy);
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 148, 0, .08), transparent 30%),
    #F8F9FC;
}
.section.analytics-showcase {
  color: var(--brand-navy);
  background: var(--white);
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 34px;
  margin-bottom: 36px;
}
.section-head > div { max-width: 840px; }
.section-head > p { max-width: 520px; margin: 0; color: var(--muted); line-height: 1.65; font-size: 17px; }
.dark .section-head > p { color: rgba(255,255,255,.68); }
.workflow-section .section-head h2,
.analytics-showcase .section-head h2,
.process-section .section-head h2 { color: var(--brand-navy); }
.workflow-section .eyebrow,
.analytics-showcase .eyebrow,
.process-section .eyebrow { color: var(--brand-orange); }
.workflow-section .section-head > p,
.analytics-showcase .section-head > p,
.process-section .section-head > p { color: var(--text-secondary); }

.service-grid, .case-grid, .benefit-grid, .industry-grid, .stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.card, .step, .case-card, .benefit, .auth-card, .contact-form, .contact-card, .testimonial-card, .faq, .tab-panel, .browser-visual, .industry-card, .stats-grid article {
  border-radius: var(--radius-lg);
}
.card.service {
  position: relative;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-soft);
  animation: itemIn .5s ease both;
  animation-delay: calc(var(--i) * 60ms);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card.service::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity .22s ease;
}
.spotlight-card::after, .case-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(320px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 148, 0, .12), transparent 45%);
  transition: opacity .22s ease;
}
.spotlight-card:hover::after, .case-card:hover::after { opacity: 1; }
.spotlight-card > *, .case-card > * { position: relative; z-index: 1; }
.animated-card:hover { transform: translateY(-7px); border-color: var(--color-border-accent); box-shadow: var(--shadow-medium); }
.animated-card:hover::before { opacity: 1; }
.icon {
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border-radius: 16px;
  font-size: 12px;
  box-shadow: var(--shadow-primary);
}
.service h3 { margin: 0 0 12px; font-size: 23px; }
.service p { margin: 0; color: var(--muted); line-height: 1.6; }
.service ul { display: grid; gap: 8px; margin: auto 0 0; padding: 22px 0 0; list-style: none; color: var(--color-text-secondary); }
.service li::before { content: "+"; margin-right: 8px; color: var(--accent); font-weight: 950; }
.card-link { margin-top: 20px; color: var(--accent); font-weight: 950; }

.workflow { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.workflow::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 42px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary-light), var(--color-primary), var(--color-navy-accent), transparent);
  animation: glowSweep 3.8s ease-in-out infinite;
}
.workflow-step, .step, .case-card {
  position: relative;
  padding: 24px;
  background: rgba(255, 253, 248, .045);
  border: 1px solid var(--color-border-dark);
  animation: itemIn .48s ease both;
  animation-delay: calc(var(--i) * 70ms);
}
.workflow-step { border-radius: var(--radius-lg); }
.workflow-step span, .step span, .case-card span { color: var(--color-primary-lighter); font-weight: 950; }
.workflow-step h3 { margin: 18px 0 10px; }
.workflow-step p, .step p, .case-card p { color: rgba(255,255,255,.7); line-height: 1.6; }
.workflow-section .workflow {
  padding: clamp(18px, 3vw, 28px);
  color: var(--white);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--brand-navy-deep), var(--brand-navy-dark));
  box-shadow: var(--shadow-dark);
}
.workflow-section .workflow-step {
  color: var(--white);
  background: rgba(255,255,255,.055);
}

.analytics-showcase {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  background:
    radial-gradient(circle at 76% 22%, rgba(255, 148, 0, .08), transparent 34%),
    var(--white);
}
.analytics-copy { max-width: 620px; }
.analytics-copy h2 { max-width: 760px; }
.analytics-copy > p:not(.eyebrow) { margin: 20px 0 0; color: var(--text-secondary); font-size: 18px; line-height: 1.68; }
.analytics-benefits { display: grid; gap: 10px; margin: 26px 0 30px; }
.analytics-benefits span {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--text-secondary);
  font-weight: 850;
}
.analytics-benefits span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary-light);
  box-shadow: 0 0 18px rgba(255, 148, 0, .32);
}
.analytics-dashboard {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 18px;
  color: var(--color-text-light);
  background: linear-gradient(180deg, var(--brand-navy-deep), var(--brand-navy-dark));
  border: 1px solid var(--color-border-dark);
  border-radius: 28px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px);
  overflow: hidden;
  animation: scaleIn .7s ease both;
}
.analytics-topbar, .graph-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}
.analytics-topbar span, .graph-head span, .metric-card small, .channel-row span, .analytics-legend span {
  color: var(--color-text-light-muted);
}
.analytics-topbar strong { display: block; margin-top: 4px; }
.analytics-topbar button {
  min-height: 38px;
  padding: 0 13px;
  color: var(--color-text-light);
  background: rgba(255,255,255,.055);
  border: 1px solid var(--color-border-dark);
  border-radius: 999px;
  font-weight: 850;
}
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.metric-card {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,253,248,.045);
  border: 1px solid var(--color-border-dark);
  animation: itemIn .48s ease both;
  animation-delay: calc(var(--i) * 80ms);
}
.metric-card span { color: var(--color-primary-light); font-size: 12px; font-weight: 950; text-transform: uppercase; }
.metric-card strong { display: block; margin-top: 10px; color: var(--color-text-light); font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; }
.metric-card p { margin: 8px 0 4px; color: var(--color-text-light); font-weight: 850; }
.graph-panel {
  position: relative;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,253,248,.06), rgba(255,253,248,.025));
  border: 1px solid var(--color-border-dark);
}
.growth-chart { width: 100%; min-height: 260px; overflow: visible; }
.growth-chart line { stroke: rgba(250,248,244,.08); stroke-width: 1; }
.growth-chart text { fill: var(--color-text-on-dark-muted, #968f86); font-size: 13px; }
.chart-area { fill: rgba(255, 148, 0, .1); opacity: 0; animation: areaFade .9s ease .7s both; }
.chart-line {
  fill: none;
  stroke: var(--color-primary-light);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  filter: drop-shadow(0 0 12px rgba(255, 148, 0, .24));
  animation: drawLine 1.3s cubic-bezier(.22,1,.36,1) .35s both;
}
.chart-dot {
  fill: var(--surface-dark-elevated);
  stroke: var(--color-primary-light);
  stroke-width: 3;
  opacity: 0;
  animation: dotIn .35s ease both;
  animation-delay: calc(.75s + var(--i) * 120ms);
}
.chart-dot.hot { fill: var(--color-primary-light); animation: dotIn .35s ease 1.2s both, pulseDot 2s ease 1.6s infinite; }
.chart-tooltip {
  position: absolute;
  right: 24px;
  top: 74px;
  max-width: 230px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(23, 22, 107, .78);
  border: 1px solid var(--color-border-dark);
  box-shadow: var(--shadow-dark);
}
.chart-tooltip strong { display: block; margin-bottom: 5px; }
.chart-tooltip span { color: var(--color-text-light-muted); font-size: 13px; line-height: 1.45; }
.channel-list { display: grid; gap: 10px; }
.channel-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,253,248,.04);
  border: 1px solid rgba(255, 148, 0, .1);
}
.channel-row strong { display: block; }
.channel-bar {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.channel-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--gradient-primary);
  animation: fillBar .9s ease both;
}
.channel-row b { color: var(--color-primary-light); }
.analytics-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.analytics-legend span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,253,248,.045);
  border: 1px solid rgba(255, 148, 0, .1);
  font-size: 12px;
  font-weight: 800;
}

.service-tabs, .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.service-tabs button, .filter-row button {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--color-text-secondary);
  background: var(--soft);
  border: 1px solid var(--line);
  font-weight: 850;
}
.service-tabs button.active, .filter-row button.active {
  color: var(--white);
  background: var(--gradient-primary);
  border-color: transparent;
}
.tab-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  padding: 28px;
  background: var(--soft);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.tab-panel p { color: var(--muted); line-height: 1.65; }
.pill-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 24px; }
.pill-list span { color: var(--color-text-primary); background: var(--white); border-color: var(--line); }

.digital-delivery {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(circle at 82% 25%, rgba(255, 148, 0, .06), transparent 34%),
    #FFFFFF;
}
.digital-delivery::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background-image:
    linear-gradient(rgba(23, 22, 107, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 22, 107, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 70% 34%, black, transparent 70%);
}
.digital-delivery > * { position: relative; z-index: 1; }
.digital-scroll-story { padding-bottom: 0; }
.digital-delivery-scroll {
  max-width: var(--container);
  min-height: var(--delivery-scroll-height, 460vh);
  margin-inline: auto;
}
.digital-delivery-grid {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: clamp(18px, 2vw, 28px);
  align-items: stretch;
}
.digital-scroll-story .digital-delivery-grid {
  position: sticky;
  top: 72px;
  height: calc(100vh - 72px);
  align-items: center;
  padding: 20px 0;
}
.digital-service-list {
  display: grid;
  gap: 10px;
  align-content: start;
}
.digital-scroll-story .digital-service-list {
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 8px 4px 4px;
  scrollbar-width: none;
}
.digital-scroll-story .digital-service-list::-webkit-scrollbar { display: none; }
.digital-service-item {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px 13px;
  align-items: center;
  min-height: 78px;
  padding: 14px 16px;
  color: var(--color-text-primary);
  text-align: left;
  background: rgba(255, 255, 255, .74);
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(23, 22, 107, .045);
  animation: itemIn .45s ease both;
  animation-delay: calc(var(--i) * 55ms);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.digital-service-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 999px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity .18s ease;
}
.digital-service-item:hover {
  transform: translateX(4px);
  border-color: var(--border-accent, var(--color-border-accent));
}
.digital-service-item[data-active="true"] {
  background: rgba(255, 148, 0, .09);
  border-color: rgba(255, 148, 0, .32);
  box-shadow: 0 18px 46px rgba(23, 22, 107, .08);
}
.digital-service-item[data-active="true"]::before { opacity: 1; }
.digital-service-item span {
  grid-row: span 2;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--color-primary-dark);
  background: var(--color-surface-warm, #faf7f1);
  border: 1px solid var(--color-border-light);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 950;
}
.digital-service-item strong { font-size: 15px; }
.digital-service-item small { color: var(--color-text-secondary); line-height: 1.4; }
.digital-scroll-story .digital-service-item {
  min-height: 64px;
  grid-template-columns: 36px 1fr;
  gap: 4px 10px;
  padding: 10px 12px;
  border-radius: 16px;
}
.digital-scroll-story .digital-service-item::before { top: 12px; bottom: 12px; }
.digital-scroll-story .digital-service-item span {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 10px;
}
.digital-scroll-story .digital-service-item strong { font-size: 13px; }
.digital-scroll-story .digital-service-item small { font-size: 11px; }
.digital-panel-stage {
  position: relative;
  min-width: 0;
  min-height: min(620px, calc(100vh - 112px));
  perspective: 1200px;
}
.digital-service-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 3vw, 42px);
  align-items: center;
  min-height: 520px;
  padding: clamp(24px, 4vw, 38px);
  overflow: hidden;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(23, 22, 107, .1);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(23, 22, 107, .09);
  animation: contentSwap .45s cubic-bezier(.22,1,.36,1) both;
}
.digital-scroll-story .digital-service-panel {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(18px, 2vw, 26px);
  padding: clamp(44px, 5vw, 52px) clamp(22px, 2.4vw, 30px) 20px;
  animation: none;
  transform-origin: center top;
  will-change: transform, opacity, filter;
}
.digital-scroll-story .panel-copy h3 {
  max-width: 11ch;
  font-size: clamp(2.25rem, 3.2vw, 3.35rem);
  line-height: 1;
}
.digital-scroll-story .panel-copy > p:not(.eyebrow) {
  font-size: 15px;
  line-height: 1.48;
}
.digital-scroll-story .capability-grid {
  gap: 7px;
  margin: 14px 0;
}
.digital-scroll-story .capability-grid span {
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.22;
}
.digital-scroll-story .delivery-meta {
  gap: 6px;
  margin-bottom: 14px;
}
.digital-scroll-story .delivery-meta span {
  min-height: 26px;
  padding: 4px 8px;
  font-size: 11px;
}
.digital-scroll-story .panel-copy .button {
  min-height: 44px;
  padding-inline: 17px;
}
.digital-scroll-story .delivery-product { min-height: 340px; }
.digital-scroll-story .delivery-browser {
  gap: 9px;
  padding: 14px;
}
.digital-scroll-story .delivery-browser nav { padding: 9px 11px; }
.digital-scroll-story .delivery-browser .browser-hero { padding: 14px; }
.digital-scroll-story .delivery-browser .browser-hero h4 {
  margin-bottom: 10px;
  font-size: clamp(18px, 1.75vw, 22px);
  overflow-wrap: normal;
  word-break: normal;
}
.digital-scroll-story .delivery-browser aside { padding: 10px; }
.digital-scroll-story .delivery-browser aside div {
  height: 72px;
  margin-top: 8px;
}
.delivery-scroll-progress {
  position: absolute;
  top: 18px;
  right: clamp(24px, 4vw, 38px);
  left: clamp(24px, 4vw, 38px);
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(var(--delivery-count, 10), minmax(0, 1fr));
  gap: 5px;
}
.delivery-scroll-progress i {
  height: 3px;
  border-radius: 999px;
  background: rgba(23, 22, 107, .1);
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.delivery-scroll-progress i.complete { background: rgba(255, 148, 0, .35); }
.delivery-scroll-progress i.active {
  background: var(--brand-orange);
  box-shadow: 0 0 12px rgba(255, 148, 0, .34);
  transform: scaleY(1.35);
}
.panel-copy {
  min-width: 0;
  max-width: 680px;
}
.panel-copy h3 {
  max-width: min(9.5ch, 100%);
  font-size: clamp(2.35rem, 3.5vw, 4.15rem);
  line-height: .98;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.panel-copy > p:not(.eyebrow) { color: var(--color-text-secondary); font-size: 17px; line-height: 1.65; }
.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0;
}
.capability-grid span {
  padding: 12px;
  color: var(--color-text-primary);
  background: var(--color-background-soft);
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  font-weight: 850;
  animation: itemIn .42s ease both;
  animation-delay: calc(var(--i) * 70ms);
}
.delivery-meta, .tech-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.delivery-meta span, .tech-badges span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  color: var(--color-text-secondary);
  background: rgba(255, 148, 0, .08);
  border: 1px solid rgba(255, 148, 0, .16);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}
.delivery-preview {
  position: relative;
  display: grid;
  width: 100%;
  align-content: center;
  justify-items: center;
  gap: 18px;
  min-width: 0;
  overflow: hidden;
  contain: layout paint;
  perspective: 900px;
}
.preview-window {
  width: 100%;
  max-width: 620px;
  min-height: 290px;
  justify-self: end;
  padding: 18px;
  border-radius: 24px;
  background: var(--gradient-dark);
  border: 1px solid var(--color-border-dark);
  box-shadow: var(--shadow-dark);
  transform: rotateX(1.2deg) rotateY(-2deg);
  transition: transform .22s ease;
}
.digital-service-panel:hover .preview-window { transform: rotateX(0deg) rotateY(0deg) translateY(-4px); }
.preview-window > span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--color-primary-dark);
}
.preview-window > span:nth-child(2) { background: var(--color-primary); }
.preview-window > span:nth-child(3) { background: var(--color-primary-light); }
.preview-lines { display: grid; gap: 12px; margin-top: 28px; }
.preview-lines i {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 148, 0, .72), rgba(255,255,255,.08));
  animation: fillBar .8s ease both;
}
.preview-modules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}
.preview-modules b {
  min-height: 76px;
  border-radius: 18px;
  background: rgba(255,253,248,.055);
  border: 1px solid rgba(255, 148, 0, .12);
}
.delivery-phones {
  display: flex;
  justify-content: center;
  gap: 18px;
}
.delivery-phones span {
  width: 118px;
  height: 236px;
  border-radius: 28px;
  background:
    linear-gradient(rgba(250,248,244,.12) 28px, transparent 28px),
    var(--gradient-dark);
  border: 1px solid var(--color-border-dark);
  box-shadow: var(--shadow-dark);
  transform: translateY(14px);
}
.delivery-phones span:nth-child(2) { transform: translateY(-12px); }
.delivery-graph {
  display: flex;
  align-items: end;
  gap: 14px;
  min-height: 285px;
  padding: 18px;
  border-radius: 24px;
  background: var(--gradient-dark);
  border: 1px solid var(--color-border-dark);
}
.delivery-graph i {
  flex: 1;
  border-radius: 14px 14px 0 0;
  background: var(--gradient-primary);
  animation: pulseBar 3.2s ease-in-out infinite;
}
.delivery-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 18px;
  border-radius: 24px;
  background: var(--gradient-light);
  border: 1px solid var(--color-border-light);
}
.delivery-board span {
  min-height: 84px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 148, 0, .12), rgba(255,255,255,.7));
  border: 1px solid var(--color-border-light);
}
.delivery-api {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 280px;
}
.delivery-api span {
  width: 78px;
  height: 78px;
  border-radius: 22px;
  background: var(--gradient-dark);
  border: 1px solid var(--color-border-dark);
  box-shadow: var(--shadow-dark);
}
.delivery-api i {
  width: 58px;
  height: 3px;
  border-radius: 999px;
  background: var(--gradient-primary);
  animation: growX 1.4s ease infinite alternate;
}
.delivery-pipeline {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 24px;
  background: var(--gradient-dark);
  border: 1px solid var(--color-border-dark);
}
.delivery-pipeline span {
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  color: var(--color-text-light);
  border-radius: 18px;
  background: rgba(255,253,248,.06);
  border: 1px solid var(--color-border-dark);
  font-weight: 900;
}
.delivery-support {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  background: var(--gradient-light);
  border: 1px solid var(--color-border-light);
}
.delivery-support span {
  min-height: 70px;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255, 148, 0, .14) 0 34%, transparent 34%),
    var(--color-surface);
  border: 1px solid var(--color-border-light);
}
.connector-strip {
  width: min(560px, 100%);
  height: 3px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.connector-strip i {
  border-radius: 999px;
  background: var(--gradient-primary);
  transform-origin: left;
  animation: growX .75s ease both;
}

.delivery-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 148, 0, .16), transparent 38%),
    linear-gradient(rgba(23, 22, 107, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 22, 107, .045) 1px, transparent 1px);
  background-size: auto, 72px 72px, 72px 72px;
  pointer-events: none;
}
.delivery-product {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(560px, 100%);
  aspect-ratio: 16 / 10;
  min-height: 360px;
  justify-self: center;
  overflow: hidden;
  padding: clamp(16px, 2vw, 22px);
  color: var(--color-text-light);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 148, 0, .22), transparent 34%),
    radial-gradient(circle at 92% 18%, rgba(23, 22, 107, .16), transparent 30%),
    linear-gradient(155deg, #09083A, #172033 58%, #0b1220);
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 24px;
  box-shadow: 0 34px 80px rgba(23, 22, 107, .24);
  transform: rotateX(.8deg) rotateY(-1deg);
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease;
  animation: imageReveal .48s cubic-bezier(.22,1,.36,1) both;
}
.delivery-product :is(header, nav, section, aside, article, div, p, strong, span, button) {
  min-width: 0;
}
.delivery-product::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0 38%, rgba(255,255,255,.16) 48%, transparent 58% 100%);
  transform: translateX(-115%);
  animation: previewSheen 2.8s ease-in-out .45s infinite;
}
.digital-service-panel:hover .delivery-product {
  transform: rotateX(0deg) rotateY(0deg) translateY(-5px);
  box-shadow: 0 42px 96px rgba(23, 22, 107, .28);
}
.delivery-product * { box-sizing: border-box; }
.delivery-product strong { color: inherit; }
.delivery-product button {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  color: #17166B;
  background: linear-gradient(135deg, #FFB347, #FFB347);
  font-size: 11px;
  font-weight: 900;
}
.delivery-browser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, .82fr);
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  background: linear-gradient(180deg, #FAFAFC, #FFF0D9);
  color: var(--color-text-primary);
  border-color: rgba(23, 22, 107, .12);
}
.delivery-browser .browser-hero {
  grid-column: 2;
  grid-row: 3;
}
.delivery-browser .browser-cards { display: none; }
.browser-chrome, .delivery-browser nav {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.browser-chrome span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
}
.browser-chrome strong { margin-left: auto; font-size: 12px; color: var(--color-text-secondary); }
.delivery-browser nav {
  justify-content: space-between;
  padding: 12px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(23, 22, 107, .08);
  border-radius: 16px;
}
.delivery-browser nav span { font-size: 11px; color: var(--color-text-secondary); }
.browser-hero {
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 148, 0, .14), rgba(23, 22, 107, .09));
  border: 1px solid rgba(255, 148, 0, .2);
}
.browser-hero p { margin: 0 0 8px; color: var(--color-primary-dark); font-size: 11px; font-weight: 900; }
.browser-hero h4 { margin: 0 0 14px; font-size: clamp(20px, 2.1vw, 27px); line-height: 1.05; letter-spacing: 0; }
.browser-hero h4,
.browser-cards strong,
.delivery-browser aside strong { overflow-wrap: anywhere; }
.browser-cards { display: grid; gap: 10px; }
.browser-cards article, .delivery-browser aside {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(23, 22, 107, .08);
}
.browser-cards b {
  display: block;
  width: 34px;
  height: 22px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}
.delivery-browser aside { grid-column: 1; grid-row: 3; }
.delivery-browser aside div { height: 100px; display: flex; align-items: end; gap: 9px; margin-top: 12px; }
.delivery-browser aside i {
  flex: 1;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary-dark));
  animation: pulseBar 3s ease-in-out infinite;
}
.browser-cards span, .delivery-browser small {
  display: block;
  margin-top: 5px;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 850;
}
.delivery-browser aside small { margin-top: 8px; }
.delivery-phones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.4vw, 26px);
}
.delivery-phones .phone-frame {
  position: relative;
  width: clamp(118px, 39%, 158px);
  height: min(308px, 86%);
  padding: 12px;
  border-radius: 30px;
  background: linear-gradient(180deg, #111827, #030712);
  border: 7px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 58px rgba(0,0,0,.32);
  transform: translateY(10px);
  animation: phoneRise .7s cubic-bezier(.22,1,.36,1) both;
}
.delivery-phones .android { transform: translateY(-12px); animation-delay: .08s; }
.phone-frame b {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 48px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.24);
  transform: translateX(-50%);
}
.phone-frame header { margin-top: 14px; font-size: 12px; font-weight: 900; color: rgba(255,255,255,.88); }
.phone-frame main {
  height: calc(100% - 32px);
  display: grid;
  align-content: end;
  gap: 7px;
  padding: 14px 0 0;
}
.phone-frame span {
  width: auto;
  height: 92px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 148, 0, .55), rgba(23, 22, 107, .2));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
}
.app-map, .app-card-stack {
  position: relative;
  height: 88px;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(circle at 68% 34%, rgba(255, 148, 0, .86) 0 5px, transparent 6px),
    linear-gradient(135deg, rgba(23, 22, 107, .28), rgba(255, 148, 0, .18));
  border: 1px solid rgba(255,255,255,.14);
}
.app-map i {
  position: absolute;
  width: 90px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  transform: rotate(-28deg);
}
.app-map i:nth-child(1) { left: -14px; top: 32px; }
.app-map i:nth-child(2) { right: -22px; bottom: 28px; transform: rotate(22deg); }
.app-map span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: auto;
  height: auto;
  padding: 6px 8px;
  color: #17166B;
  background: #FFB347;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 950;
}
.app-card-stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 6px;
  padding: 10px;
}
.app-card-stack i {
  height: 68px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255, 148, 0, .25));
}
.app-card-stack i:nth-child(2) { height: 86px; }
.app-card-stack i:nth-child(3) { height: 58px; }
.phone-frame p { margin: 0; color: rgba(255,255,255,.68); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.phone-frame strong { font-size: clamp(16px, 2vw, 22px); line-height: 1; }
.delivery-phones em {
  position: absolute;
  top: 34px;
  right: 34px;
  padding: 10px 12px;
  color: #17166B;
  background: rgba(255, 240, 217, .92);
  border: 1px solid rgba(255, 148, 0, .22);
  border-radius: 999px;
  box-shadow: 0 16px 40px rgba(23, 22, 107, .16);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  animation: floatSoft 4s ease-in-out infinite;
}
.delivery-commerce {
  width: min(560px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(118px, 150px);
  gap: 16px;
  align-items: stretch;
}
.storefront, .checkout-flow, .inventory-strip {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 20px;
}
.storefront { padding: 10px; }
.storefront header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-weight: 950;
}
.storefront header strong { max-width: 120px; line-height: 1.05; }
.storefront header button { flex: 0 0 auto; }
.shop-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin-bottom: 8px;
  padding: 9px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 148, 0, .28), rgba(23, 22, 107, .16));
  border: 1px solid rgba(255,255,255,.12);
}
.shop-hero span { color: #FFB347; font-size: 11px; font-weight: 900; }
.shop-hero strong { line-height: 1.08; }
.product-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.product-row article {
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 7px;
  border-radius: 13px;
  background: rgba(255,255,255,.08);
}
.product-row strong,
.checkout-flow strong,
.checkout-flow p,
.inventory-strip span {
  overflow-wrap: anywhere;
}
.product-row i {
  min-height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 148, 0, .88), rgba(23, 22, 107, .35));
  border: 0;
}
.product-row article:nth-child(2) i { background: linear-gradient(135deg, rgba(23, 22, 107, .82), rgba(255, 148, 0, .28)); }
.product-row article:nth-child(3) i { background: linear-gradient(135deg, rgba(255, 148, 0, .72), rgba(255, 148, 0, .34)); }
.product-row span {
  min-height: auto;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255, 148, 0, .16);
  color: #FFF0D9;
  font-size: 9px;
  font-weight: 900;
}
.product-row strong {
  font-size: 10px;
  line-height: 1.1;
  overflow-wrap: normal;
  word-break: normal;
}
.checkout-flow {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
}
.checkout-flow strong { font-size: clamp(16px, 1.5vw, 22px); line-height: 1.08; }
.checkout-flow p {
  margin: 0;
  padding: 7px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.72);
  font-size: 10px;
}
.inventory-strip {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  padding: 8px;
}
.inventory-strip span {
  min-height: auto;
  flex: 1;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 148, 0, .13);
  color: #FFB347;
  text-align: center;
  font-size: 9px;
  font-weight: 900;
}
.delivery-analytics-ui {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 14px;
}
.delivery-analytics-ui header, .delivery-devops header, .delivery-helpdesk header, .delivery-software header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.delivery-analytics-ui header span, .delivery-devops header span, .delivery-helpdesk header span, .delivery-software header span {
  padding: 6px 10px;
  color: #FFB347;
  background: rgba(255, 148, 0, .13);
  border: 1px solid rgba(255, 148, 0, .22);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}
.seo-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.seo-metrics article {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(148,163,184,.16);
}
.seo-metrics span { color: rgba(255,255,255,.58); font-size: 11px; }
.seo-metrics strong { display: block; margin-top: 6px; font-size: 22px; }
.campaign-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.campaign-cards article {
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(148,163,184,.14);
  animation: itemIn .5s ease both;
}
.campaign-cards strong { display: block; font-size: 11px; }
.campaign-cards span { color: #FFB347; font-size: 10px; font-weight: 900; }
.mini-seo-chart {
  width: 100%;
  min-height: 150px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
}
.mini-seo-chart path {
  fill: none;
  stroke: url("#unused");
  stroke: var(--color-primary-light);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 700;
  animation: drawLine 1.4s ease both;
}
.mini-seo-chart circle { fill: #FFB347; }
.rank-bars { display: grid; gap: 8px; }
.rank-bars span {
  display: grid;
  grid-template-columns: 108px 1fr;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.72);
  font-size: 11px;
}
.rank-bars span strong { font-size: 11px; }
.rank-bars i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  animation: fillBar .85s ease both;
  transform-origin: left;
}
.delivery-design-studio {
  display: grid;
  grid-template-columns: minmax(82px, .34fr) minmax(0, 1fr);
  gap: 12px;
  background: linear-gradient(180deg, #FAFAFC, #FFF0D9);
  color: var(--color-text-primary);
  border-color: rgba(23, 22, 107, .12);
}
.delivery-design-studio aside, .delivery-design-studio section, .delivery-design-studio main {
  min-width: 0;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(23, 22, 107, .08);
}
.delivery-design-studio section { overflow: hidden; }
.delivery-design-studio section strong {
  display: block;
  color: var(--brand-navy);
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.14;
  overflow-wrap: anywhere;
}
.delivery-design-studio aside { display: grid; align-content: start; gap: 9px; }
.delivery-design-studio aside span {
  min-height: auto;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 148, 0, .09);
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 900;
}
.delivery-design-studio main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.delivery-design-studio section {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.figma-toolbar {
  grid-column: 1 / -1;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.figma-toolbar span {
  min-height: auto;
  padding: 6px 8px;
  color: var(--color-text-secondary);
  background: rgba(23, 22, 107, .06);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}
.canvas-card {
  min-height: 86px;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(23, 22, 107, .12) 0 45%, transparent 45%),
    rgba(255, 148, 0, .08);
  border: 1px solid rgba(255, 148, 0, .16);
}
.canvas-card strong, .canvas-card span { display: block; overflow-wrap: anywhere; }
.canvas-card span { margin-top: 6px; color: var(--color-text-secondary); font-size: 11px; font-weight: 850; }
.hero-card { grid-column: 1 / -1; min-height: 108px; background: linear-gradient(135deg, rgba(255, 148, 0, .2), rgba(23, 22, 107, .1)); }
.hero-card button { margin-top: 14px; }
.component-card { background: linear-gradient(135deg, rgba(23, 22, 107, .12), rgba(255,255,255,.82)); }
.prototype-card { background: linear-gradient(135deg, rgba(255, 148, 0, .14), rgba(255,255,255,.82)); }
.palette-row { display: flex; gap: 8px; margin: 0; }
.palette-row i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.palette-row i:nth-child(1) { background: var(--color-primary); }
.palette-row i:nth-child(2) { background: var(--color-secondary); }
.palette-row i:nth-child(3) { background: #FF9400; }
.palette-row i:nth-child(4) { background: #111827; }
.delivery-design-studio p { margin: 0; color: var(--color-text-secondary); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.delivery-brand-board {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  grid-template-rows: 1fr auto;
  gap: 14px;
  background: linear-gradient(180deg, #FAFAFC, #FFF0D9);
  color: var(--color-text-primary);
  border-color: rgba(23, 22, 107, .12);
}
.brand-cover, .brand-assets, .delivery-brand-board aside {
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(23, 22, 107, .08);
  box-shadow: 0 18px 44px rgba(23, 22, 107, .08);
}
.brand-cover {
  display: grid;
  align-content: end;
  gap: 9px;
  padding: 18px;
  min-height: 210px;
  background:
    radial-gradient(circle at 72% 18%, rgba(255, 148, 0, .24), transparent 32%),
    linear-gradient(135deg, #09083A, #0F0E4D);
  color: var(--color-text-light);
}
.brand-cover b {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: #17166B;
  background: linear-gradient(135deg, #FFB347, #FFB347);
  border-radius: 18px;
  font-size: 28px;
}
.brand-cover span, .delivery-brand-board aside p { color: var(--color-text-secondary); font-size: 12px; }
.brand-cover span { color: rgba(255,255,255,.68); }
.brand-assets {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.brand-assets article {
  min-height: 66px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 148, 0, .11), rgba(23, 22, 107, .07));
  border: 1px solid rgba(255, 148, 0, .14);
}
.business-card b {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  margin-right: 8px;
  border-radius: 10px;
  color: #17166B;
  background: #FFB347;
}
.brand-assets span { display: block; margin-top: 5px; color: var(--color-text-secondary); font-size: 11px; font-weight: 850; }
.delivery-brand-board aside {
  grid-column: 1 / -1;
  padding: 13px;
}
.delivery-api {
  display: grid;
  grid-template-columns: 1fr 80px 1fr 80px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 360px;
}
.delivery-api section {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 148px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(148,163,184,.18);
}
.delivery-api section span {
  width: auto;
  height: auto;
  color: rgba(255,255,255,.66);
  background: none;
  border: 0;
  box-shadow: none;
  font-size: 11px;
}
.api-stream {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 148, 0, .16);
}
.api-stream i {
  position: absolute;
  top: -5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary-light);
  animation: packetMove 1.5s ease-in-out infinite;
}
.api-stream i:nth-child(2) { animation-delay: .18s; }
.api-stream i:nth-child(3) { animation-delay: .36s; }
.delivery-devops {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 14px;
}
.pipeline-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pipeline-steps article {
  display: grid;
  gap: 7px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(148,163,184,.16);
}
.pipeline-steps b {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}
.pipeline-steps span, .health-row span {
  min-height: auto;
  color: rgba(255,255,255,.64);
  font-size: 11px;
}
.log-console {
  padding: 14px;
  border-radius: 18px;
  background: rgba(2,6,23,.52);
  border: 1px solid rgba(148,163,184,.14);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.log-console p { margin: 6px 0; color: #FFB347; font-size: 12px; }
.health-row { display: flex; gap: 10px; }
.health-row span {
  flex: 1;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255, 148, 0, .12);
  text-align: center;
  font-weight: 900;
}
.delivery-helpdesk {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-template-rows: auto 1fr;
  gap: 14px;
}
.delivery-helpdesk header { grid-column: 1 / -1; }
.ticket-list { display: grid; gap: 10px; }
.ticket-list article, .delivery-helpdesk aside {
  padding: 12px;
  border-radius: 17px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(148,163,184,.16);
}
.ticket-list article {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px 10px;
}
.ticket-list b {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: #17166B;
  background: #FFB347;
}
.delivery-helpdesk span {
  min-height: auto;
  color: rgba(255,255,255,.64);
  background: none;
  border: 0;
  font-size: 11px;
}
.delivery-helpdesk aside p {
  margin: 10px 0 0;
  padding: 9px;
  border-radius: 12px;
  background: rgba(255, 148, 0, .11);
  color: rgba(255,255,255,.72);
  font-size: 12px;
}
.delivery-software {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}
.module-map { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.module-map article {
  min-height: 106px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(148,163,184,.16);
}
.module-map b {
  display: block;
  width: 42px;
  height: 28px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}
.delivery-software footer {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #FFB347;
  font-weight: 900;
}
.delivery-software footer i {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--gradient-primary);
  animation: growX 1s ease both;
}

.case-card {
  color: var(--white);
  background: linear-gradient(160deg, var(--color-dark-secondary), var(--color-dark-card));
  box-shadow: var(--shadow-dark);
  transition: transform .22s ease;
}
.case-card:hover { transform: translateY(-5px); }
.case-card strong { display: block; margin-top: 18px; color: var(--color-primary-lighter); }
.case-visual {
  height: 150px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.075);
}
.case-visual span { border-radius: 12px; background: linear-gradient(180deg, rgba(255, 148, 0, .7), rgba(23, 22, 107, .35)); }
.case-visual span:nth-child(2) { margin-top: 24px; background: linear-gradient(180deg, rgba(255, 148, 0, .62), rgba(23, 22, 107, .42)); }
.case-visual span:nth-child(3) { margin-top: 48px; }

.portfolio-grid { align-items: stretch; }
.portfolio-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 14px;
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--color-border-light);
  box-shadow: 0 18px 58px rgba(23, 22, 107, .08);
  overflow: hidden;
  transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .28s ease, box-shadow .28s ease;
}
.portfolio-card:hover { transform: translateY(-5px); border-color: var(--color-border-accent); box-shadow: 0 28px 76px rgba(23, 22, 107, .14); }
.portfolio-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 22px;
  background: var(--gradient-dark);
  box-shadow: 0 18px 42px rgba(23, 22, 107, .14);
}
.portfolio-media::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background: linear-gradient(180deg, rgba(9, 8, 58, .04) 22%, rgba(9, 8, 58, .72) 100%);
  transition: opacity .24s ease;
}
.portfolio-card:hover .portfolio-media::after { opacity: .52; }
.portfolio-picture {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transform: scale(1.018);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.portfolio-card.is-visible .portfolio-picture {
  opacity: 1;
  transform: scale(1);
}
.portfolio-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1);
  transition: transform .42s cubic-bezier(.22,1,.36,1), opacity .28s ease;
}
.portfolio-card:hover .portfolio-media img,
.portfolio-card:hover .project-visual { transform: scale(1.03); }
.portfolio-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  color: var(--color-text-light);
  background: rgba(14, 13, 12, .7);
  border: 1px solid var(--color-border-dark);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(10px);
}
.media-arrow {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--color-dark);
  background: var(--gradient-primary);
  border-radius: 999px;
  opacity: 0;
  transform: translate(8px, 8px);
  transition: opacity .24s ease, transform .24s ease;
}
.portfolio-card:hover .media-arrow { opacity: 1; transform: translate(0, 0); }
.portfolio-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 6px 4px;
}
.portfolio-category {
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.portfolio-card h3 { margin-top: 10px; font-size: 24px; color: var(--color-text-primary); }
.portfolio-card p {
  display: -webkit-box;
  min-height: 78px;
  margin: 12px 0 0;
  overflow: hidden;
  color: var(--color-text-secondary);
  line-height: 1.6;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}
.project-tech span {
  padding: 6px 9px;
  color: var(--color-text-secondary);
  background: var(--color-background-soft);
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  transform: translateY(0);
  transition: transform .2s ease, border-color .2s ease;
}
.portfolio-card:hover .project-tech span { transform: translateY(-2px); border-color: rgba(255, 148, 0, .24); }
.portfolio-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-light);
}
.portfolio-footer strong {
  max-width: 55%;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.portfolio-footer a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary-dark);
  font-weight: 950;
  white-space: nowrap;
}
.portfolio-footer a span { transition: transform .2s ease; }
.portfolio-footer a:hover span { transform: translateX(4px); }
.project-visual {
  width: 100%;
  height: 100%;
  padding: 22px;
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}
.web-visual, .visual-chart, .workflow-visual, .delivery-graph {
  width: 100%;
  height: 100%;
}
.web-visual {
  display: grid;
  grid-template-rows: 38px 1fr 42px;
  gap: 12px;
}
.web-visual header, .web-visual footer, .web-visual main span,
.product-card, .checkout-card, .brand-board, .workflow-visual span {
  background: rgba(255,253,248,.08);
  border: 1px solid rgba(255, 148, 0, .12);
  border-radius: 14px;
}
.web-visual main { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.project-visual-commerce { display: grid; grid-template-columns: 1fr .82fr; gap: 14px; }
.product-card, .checkout-card { padding: 14px; }
.product-card i { display: block; height: 54%; margin-bottom: 12px; border-radius: 12px; background: rgba(255, 148, 0, .14); }
.product-card b, .product-card span, .checkout-card b, .checkout-card span, .visual-lines span, .type-lines span {
  display: block;
  height: 10px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(250,248,244,.18);
}
.project-visual-analytics { display: grid; grid-template-columns: 1fr .72fr; gap: 16px; align-items: end; }
.visual-chart { display: flex; align-items: end; gap: 10px; }
.visual-chart i { flex: 1; border-radius: 10px 10px 0 0; background: var(--gradient-primary); }
.visual-lines { align-self: center; }
.project-visual-brand { display: grid; grid-template-columns: 1fr .7fr; gap: 16px; }
.brand-board { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.brand-board i { border-radius: 14px; background: rgba(255, 148, 0, .12); }
.type-lines { align-self: center; }
.workflow-visual { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; place-items: center; }
.workflow-visual span { width: 72px; height: 54px; }
.workflow-visual i { position: absolute; left: 18%; right: 18%; top: 50%; height: 2px; background: var(--gradient-primary); }

.industry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.industry-card, .stats-grid article, .benefit, .testimonial-card, .faq {
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.industry-card { display: grid; gap: 10px; transition: transform .2s ease, border-color .2s ease; }
.industry-card:hover { transform: translateY(-4px); border-color: var(--color-border-accent); }
.industry-card span { color: var(--accent); font-weight: 950; }
.industry-card small { color: var(--muted); line-height: 1.5; }

.process-line { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.section.process-section {
  color: var(--brand-navy);
  background: var(--white);
}
.process-section .step {
  color: var(--brand-navy);
  background: var(--white);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-soft);
}
.process-section .step span { color: var(--brand-orange); }
.process-section .step h3 { color: var(--brand-navy); }
.process-section .step p { color: var(--text-secondary); }
.benefits { background: var(--soft); }
.benefit { display: flex; gap: 12px; align-items: center; font-weight: 850; }
.benefit span { color: var(--accent); font-weight: 950; }
.stats-section { background: var(--gradient-light); }
.stats-grid article { text-align: center; }
.stats-grid strong { display: block; color: transparent; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; font-size: clamp(2.4rem, 5vw, 5rem); line-height: 1; }
.stats-grid span { display: block; margin-top: 10px; color: var(--muted); font-weight: 850; }
.testimonials-section { background: var(--soft); }
.testimonial-card { max-width: 820px; }
.testimonial-card p { color: var(--color-text-primary); font-size: clamp(1.3rem, 2.5vw, 2rem); line-height: 1.35; }
.testimonial-card span { display: block; margin-top: 4px; color: var(--muted); }
.faq-list { display: grid; gap: 12px; }
.faq { box-shadow: none; }
.faq button {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  text-align: left;
  font-weight: 950;
}
.faq.open { border-color: var(--color-border-accent); box-shadow: 0 18px 54px rgba(255, 148, 0, .1); }
.faq.open b { transform: rotate(45deg); }
.faq b { color: var(--accent); font-size: 24px; transition: transform .2s ease; }
.faq p { margin: 0 0 8px; color: var(--muted); line-height: 1.65; }

.service-detail {
  min-height: 100vh;
  background: radial-gradient(circle at 80% 8%, rgba(255, 148, 0, .14), transparent 30%), var(--soft);
  padding-top: 120px;
}
.back-link { display: inline-flex; margin-bottom: 26px; color: var(--accent); font-weight: 950; }
.detail-hero {
  max-width: 980px;
  padding: clamp(28px, 5vw, 58px);
  color: var(--white);
  background: var(--gradient-dark);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-dark);
}
.detail-hero h1 { font-size: clamp(2.8rem, 7vw, 6rem); }
.detail-hero p:not(.eyebrow) { max-width: 760px; color: rgba(255,255,255,.76); font-size: 18px; line-height: 1.7; }
.service-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }

.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  color: var(--white);
  background: linear-gradient(180deg, var(--brand-navy-deep), var(--brand-navy-dark));
}
.final-cta {
  margin: 0;
  color: var(--brand-navy);
  background: var(--white);
}
.final-cta .eyebrow { color: var(--brand-orange); }
.final-cta h2 { color: var(--brand-navy); }
.final-cta .button.ghost { color: var(--brand-navy); background: var(--white); border-color: var(--color-border-light); }
.cta p:not(.eyebrow) { max-width: 680px; color: rgba(255,255,255,.72); line-height: 1.65; }
.final-cta.cta p:not(.eyebrow) { color: var(--text-secondary); }

.contact-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(38px, 5vw, 72px);
  align-items: start;
  background: var(--white);
}
.contact-intro {
  display: grid;
  gap: 16px;
  align-content: start;
  padding-top: 8px;
}
.contact-intro h2 {
  max-width: 11ch;
  color: var(--brand-navy);
}
.contact-intro > .contact-lead {
  max-width: 560px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.65;
}
.contact-accent-line {
  width: min(100%, 520px);
  height: 1px;
  margin-top: 6px;
  overflow: hidden;
  background: var(--color-border-light);
}
.contact-accent-line i {
  display: block;
  width: 34%;
  height: 100%;
  background: var(--brand-orange);
  transform-origin: left center;
}
.contact-details {
  display: grid;
  width: min(100%, 520px);
  margin-top: 2px;
}
.contact-detail {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  min-height: 72px;
  padding: 13px 4px;
  color: var(--brand-navy);
  border-bottom: 1px solid var(--color-border-light);
  overflow-wrap: anywhere;
}
.contact-detail-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--brand-navy);
  background: var(--brand-orange-soft);
  border: 1px solid rgba(255,148,0,.28);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
}
.contact-detail-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.contact-detail-copy small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.contact-detail-copy strong {
  color: var(--brand-navy);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}
.contact-detail-action {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--brand-orange-hover);
  border: 1px solid rgba(255,148,0,.28);
  border-radius: 50%;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.contact-detail:hover .contact-detail-action {
  color: var(--white);
  background: var(--brand-orange);
  transform: translate(2px, -2px);
}
.contact-form, .auth-card, .contact-card {
  display: grid;
  gap: 14px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.contact-form {
  position: relative;
  grid-template-columns: 1fr 1fr;
  padding: clamp(22px, 3vw, 32px);
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(23,22,107,.1);
}
.contact-form::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--gradient-primary);
}
.contact-form-head {
  display: grid;
  gap: 7px;
  margin-bottom: 8px;
}
.contact-form-head > span {
  color: var(--brand-orange-hover);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.contact-form-head h3 {
  color: var(--brand-navy);
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}
.contact-form-head p {
  max-width: 520px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}
.admin-login-section {
  min-height: calc(100vh - 80px);
  display: grid;
  place-items: center;
  background: #F8F9FC;
}
.admin-login-card {
  width: min(100%, 520px);
}
.admin-login-card .auth-card {
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.auth-card { padding: 0; background: transparent; border: 0; box-shadow: none; }
label { display: grid; gap: 8px; color: var(--color-text-secondary); font-size: 13px; font-weight: 950; }
.full { grid-column: 1 / -1; }
input, textarea, select {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: none;
  transition: border .2s ease, box-shadow .2s ease, background .2s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 4px rgba(255, 148, 0, .12);
}
input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 4px rgba(255, 148, 0, .14);
}
textarea { min-height: 136px; resize: vertical; }
.form-footer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.form-message { margin: 0; font-weight: 850; }
.form-message.success { color: #E98200; }
.form-message.error { color: #be123c; }
.alert { margin: 18px clamp(18px, 4vw, 64px); padding: 16px; border-radius: var(--radius-md); }
.alert.error { background: #fff1f2; color: #9f1239; }

.footer {
  display: grid;
  gap: 28px;
  padding: 64px clamp(18px, 4vw, 64px) 36px;
  color: rgba(255,255,255,.76);
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,.12);
}
.footer > * { max-width: var(--container); width: 100%; margin-inline: auto; }
.footer .brand { color: var(--white); }
.footer .brand-logo { width: fit-content; }
.footer .brand-logo img {
  padding: 4px;
  background: var(--white);
  border-radius: 8px;
}
.footer .brand-logo strong { color: var(--white); }
.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr);
  gap: 28px;
  align-items: start;
}
.footer p { max-width: 680px; line-height: 1.65; }
.footer-expertise {
  display: grid;
  gap: 14px;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-expertise-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer-expertise-head p {
  margin: 0;
  color: var(--brand-orange-light);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer-expertise-head > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.7);
  font-size: 13px;
  font-weight: 750;
  transition: color .2s ease;
}
.footer-expertise-head > a span { color: var(--brand-orange-light); }
.footer-expertise-head > a:hover { color: var(--white); }
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.footer-links a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 13px 15px;
  overflow: hidden;
  color: var(--white);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.footer-links a:hover {
  background: rgba(255,148,0,.09);
  border-color: rgba(255,148,0,.42);
  box-shadow: 0 14px 34px rgba(0,0,0,.16), inset 3px 0 var(--brand-orange);
}
.footer-link-index {
  color: var(--brand-orange-light);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
}
.footer-links strong {
  min-width: 0;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.3;
}
.footer-link-arrow {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--brand-orange-light);
  border: 1px solid rgba(255,148,0,.28);
  border-radius: 50%;
  font-size: 13px;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.footer-links a:hover .footer-link-arrow {
  color: var(--brand-navy-deep);
  background: var(--brand-orange);
  transform: translate(2px, -2px);
}
.social-links {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.social-links a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--color-text-light);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.social-links a:hover {
  transform: translateY(-2px);
  background: rgba(255, 148, 0, .12);
  border-color: rgba(255, 148, 0, .34);
}
.newsletter {
  display: grid;
  gap: 12px;
  padding: 22px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dark);
}
.newsletter strong { color: var(--color-text-light); font-size: 18px; }
.newsletter p { margin: 0; color: var(--color-text-light-muted); font-size: 14px; }

@keyframes menuIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes itemIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes floatOne { 50% { transform: translate3d(-24px, 18px, 0) scale(1.04); } }
@keyframes floatTwo { 50% { transform: translate3d(20px, -20px, 0) scale(1.08); } }
@keyframes floatThree { 50% { transform: translate3d(14px, 22px, 0) scale(1.05); } }
@keyframes nodeFloat { 50% { transform: translate3d(0, -10px, 0); } }
@keyframes dashMove { to { stroke-dashoffset: -80; } }
@keyframes pulseBar { 50% { opacity: .62; transform: scaleY(.86); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes glowSweep { 50% { opacity: .45; filter: drop-shadow(0 0 16px rgba(255, 148, 0, .5)); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes areaFade { to { opacity: 1; } }
@keyframes dotIn { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: scale(1); } }
@keyframes pulseDot { 50% { filter: drop-shadow(0 0 18px rgba(255, 148, 0, .62)); transform: scale(1.22); } }
@keyframes fillBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes growX { from { transform: scaleX(0); opacity: .3; } to { transform: scaleX(1); opacity: 1; } }
@keyframes previewSheen {
  0%, 58% { transform: translateX(-115%); opacity: 0; }
  72% { opacity: .72; }
  100% { transform: translateX(115%); opacity: 0; }
}
@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes imageReveal {
  from { opacity: 0; transform: translateY(18px) rotateX(4deg) rotateY(-4deg) scale(.98); }
  to { opacity: 1; transform: rotateX(1deg) rotateY(-1.8deg) scale(1); }
}
@keyframes phoneRise {
  from { opacity: 0; transform: translateY(34px) scale(.96); }
  to { opacity: 1; transform: translateY(10px) scale(1); }
}
@keyframes packetMove {
  from { left: 0; opacity: 0; transform: scale(.7); }
  20%, 80% { opacity: 1; }
  to { left: calc(100% - 14px); opacity: 0; transform: scale(1); }
}
@keyframes contentSwap {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes textLift {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes panelAssemble {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1420px) {
  .ai-lab-hero {
    grid-template-columns: minmax(330px, .72fr) minmax(600px, 1.28fr);
    gap: 36px;
  }
  .ai-ecosystem-stage { min-height: 620px; }
  .ai-ecosystem-node { width: 168px; }
  .ai-lab-slider { min-height: 620px; }
  .ai-dashboard-block { grid-template-columns: minmax(280px, .62fr) minmax(620px, 1.38fr); }
  .delivery-preview {
    max-width: 680px;
    width: 100%;
    justify-self: start;
  }
  .preview-window {
    justify-self: start;
  }
}

@media (max-width: 1180px) {
  .ai-lab { padding-top: 92px; }
  .ai-lab-hero { grid-template-columns: 1fr; }
  .ai-lab-copy { max-width: 760px; }
  .ai-ecosystem-stage {
    width: min(100%, 760px);
    margin: 16px auto 0;
  }
  .ai-lab-slider {
    width: min(100%, 760px);
    margin: 16px auto 0;
  }
  .ai-solutions-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ai-process-track { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 20px; }
  .ai-process-track > svg,
  .ai-process-track article::before { display: none; }
  .ai-process-track article:nth-child(5) i { display: none; }
  .ai-lab-split-block,
  .ai-dashboard-block { grid-template-columns: 1fr; }
  .ai-dashboard-copy { max-width: 760px; }
  .ai-industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-links, .nav > .button.small { display: none; }
  .mobile-toggle { display: grid; }
  .hero, .contact-section { grid-template-columns: 1fr; }
  .story-track { grid-template-columns: 1fr; position: relative; min-height: auto; padding: 80px 0; }
  .sticky-story { min-height: auto; }
  .analytics-showcase, .digital-delivery-grid, .digital-service-panel { grid-template-columns: 1fr; }
  .digital-scroll-story { padding-bottom: 96px; }
  .digital-scroll-story .digital-delivery-scroll { min-height: 0; }
  .digital-scroll-story .digital-delivery-grid {
    position: relative;
    top: auto;
    height: auto;
    align-items: stretch;
    padding: 0;
  }
  .digital-scroll-story .digital-service-list {
    max-height: none;
    overflow: visible;
    padding: 0;
  }
  .digital-panel-stage { min-height: 0; }
  .digital-scroll-story .digital-service-panel {
    position: relative;
    inset: auto;
    height: auto;
    min-height: 520px;
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .footer-main { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecosystem { min-height: 500px; }
  .service-grid, .case-grid, .benefit-grid, .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workflow, .process-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow::before { display: none; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-head { display: block; }
  .section-head > p { margin-top: 14px; }
  .mobile-panel { display: grid; grid-template-columns: 1fr; gap: 0; color: var(--color-text-primary); background: var(--color-background-soft); border-color: var(--color-border-light); }
  .mobile-panel a { padding: 14px; border-bottom: 1px solid var(--color-border-light); font-weight: 850; }
  .mobile-panel .button { margin-top: 10px; border-bottom: 0; }
}

@media (max-width: 760px) {
  .brand-logo { gap: 7px; }
  .brand-logo img { width: 38px; height: 36px; }
  .brand-logo strong { font-size: 20px; }
  .ai-lab { padding: 72px 16px 82px; }
  .ai-lab-grid-bg {
    inset-inline: 0;
    background-size: 48px 48px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 92%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 92%);
  }
  .ai-lab-copy h2 { font-size: clamp(3rem, 15vw, 4.8rem); }
  .ai-lab-actions { display: grid; grid-template-columns: 1fr; }
  .ai-lab .button { width: 100%; }
  .ai-lab-slider {
    min-height: 540px;
    margin-top: 24px;
    border-radius: 22px;
  }
  .ai-lab-slider > .ai-lab-slider-top {
    top: 17px;
    right: 17px;
    left: 17px;
  }
  .ai-lab-slide figcaption {
    right: 22px;
    bottom: 104px;
    left: 22px;
  }
  .ai-lab-slide figcaption > strong { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .ai-lab-slider > .ai-lab-slider-controls {
    right: 22px;
    bottom: 24px;
    left: 22px;
    justify-content: space-between;
  }
  .ai-ecosystem-stage {
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px;
    border-radius: 22px;
  }
  .ai-ecosystem-stage::before,
  .ai-ecosystem-connectors { display: none; }
  .ai-lab-hub {
    position: relative;
    inset: auto;
    width: 156px;
    height: 156px;
    margin: 6px auto 18px;
    transform: none;
  }
  .ai-ecosystem-node,
  .ai-ecosystem-node.node-0,
  .ai-ecosystem-node.node-1,
  .ai-ecosystem-node.node-2,
  .ai-ecosystem-node.node-3,
  .ai-ecosystem-node.node-4,
  .ai-ecosystem-node.node-5,
  .ai-ecosystem-node.node-6,
  .ai-ecosystem-node.node-7,
  .ai-ecosystem-node.node-8 {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 76px;
  }
  .ai-lab-block {
    padding-top: 72px;
    margin-top: 72px;
  }
  .ai-lab-section-head { display: block; margin-bottom: 28px; }
  .ai-lab-section-head > p { margin-top: 14px; }
  .ai-solutions-bento { grid-template-columns: 1fr; }
  .ai-solution-card.featured { grid-column: auto; }
  .ai-process-block .ai-lab-section-head {
    position: relative;
    top: auto;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
  }
  .ai-process-track {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 0 0 26px;
  }
  .ai-process-track::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 8px;
    width: 2px;
    background: linear-gradient(var(--brand-orange), var(--color-border-medium));
  }
  .ai-process-track article { min-height: auto; }
  .ai-process-track article::before {
    top: 50%;
    left: -24px;
    display: block;
    transform: translateY(-50%);
  }
  .ai-process-track article i { display: none; }
  .ai-lab-split-block { gap: 0; }
  .ai-model-grid,
  .ai-capability-grid,
  .ai-industry-grid { grid-template-columns: 1fr; }
  .ai-dashboard-copy .button { width: 100%; }
  .ai-live-dashboard { padding: 14px; border-radius: 20px; }
  .ai-preview-metrics,
  .ai-preview-panels { grid-template-columns: 1fr; }
  .nav { padding-inline: 16px; }
  .hero { min-height: auto; padding: 126px 16px 70px; grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 100%; }
  .section { padding: 72px 16px; }
  .sticky-story { padding-inline: 16px; }
  .story-track { padding: 72px 0; }
  .story-motion-options {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .story-motion-label { grid-column: 1 / -1; padding: 4px 8px; }
  .story-motion-options button { min-width: 0; padding-inline: 6px; font-size: 12px; }
  .story-steps { grid-template-columns: 1fr; }
  .story-step-tab { grid-template-columns: 38px 1fr; padding: 13px; border-radius: 16px; }
  .story-steps span { width: 38px; height: 38px; border-radius: 12px; }
  .story-layer-stack { aspect-ratio: 4 / 3; }
  .story-image-reveal img { object-position: center; }
  .assembly-grid, .story-flow { grid-template-columns: 1fr; }
  .assembly-frame { min-height: auto; }
  .assembly-line { display: none; }
  .service-grid, .case-grid, .benefit-grid, .stats-grid, .industry-grid, .workflow, .process-line, .service-items, .contact-form, .metric-grid, .channel-row, .capability-grid { grid-template-columns: 1fr; }
  .analytics-showcase { grid-template-columns: 1fr; }
  .analytics-dashboard { padding: 14px; border-radius: 22px; }
  .chart-tooltip { position: static; margin-top: 10px; }
  .growth-chart { min-height: 220px; }
  .digital-delivery-grid, .digital-service-panel { grid-template-columns: 1fr; }
  .digital-service-panel { min-height: auto; }
  .digital-service-list { grid-template-columns: 1fr; }
  .delivery-preview { display: none; }
  .ecosystem { min-height: 440px; }
  .service-node { width: 122px; min-height: 66px; padding: 10px; }
  .service-node strong { font-size: 12px; }
  .central-node { width: 124px; height: 124px; }
  .node-6, .node-7 { left: 34%; }
  .mini-dashboard { display: none; }
  .mega-menu { display: none; }
  .cta { display: block; }
  .cta-actions { margin-top: 18px; }
  .tab-panel { grid-template-columns: 1fr; }
  .chat-panel { grid-row: auto; }
  .orb { width: 82vw; }
  .button { width: 100%; min-height: 52px; }
  .trust-row span { min-height: 36px; }
  .footer { padding-top: 52px; }
  .footer-expertise-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .footer-links { grid-template-columns: 1fr; }
  .footer-links a { min-height: 60px; }
}

@media (max-width: 420px) {
  .ai-lab-slider { min-height: 520px; }
  .ai-lab-slider-top span,
  .ai-lab-slider-top strong { min-height: 30px; padding: 6px 9px; font-size: 10px; }
  .ai-lab-slide figcaption p { font-size: 13px; }
  .ai-lab-hub { width: 140px; height: 140px; }
  .ai-lab-hub strong { font-size: 23px; }
  .ai-live-dashboard > header { align-items: flex-start; flex-direction: column; }
  .ai-preview-bars { gap: 4px; }
  h1 { font-size: clamp(2.55rem, 15vw, 3.4rem); }
  h2 { font-size: clamp(2rem, 12vw, 2.7rem); }
  .ecosystem { min-height: 380px; }
  .service-node { width: 104px; }
  .service-node span { display: none; }
  .central-node { width: 108px; height: 108px; }
  .story-image-caption { right: 10px; bottom: 10px; left: 10px; gap: 0; }
  .story-image-caption span { display: none; }
  .story-image-caption strong { font-size: .86rem; line-height: 1.15; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .connector-pulse { display: none; }
  .marquee-track { width: auto; flex-wrap: wrap; transform: none; padding-inline: 16px; }
  .reveal, .stagger-item { opacity: 1; transform: none; filter: none; }
  .sticky-story { min-height: auto; }
  .story-track { position: relative; min-height: auto; }
}

@media (hover: hover) and (pointer: fine) {
  .cursor-dot,
  .cursor-ring { display: block; }
  .cursor-dot {
    width: 7px;
    height: 7px;
    background: var(--color-primary-light);
    transform: translate3d(calc(var(--cursor-x, -100px) - 3.5px), calc(var(--cursor-y, -100px) - 3.5px), 0);
    box-shadow: 0 0 14px rgba(255, 148, 0, .52);
  }
  .cursor-ring {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 148, 0, .42);
    background: rgba(255, 148, 0, .04);
    transform: translate3d(calc(var(--cursor-ring-x, -100px) - 19px), calc(var(--cursor-ring-y, -100px) - 19px), 0);
    transition: width .18s ease, height .18s ease, border-color .18s ease, background .18s ease;
  }
  body[data-cursor-active] .cursor-ring {
    width: 48px;
    height: 48px;
    border-color: rgba(255, 148, 0, .68);
    background: rgba(255, 148, 0, .08);
    transform: translate3d(calc(var(--cursor-ring-x, -100px) - 24px), calc(var(--cursor-ring-y, -100px) - 24px), 0);
  }
  body[data-cursor-active] .cursor-dot {
    width: 5px;
    height: 5px;
    transform: translate3d(calc(var(--cursor-x, -100px) - 2.5px), calc(var(--cursor-y, -100px) - 2.5px), 0);
  }
}

/* Product company redesign */
.product-site{min-height:100vh;background:#fff;color:#17166b}.product-site main{display:block}.p-nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:28px;min-height:76px;padding:12px clamp(20px,5vw,72px);background:rgba(255,255,255,.94);border-bottom:1px solid #e9eaf1;backdrop-filter:blur(18px)}.p-brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:900}.p-brand img{width:38px;height:38px;object-fit:contain}.p-nav-links{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,28px);margin-left:auto}.p-nav-links a,.p-signin{font-size:14px;font-weight:750;color:#4f5363}.p-nav-links a:hover,.p-nav-links a:focus-visible,.p-signin:hover{color:#17166b}.p-nav-actions{display:flex;align-items:center;gap:18px}.p-menu-toggle,.p-mobile-menu{display:none}.p-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border:1px solid #ff9400;border-radius:12px;background:#ff9400;color:#171038;font-weight:850;box-shadow:0 12px 30px rgba(255,148,0,.18);transition:transform .2s,box-shadow .2s,background .2s}.p-btn:hover{transform:translateY(-2px);background:#ffab32;box-shadow:0 16px 36px rgba(255,148,0,.24)}.p-btn-small{min-height:42px;padding:0 17px;font-size:14px}.p-btn-ghost{background:#fff;border-color:#dfe1ea;box-shadow:none;color:#17166b}.p-btn-ghost:hover{background:#f7f7fb;box-shadow:none}.p-text-btn{padding:8px 0;border:0;background:none;color:#fff;font-weight:850}.p-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);align-items:center;gap:clamp(34px,6vw,90px);min-height:calc(100vh - 76px);padding:clamp(70px,8vw,120px) clamp(24px,7vw,110px);overflow:hidden;background:radial-gradient(circle at 76% 30%,rgba(255,148,0,.12),transparent 29%),linear-gradient(140deg,#f8f9ff,#fff 55%,#fff9ef)}.p-hero-copy{max-width:690px}.p-eyebrow{margin:0 0 15px;color:#e98200;font-size:12px;font-weight:950;letter-spacing:.16em}.p-hero h1,.p-page-hero h1,.p-product-hero h1,.p-fashion-hero h1{margin:0;color:#11113f;font-size:clamp(3rem,5.7vw,6.6rem);line-height:.96;letter-spacing:-.06em}.p-hero h1 span{color:#e98200}.p-lead,.p-page-hero>p:last-child{max-width:720px;margin:26px 0;color:#565c70;font-size:clamp(17px,1.5vw,21px);line-height:1.65}.p-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}.p-trust-note{margin:22px 0 0;color:#7d8190;font-size:13px;font-weight:700}.p-preview{position:relative;border:1px solid rgba(23,22,107,.12);border-radius:24px;background:#fff;box-shadow:0 40px 90px rgba(23,22,107,.18);transform:rotate(1deg)}.p-preview:before{content:"";position:absolute;inset:-25px;z-index:-1;border-radius:44px;background:linear-gradient(135deg,rgba(23,22,107,.1),rgba(255,148,0,.17));filter:blur(24px)}.p-preview-top{display:flex;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #ececf2;font-size:13px;font-weight:850}.p-preview-top em{color:#e98200;font-style:normal}.p-preview-body{display:grid;grid-template-columns:135px 1fr;min-height:390px}.p-preview aside{display:grid;align-content:start;gap:8px;padding:22px 14px;background:#12113f;border-radius:0 0 0 24px}.p-preview aside span{padding:10px;border-radius:8px;color:rgba(255,255,255,.65);font-size:12px}.p-preview aside span.active{background:rgba(255,148,0,.17);color:#ffb347}.p-dashboard{padding:26px}.p-dashboard-title{display:flex;align-items:center;justify-content:space-between}.p-dashboard-title small,.p-dashboard-title strong{display:block}.p-dashboard-title small{color:#8b8fa1}.p-dashboard-title strong{margin-top:4px;font-size:20px}.p-dashboard-title button{padding:9px 12px;border:0;border-radius:8px;background:#ff9400;color:#171038;font-weight:800}.p-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:23px 0}.p-metrics article{padding:18px;border:1px solid #e8e9f0;border-radius:12px;background:#fafafe}.p-metrics strong,.p-metrics span{display:block}.p-metrics strong{font-size:25px}.p-metrics span{margin-top:5px;color:#727686;font-size:11px}.p-chart{display:grid;grid-template-columns:1fr 1fr;gap:20px}.p-bars{display:flex;align-items:end;gap:8px;height:155px;padding:18px;border:1px solid #ececf2;border-radius:14px}.p-bars i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(#ffb347,#ff9400)}.p-order-list{display:grid;align-content:start;gap:9px;padding:18px;border:1px solid #ececf2;border-radius:14px}.p-order-list span{display:flex;justify-content:space-between;gap:8px;padding-top:9px;border-top:1px solid #eee;font-size:11px}.p-order-list b{color:#e98200}.p-proof-strip{display:flex;justify-content:center;flex-wrap:wrap;gap:18px 40px;padding:22px clamp(24px,6vw,90px);background:#17166b;color:#fff}.p-proof-strip span{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700}.p-proof-strip i{width:6px;height:6px;border-radius:50%;background:#ff9400}.p-section{padding:clamp(72px,8vw,118px) clamp(24px,7vw,110px)}.p-soft{background:#f7f8fc}.p-section-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:40px;align-items:end;max-width:1280px;margin:0 auto 44px}.p-section-head h2{max-width:780px;margin:0;color:#11113f;font-size:clamp(2.2rem,4vw,4.6rem);line-height:1.02;letter-spacing:-.045em}.p-section-head>p{margin:0;color:#626779;font-size:16px;line-height:1.7}.p-product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1280px;margin:auto}.p-product-card{min-height:330px;padding:26px;border:1px solid #e5e6ed;border-radius:20px;background:#fff;box-shadow:0 12px 38px rgba(23,22,107,.05);transition:transform .22s,border .22s,box-shadow .22s}.p-product-card:hover{transform:translateY(-6px);border-color:rgba(255,148,0,.5);box-shadow:0 26px 60px rgba(23,22,107,.12)}.p-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.p-product-icon{display:grid;width:48px;height:48px;place-items:center;border-radius:13px;color:#fff;font-size:13px;font-weight:900}.product-status{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #e2e3ea;border-radius:999px;background:#fafafe;color:#656a79;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}.product-status i{width:6px;height:6px;border-radius:50%;background:#ff9400}.p-kicker{margin:26px 0 8px;color:#e98200;font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.p-product-card h3,.p-solution-card h3,.p-feature-grid h3,.p-pricing-grid h3,.p-resource-card h3{margin:0;color:#17166b;font-size:23px}.p-product-card>p:not(.p-kicker),.p-solution-card p,.p-feature-grid p,.p-pricing-grid p,.p-resource-card p{color:#656a7b;line-height:1.62}.p-card-link,.p-solution-card b,.p-resource-card b{display:block;margin-top:25px;color:#17166b;font-size:13px;font-weight:900}.p-solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1280px;margin:auto}.p-solution-card{min-height:255px;padding:26px;border:1px solid #e3e5ed;border-radius:18px;background:#fff}.p-solution-card>span,.p-industry-grid article>span,.p-feature-grid article>span{display:block;margin-bottom:28px;color:#e98200;font-size:12px;font-weight:950}.p-commerce{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;background:#11113f;color:#fff}.p-commerce h2{margin:0;font-size:clamp(2.5rem,4.5vw,5rem);line-height:1}.p-commerce-copy>p:not(.p-eyebrow){color:rgba(255,255,255,.72);font-size:17px;line-height:1.65}.p-commerce ul{display:grid;gap:12px;padding:0;list-style:none}.p-commerce li:before{content:"✓";margin-right:10px;color:#ff9400;font-weight:900}.p-commerce .p-btn-ghost{color:#fff;background:transparent;border-color:rgba(255,255,255,.35)}.p-product-shot{max-width:460px;margin:auto;padding:16px;border:1px solid rgba(255,255,255,.22);border-radius:24px;background:linear-gradient(145deg,#f0f5ff,#e8f0ff);color:#17166b;transform:rotate(3deg);box-shadow:0 35px 75px rgba(0,0,0,.3)}.p-shot-image{display:grid;min-height:300px;place-items:end start;padding:24px;border-radius:15px;background:linear-gradient(145deg,#c2d9ff,#8cb8ff);color:#fff;font-size:28px;font-weight:950;letter-spacing:-.04em;text-shadow:0 1px 4px rgba(0,0,60,.25)}.p-product-shot>div{display:grid;gap:5px;padding:18px 8px 8px;background:linear-gradient(180deg,rgba(240,245,255,0),rgba(232,240,255,.7));border-radius:0 0 12px 12px}.p-product-shot small{color:#5a6280}.p-product-shot p{margin:8px 0 0;color:#5a6280}.p-product-shot p b{float:right;color:#17166b}.p-ecosystem-grid{display:grid;grid-template-columns:repeat(4,1fr);max-width:1280px;margin:auto;border:1px solid #e5e6ee;border-radius:20px;overflow:hidden}.p-ecosystem-grid article{padding:30px;border-right:1px solid #e5e6ee}.p-ecosystem-grid article:last-child{border:0}.p-ecosystem-grid span{color:#ff9400;font-size:12px;font-weight:950}.p-ecosystem-grid h3{margin:45px 0 10px;font-size:23px}.p-ecosystem-grid p{margin:0;color:#656a79;line-height:1.6}.p-page{min-height:58vh}.p-page-hero{max-width:1000px;margin:20px 0 65px}.p-page-hero h1{font-size:clamp(3rem,5vw,6rem)}.p-page-hero>p:last-child{margin-bottom:0}.p-product-hero{display:grid;grid-template-columns:1fr .85fr;gap:70px;align-items:center;min-height:700px;padding:100px clamp(24px,7vw,110px);background:linear-gradient(145deg,#f7f8ff,#fff)}.p-product-hero h1{margin:15px 0 20px;font-size:clamp(3.6rem,7vw,7.8rem)}.p-product-hero h2{max-width:750px;margin:0;color:#23234f;font-size:clamp(1.6rem,2.8vw,3rem);line-height:1.15}.p-product-hero>div>p:last-of-type{max-width:700px;color:#656a79;font-size:17px;line-height:1.7}.p-product-orbit{display:grid;gap:9px;max-width:530px;padding:30px;border:1px solid #e2e3ed;border-radius:28px;background:#fff;box-shadow:0 30px 80px rgba(23,22,107,.12)}.p-product-orbit strong{display:grid;min-height:190px;place-items:center;border-radius:18px;background:linear-gradient(145deg,var(--product-accent),#11113f);color:#fff;font-size:clamp(2.4rem,5vw,5rem)}.p-product-orbit span{padding:13px 15px;border:1px solid #ebebf1;border-radius:10px;color:#565b6e;font-weight:700}.p-feature-grid,.p-industry-grid,.p-pricing-grid,.p-resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1280px;margin:auto}.p-feature-grid article,.p-industry-grid article,.p-pricing-grid article,.p-resource-card{padding:26px;border:1px solid #e4e6ee;border-radius:18px;background:#fff}.p-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;max-width:1280px;margin:auto}.p-steps article{display:flex;align-items:center;gap:14px;padding:22px;border:1px solid #e3e5ed;border-radius:14px;background:#fff}.p-steps span{display:grid;flex:0 0 34px;height:34px;place-items:center;border-radius:50%;background:#ff9400;font-weight:900}.p-steps p{margin:0;font-weight:800}.p-fashion-hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;min-height:720px;padding:90px clamp(24px,7vw,110px);background:#11113f;color:#fff}.p-fashion-hero h1{color:#fff}.p-fashion-hero>div>p:not(.p-eyebrow){color:rgba(255,255,255,.72);font-size:18px;line-height:1.7}.p-fashion-hero .p-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}.p-fashion-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;transform:rotate(2deg)}.p-fashion-grid span{display:grid;min-height:210px;place-items:end start;padding:20px;border-radius:18px;background:linear-gradient(145deg,#d7c5a4,#89775e);font-size:21px;font-weight:950}.p-fashion-grid .fashion-1{background:linear-gradient(145deg,#ffb347,#be6c00)}.p-fashion-grid .fashion-2{background:linear-gradient(145deg,#7774d6,#17166b)}.p-fashion-grid .fashion-3{background:linear-gradient(145deg,#d2d4dc,#686d7d)}.p-empty-state{max-width:800px;padding:48px;border:1px solid #e3e5ee;border-radius:22px;background:#f8f8fc}.p-empty-state span{color:#e98200;font-size:11px;font-weight:950;letter-spacing:.12em}.p-empty-state h2{font-size:34px}.p-empty-state p{color:#626779;line-height:1.7}.p-company-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1000px}.p-company-grid article{padding:34px;border:1px solid #e3e5ed;border-radius:18px}.p-company-grid p{color:#606577;line-height:1.7}.p-company-grid a{color:#e98200;font-weight:850}.p-contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;padding:clamp(70px,8vw,110px) clamp(24px,7vw,110px);background:#f4f5fa}.p-contact h2{margin:0;font-size:clamp(2.5rem,4vw,4.5rem);line-height:1.02}.p-contact-copy>p:last-child{color:#626779;font-size:17px;line-height:1.7}.p-contact form{padding:30px;border:1px solid #e1e3eb;border-radius:22px;background:#fff}.p-field-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.p-field{display:grid;gap:8px;margin-bottom:15px}.p-field>span{color:#515667;font-size:12px;font-weight:900}.p-field input,.p-field select,.p-field textarea{width:100%;padding:13px 14px;border:1px solid #d9dce5;border-radius:10px;background:#fff;color:#17166b;outline:none}.p-field textarea{min-height:120px;resize:vertical}.p-field input:focus,.p-field select:focus,.p-field textarea:focus{border-color:#ff9400;box-shadow:0 0 0 3px rgba(255,148,0,.14)}.p-consent{display:flex;align-items:flex-start;gap:10px;color:#626779;font-size:13px;line-height:1.45}.p-consent input{margin-top:3px}.p-form-end{display:flex;align-items:center;gap:18px;margin-top:22px}.p-form-message{margin:0;font-size:13px;font-weight:800}.p-form-message.error{color:#bd2446}.p-form-message.success{color:#168451}.p-footer{display:grid;grid-template-columns:2fr 1fr 1fr;gap:45px;padding:58px clamp(24px,7vw,110px) 30px;background:#0d0c39;color:#fff}.p-brand-light{color:#fff}.p-footer p{max-width:460px;color:rgba(255,255,255,.65);line-height:1.6}.p-footer>div:not(:first-child){display:grid;align-content:start;gap:10px}.p-footer a:not(.p-brand){color:rgba(255,255,255,.72);font-size:14px}.p-footer small{grid-column:1/-1;padding-top:28px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.45)}

@media(max-width:1100px){.p-nav-links{display:none}.p-nav-actions{margin-left:auto}.p-menu-toggle{display:grid;width:42px;height:42px;place-content:center;gap:5px;border:1px solid #e2e3ea;border-radius:10px;background:#fff}.p-menu-toggle span{display:block;width:19px;height:2px;background:#17166b}.p-mobile-menu{position:absolute;top:75px;left:18px;right:18px;display:grid;padding:14px;border:1px solid #e3e4ec;border-radius:15px;background:#fff;box-shadow:0 24px 60px rgba(23,22,107,.16)}.p-mobile-menu a{padding:12px;font-weight:800}.p-hero{grid-template-columns:1fr;min-height:auto}.p-preview{max-width:780px}.p-product-grid,.p-solution-grid,.p-feature-grid,.p-industry-grid,.p-pricing-grid,.p-resource-grid{grid-template-columns:repeat(2,1fr)}.p-commerce,.p-product-hero,.p-fashion-hero,.p-contact{grid-template-columns:1fr}.p-ecosystem-grid,.p-steps{grid-template-columns:repeat(2,1fr)}.p-ecosystem-grid article:nth-child(2){border-right:0}.p-ecosystem-grid article{border-bottom:1px solid #e5e6ee}.p-fashion-grid{max-width:720px}}
@media(max-width:700px){.p-nav{min-height:68px;padding:10px 18px}.p-nav-actions .p-btn,.p-signin{display:none}.p-mobile-menu{top:67px}.p-hero{padding:65px 22px}.p-hero h1,.p-page-hero h1,.p-product-hero h1,.p-fashion-hero h1{font-size:clamp(2.65rem,13vw,4.2rem)}.p-preview-body{grid-template-columns:1fr}.p-preview aside{display:none}.p-dashboard{padding:17px}.p-chart{grid-template-columns:1fr}.p-order-list{display:none}.p-section{padding:70px 22px}.p-section-head{grid-template-columns:1fr;gap:16px}.p-section-head h2{font-size:2.55rem}.p-product-grid,.p-solution-grid,.p-feature-grid,.p-industry-grid,.p-pricing-grid,.p-resource-grid,.p-ecosystem-grid,.p-steps,.p-company-grid,.p-field-row,.p-footer{grid-template-columns:1fr}.p-commerce,.p-product-hero,.p-fashion-hero,.p-contact{padding-left:22px;padding-right:22px}.p-product-hero{gap:35px;min-height:auto}.p-product-orbit strong{min-height:145px}.p-fashion-grid{gap:8px}.p-fashion-grid span{min-height:145px;font-size:15px}.p-contact{gap:35px}.p-contact form{padding:20px}.p-footer small{grid-column:auto}.p-proof-strip{justify-content:flex-start}.p-actions{align-items:stretch}.p-actions .p-btn{width:100%}}
@media(prefers-reduced-motion:reduce){.product-site *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.p-admin-form{max-width:560px;padding:30px;border:1px solid #e1e3eb;border-radius:22px;background:#fff;box-shadow:0 24px 60px rgba(23,22,107,.1)}

/* Hero product showcase */
.p-showcase{position:relative;min-width:0;padding-bottom:58px}
.p-showcase .p-preview{overflow:hidden;transition:border-color .35s ease,box-shadow .35s ease}
.p-showcase .p-preview-top em{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--slide-accent,#e98200)}
.p-showcase .p-preview-body{animation:product-slide-in .5s cubic-bezier(.2,.75,.25,1) both}
.p-showcase .p-preview aside span.active{background:color-mix(in srgb,var(--slide-accent,#ff9400) 22%,transparent);color:#fff}
.p-showcase .p-dashboard-title button{background:var(--slide-accent,#ff9400);color:#fff;pointer-events:none}
.p-showcase .p-bars i{background:linear-gradient(color-mix(in srgb,var(--slide-accent,#ff9400) 65%,white),var(--slide-accent,#ff9400))}
.p-showcase .p-order-list b{color:var(--slide-accent,#e98200)}
.p-showcase-controls{position:absolute;right:4px;bottom:8px;display:flex;align-items:center;gap:12px}
.p-showcase-controls>button{display:grid;width:36px;height:36px;place-items:center;padding:0;border:1px solid #dfe1e9;border-radius:50%;background:#fff;color:#17166b;font-size:18px;font-weight:900;box-shadow:0 8px 22px rgba(23,22,107,.08);cursor:pointer}
.p-showcase-controls>button:hover{border-color:#ff9400;background:#fff8ed}
.p-showcase-dots{display:flex;align-items:center;gap:7px}
.p-showcase-dots button{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:#c9cbd5;cursor:pointer;transition:width .25s ease,background .25s ease}
.p-showcase-dots button.active{width:24px;background:#ff9400}
.p-showcase-caption{position:absolute;left:4px;bottom:14px;margin:0;color:#777b8b;font-size:11px;font-weight:750;letter-spacing:.04em;text-transform:uppercase}
.p-showcase-caption strong{color:#17166b}
@keyframes product-slide-in{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:700px){.p-showcase{padding-bottom:74px}.p-showcase-controls{right:auto;left:50%;bottom:6px;transform:translateX(-50%)}.p-showcase-caption{bottom:49px;left:0;width:100%;text-align:center}.p-showcase .p-preview-top em{max-width:105px}.p-showcase .p-dashboard-title button{font-size:10px}.p-showcase .p-metrics article{padding:12px 10px}.p-showcase .p-metrics strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){.p-showcase .p-preview-body{animation:none}}

/* Product-card detail popup */
.p-product-card{position:relative;isolation:isolate;overflow:hidden}
.p-product-popup{position:absolute;inset:10px;z-index:4;display:flex;flex-direction:column;padding:22px;border:1px solid color-mix(in srgb,var(--popup-accent,#ff9400) 48%,#dfe1e9);border-radius:16px;background:rgba(255,255,255,.98);box-shadow:0 24px 65px rgba(23,22,107,.2);opacity:0;visibility:hidden;transform:translateY(16px) scale(.975);transition:opacity .22s ease,transform .22s ease,visibility .22s ease;pointer-events:none}
.p-product-card:hover{z-index:8;transform:translateY(-6px);border-color:var(--popup-accent,#ff9400)}
.p-product-card:hover .p-product-popup,.p-product-card:focus-visible .p-product-popup,.p-product-card:focus-within .p-product-popup{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.p-popup-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid #ececf2}
.p-popup-head>div{display:grid;gap:3px}
.p-popup-head small{color:var(--popup-accent,#e98200);font-size:10px;font-weight:950;letter-spacing:.1em;text-transform:uppercase}
.p-popup-head strong{color:#17166b;font-size:19px}
.p-popup-audience{margin:15px 0 8px!important;color:#656a7b!important;font-size:12px;line-height:1.45!important}
.p-popup-audience b{color:#17166b}
.p-popup-description{margin:0!important;color:#565c70!important;font-size:12px;line-height:1.5!important}
.p-product-popup ul{display:grid;gap:7px;margin:14px 0 10px;padding:0;list-style:none}
.p-product-popup li{position:relative;padding-left:17px;color:#3f4458;font-size:11px;font-weight:700;line-height:1.35}
.p-product-popup li:before{content:"✓";position:absolute;left:0;color:var(--popup-accent,#ff9400);font-weight:950}
.p-popup-cta{margin-top:auto;padding-top:10px;color:#17166b;font-size:12px;font-weight:950}
@media(hover:none),(pointer:coarse){.p-product-popup{display:none}}
@media(max-width:700px){.p-product-card{overflow:hidden}}
@media(prefers-reduced-motion:reduce){.p-product-popup{transition:none}}

/* ============================================================
   3D depth + Framer Motion redesign layer
   Everything below layers on top of the rules above (same
   selectors, later in the cascade wins) rather than rewriting
   them, so nothing above needs to change.
   ============================================================ */

.p-hero h1, .p-page-hero h1, .p-product-hero h1, .p-fashion-hero h1,
.p-section-head h2, .p-commerce h2, .p-contact h2, .p-empty-state h2 {
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
}
body { font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; }

/* Motion now owns transform on these elements (hover/tap/tilt) --
   drop transform from their CSS transitions so the two systems
   don't fight and double-ease. */
.p-btn, .p-btn-ghost, .p-product-card, .p-preview, .p-solution-card,
.p-feature-grid article, .p-industry-grid article, .p-pricing-grid article,
.p-resource-card, .p-showcase-controls > button {
  transition: box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}

/* Layered, colour-tinted shadows read as more "3D" than a single flat shadow */
.p-product-card {
  box-shadow: 0 1px 2px rgba(23, 22, 107, .05), 0 22px 44px -18px rgba(23, 22, 107, .22);
}
.p-product-card:hover {
  box-shadow: 0 1px 2px rgba(23, 22, 107, .06), 0 34px 64px -16px rgba(23, 22, 107, .28),
    0 0 0 1px color-mix(in srgb, var(--popup-accent, #ff9400) 45%, transparent);
}
.p-solution-card, .p-feature-grid article, .p-industry-grid article,
.p-pricing-grid article, .p-resource-card {
  box-shadow: 0 1px 2px rgba(23, 22, 107, .04), 0 18px 38px -18px rgba(23, 22, 107, .18);
}

/* Perspective ancestors so tilted children get real depth, not a flat skew */
.p-hero, .p-product-grid, .p-solution-grid, .p-feature-grid, .p-industry-grid,
.p-pricing-grid, .p-resource-grid, .p-product-hero, .p-fashion-hero {
  perspective: 1800px;
}
.p-preview, .p-product-card, .p-solution-card, .p-feature-grid article,
.p-industry-grid article, .p-pricing-grid article, .p-resource-card,
.p-product-orbit, .p-product-shot, .p-fashion-grid span {
  transform-style: preserve-3d;
  will-change: transform;
}

/* Ambient gradient orbs used behind hero / dark sections for depth */
.p-orb {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
@keyframes p-orb-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -24px, 0) scale(1.05); }
}
@media (prefers-reduced-motion: no-preference) {
  .p-orb { animation: p-orb-float 10s ease-in-out infinite; }
}
.p-orb-a { width: 380px; height: 380px; top: -120px; right: -60px; background: radial-gradient(circle, rgba(255, 148, 0, .5), transparent 70%); }
.p-orb-b { width: 320px; height: 320px; bottom: -140px; left: -60px; background: radial-gradient(circle, rgba(48, 46, 145, .45), transparent 70%); animation-delay: -5s; }

.p-hero { position: relative; isolation: isolate; }
.p-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(23, 22, 107, .09) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 62% 40%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse 65% 60% at 62% 40%, #000, transparent 78%);
  pointer-events: none;
}
.p-hero-copy, .p-hero > .p-showcase { position: relative; z-index: 1; }

.p-commerce, .p-fashion-hero, .p-product-hero { position: relative; isolation: isolate; overflow: hidden; }

/* Sheen sweep across primary CTAs on hover */
.p-btn { position: relative; overflow: hidden; }
.p-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.p-btn:hover::after { transform: translateX(120%); }

/* Consistent, visible keyboard focus across interactive elements */
.p-btn:focus-visible, .p-btn-ghost:focus-visible, .p-text-btn:focus-visible,
.p-nav-links a:focus-visible, .p-signin:focus-visible, a[data-route]:focus-visible,
.p-product-card:focus-visible, .p-solution-card:focus-visible,
.p-showcase-controls > button:focus-visible, .p-showcase-dots button:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 3px;
  border-radius: 6px;
}

.p-mobile-menu { transform-origin: top center; }

/* One-page layout: anchor targets need room for the sticky nav */
section[id] { scroll-margin-top: 90px; }
@media (max-width: 700px) {
  section[id] { scroll-margin-top: 80px; }
}

/* Pricing section */
.p-pricing-section { background: #fff; position: relative; overflow: hidden; }
.p-pricing-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 400px; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,148,0,.06) 0%, transparent 70%); pointer-events: none; }
.p-pricing-grad { background: linear-gradient(90deg, #ff9400 0%, #17166b 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.p-pricing-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1280px; margin: 0 auto; align-items: start; position: relative; z-index: 1; }
.p-pricing-card { padding: 32px; border-radius: 24px; background: #fff; border: 1px solid #e5e6ed; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 4px 20px rgba(23,22,107,.05); transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease; }
.p-pricing-card:hover { border-color: rgba(23,22,107,.18); box-shadow: 0 14px 44px rgba(23,22,107,.1); }
.p-pricing-featured { background: #17166b; border-color: #17166b; box-shadow: 0 20px 60px rgba(23,22,107,.28); }
.p-pricing-featured:hover { border-color: rgba(255,148,0,.6); box-shadow: 0 28px 80px rgba(23,22,107,.38), 0 0 0 1px rgba(255,148,0,.3); }
.p-pricing-top { display: flex; align-items: center; justify-content: space-between; }
.p-pricing-badge { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; padding: 4px 11px; border-radius: 20px; background: #f4f5fb; color: #656a79; border: 1px solid #e5e6ed; }
.p-pricing-badge-hot { background: rgba(255,148,0,.12); color: #c05c00; border-color: rgba(255,148,0,.3); }
.p-pricing-icon { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.15)); }
.p-pricing-kicker { margin: 4px 0 0; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: rgba(23,22,107,.32); }
.p-pricing-featured .p-pricing-kicker { color: rgba(255,255,255,.38); }
.p-pricing-title { margin: 0; font-size: 30px; font-weight: 800; color: #17166b; letter-spacing: -.03em; line-height: 1.05; }
.p-pricing-featured .p-pricing-title { color: #fff; }
.p-pricing-desc { margin: 0; font-size: 14.5px; color: #626779; line-height: 1.65; flex: 1; }
.p-pricing-featured .p-pricing-desc { color: rgba(255,255,255,.58); }
.p-pricing-divider { border: none; border-top: 1px solid #eef0f8; margin: 4px 0; }
.p-pricing-featured .p-pricing-divider { border-color: rgba(255,255,255,.1); }
.p-pricing-cta-ghost { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 900; color: #17166b; background: none; border: 1.5px solid #e0e2ee; border-radius: 12px; padding: 12px 20px; cursor: pointer; transition: border-color .18s, color .18s; align-self: flex-start; }
.p-pricing-cta-ghost:hover { border-color: #17166b; color: #11113f; }
.p-pricing-cta-main { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 28px; border-radius: 14px; background: #ff9400; color: #17166b; font-weight: 850; font-size: 15px; border: none; cursor: pointer; box-shadow: 0 8px 28px rgba(255,148,0,.4); transition: box-shadow .2s, background .2s; align-self: flex-start; }
.p-pricing-cta-main:hover { background: #ffab32; box-shadow: 0 12px 36px rgba(255,148,0,.5); }
@media (max-width: 900px) { .p-pricing-cards { grid-template-columns: 1fr; max-width: 560px; } }

/* FAQ accordion */
.p-faq { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.p-faq-item { border: 1px solid var(--border-light); border-radius: 14px; background: #fff; overflow: hidden; }
.p-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 20px; border: 0; background: none; text-align: left; font-weight: 800; color: var(--brand-navy); font-size: 15px; }
.p-faq-q i { position: relative; flex: 0 0 18px; height: 18px; }
.p-faq-q i::before, .p-faq-q i::after { content: ""; position: absolute; background: var(--brand-orange); border-radius: 2px; transition: transform .25s ease; }
.p-faq-q i::before { left: 0; right: 0; top: 8px; height: 2px; }
.p-faq-q i::after { top: 0; bottom: 0; left: 8px; width: 2px; }
.p-faq-item.open .p-faq-q i::after { transform: scaleY(0); }
.p-faq-a { overflow: hidden; }
.p-faq-a p { margin: 0; padding: 0 20px 20px; color: var(--text-secondary); line-height: 1.6; font-size: 14.5px; }

/* Sticky mobile call to action — the page is a single long scroll now */
.p-mobile-cta { display: none; }
@media (max-width: 700px) {
  .p-mobile-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -8px 24px rgba(23, 22, 107, .1);
  }
  .p-mobile-cta a { display: block; text-align: center; }
  .p-footer { padding-bottom: 88px; }
}

/* Solution Block — dark redesign */
@keyframes sol-orb-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,-80px) scale(1.1); } }
@keyframes sol-orb-2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-70px,60px) scale(0.9); } }
.p-solution-dark { background: #fff; position: relative; overflow: hidden; }
.p-solution-dark .p-eyebrow { color: #e98200; }
.p-solution-dark .p-section-head h2 { color: #11113f; }
.p-solution-dark .p-section-head > p { color: #626779; }
.p-solution-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.p-solution-orb { position: absolute; border-radius: 50%; filter: blur(140px); }
.p-solution-orb:nth-child(1) { width: 500px; height: 500px; top: -160px; left: -120px; background: rgba(255,148,0,.06); animation: sol-orb-1 18s ease-in-out infinite; }
.p-solution-orb:nth-child(2) { width: 440px; height: 440px; bottom: -130px; right: -80px; background: rgba(101,88,232,.06); animation: sol-orb-2 22s ease-in-out infinite; }
.p-solution-head { position: relative; z-index: 1; }
.p-sol-grad { background: linear-gradient(90deg, #ff9400 0%, #ffb347 50%, #ff6b00 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.p-solution-grid-new { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }
.p-sol-card { padding: 28px; border: 1px solid #e5e7f0; border-radius: 20px; background: #fff; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: border-color .22s, background .22s, box-shadow .22s, transform .22s; box-shadow: 0 4px 18px rgba(23,22,107,.05); }
.p-sol-card:hover { border-color: var(--sac, #ff9400); background: color-mix(in srgb, var(--sac, #ff9400) 5%, #fff); box-shadow: 0 12px 44px color-mix(in srgb, var(--sac, #ff9400) 14%, transparent); transform: translateY(-6px); }
.p-sol-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.p-sol-icon { font-size: 28px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.12)); }
.p-sol-num { font-size: 11px; font-weight: 900; letter-spacing: .12em; color: var(--sac, #ff9400); opacity: .65; }
.p-sol-hook { margin: 0; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--sac, #ff9400); }
.p-sol-title { margin: 0; font-size: 19px; font-weight: 800; color: #11113f; letter-spacing: -.02em; line-height: 1.2; }
.p-sol-desc { margin: 0; font-size: 13px; color: #626779; line-height: 1.65; flex: 1; }
.p-sol-cta { align-self: flex-start; margin-top: 8px; padding: 0; border: none; background: none; color: var(--sac, #ff9400); font-size: 13px; font-weight: 900; cursor: pointer; letter-spacing: .02em; }
.p-sol-cta:hover { opacity: .75; }
@media (max-width: 1024px) { .p-solution-grid-new { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .p-solution-grid-new { grid-template-columns: 1fr; } }

/* Ecosystem — step by step */
@keyframes eco-dot-move { 0% { left: 0; } 100% { left: calc(100% - 10px); } }
@keyframes eco-orb-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-80px,60px) scale(1.08); } }
@keyframes eco-orb-2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(70px,-50px) scale(0.92); } }
.p-ecosystem-dark { background: #06061f; position: relative; overflow: hidden; }
.p-ecosystem-dark .p-section-head { margin-bottom: 48px; }
.p-eco-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.p-eco-orb { position: absolute; border-radius: 50%; filter: blur(130px); }
.p-eco-orb:nth-child(1) { width: 550px; height: 550px; top: -120px; right: -80px; background: rgba(23,22,107,.45); animation: eco-orb-1 20s ease-in-out infinite; }
.p-eco-orb:nth-child(2) { width: 380px; height: 380px; bottom: -60px; left: -40px; background: rgba(255,148,0,.07); animation: eco-orb-2 25s ease-in-out infinite; }
.p-eco-head { position: relative; z-index: 1; }
.p-eco-head h2 { color: #fff; }
.p-eco-head > p { color: rgba(255,255,255,.48); }
.p-eco-head .p-eyebrow { color: #ff9400; }
.p-eco-grad { background: linear-gradient(90deg, #ff9400 0%, #ffb347 60%, #ff6b00 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.p-eco-track-wrap { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto 36px; padding: 0 8px; }
.p-eco-track { position: relative; height: 3px; background: rgba(255,255,255,.08); border-radius: 3px; }
.p-eco-track-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ff9400 0%, rgba(255,148,0,.25) 100%); transform-origin: left; }
.p-eco-track-dot { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #ff9400; box-shadow: 0 0 14px 3px rgba(255,148,0,.7); transform: translateY(-50%); animation: eco-dot-move 2.6s ease-in-out infinite alternate; }
.p-eco-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }
.p-eco-step { padding: 28px 26px 28px; border: 1px solid rgba(255,255,255,.07); border-radius: 20px; background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 14px; cursor: default; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.p-eco-step:hover { border-color: rgba(255,148,0,.28); background: rgba(255,148,0,.04); box-shadow: 0 0 36px rgba(255,148,0,.08); }
.p-eco-step-top { display: flex; align-items: center; justify-content: space-between; }
.p-eco-num { font-size: 11px; font-weight: 900; letter-spacing: .14em; color: #ff9400; opacity: .75; }
.p-eco-icon { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.p-eco-title { margin: 0; font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.025em; line-height: 1.15; }
.p-eco-desc { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.48); line-height: 1.68; flex: 1; }
@media (max-width: 1024px) { .p-eco-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .p-eco-steps { grid-template-columns: 1fr; } .p-eco-track-wrap { display: none; } }

/* Automation cards: manual habit -> product -> result */
/* Automation — 3D dark redesign */
@keyframes orb-drift-1 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(50px,-70px) scale(1.12); } 66% { transform: translate(-35px,50px) scale(0.94); } }
@keyframes orb-drift-2 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-60px,40px) scale(0.88); } 66% { transform: translate(70px,-50px) scale(1.18); } }
@keyframes orb-drift-3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,60px) scale(1.08); } }
@keyframes icon-float { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-4px); } }
/* Automation — dark command center */
.p-automation-dark { background: #06061f; position: relative; overflow: hidden; }
.p-automation-dark::before { display: none; }
.p-automation-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; display: block; }
.p-automation-bg-orb { position: absolute; border-radius: 50%; filter: blur(130px); }
.p-automation-bg-orb:nth-child(1) { width: 700px; height: 700px; top: -180px; left: -120px; background: rgba(101,88,232,.18); animation: orb-drift-1 22s ease-in-out infinite; }
.p-automation-bg-orb:nth-child(2) { width: 500px; height: 500px; bottom: -80px; right: -60px; background: rgba(255,148,0,.09); animation: orb-drift-2 28s ease-in-out infinite; }
.p-automation-bg-orb:nth-child(3) { width: 380px; height: 380px; top: 45%; left: 38%; background: rgba(23,22,107,.22); animation: orb-drift-3 18s ease-in-out infinite; }
.p-automation-dark .p-section-head { position: relative; z-index: 1; }
.p-automation-dark .p-section-head h2 { color: #fff; }
.p-automation-dark .p-section-head > p { color: rgba(255,255,255,.48); }
.p-automation-dark .p-eyebrow { color: #ff9400; }
.p-grad-text { background: linear-gradient(90deg, #a78bfa 0%, #c4b5fd 55%, #e0d9ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.p-automation-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; max-width: 1200px; margin: 0 auto 20px; position: relative; z-index: 1; }
.p-automation-tab { padding: 10px 14px; color: rgba(255,255,255,.62); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.p-automation-tab:hover { color: #fff; border-color: rgba(255,255,255,.26); transform: translateY(-2px); }
.p-automation-tab.active { color: #fff; background: rgba(167,139,250,.16); border-color: rgba(167,139,250,.62); box-shadow: 0 8px 24px rgba(101,88,232,.18); }
.p-automation-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.p-automation-featured { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
/* Card — dark glass */
.p-automation-card { border: 1px solid rgba(255,255,255,.08); border-radius: 22px; padding: 28px; background: rgba(255,255,255,.04); overflow: hidden; transition: transform .22s ease, box-shadow .25s ease, border-color .25s ease; transform-style: preserve-3d; position: relative; box-shadow: 0 4px 24px rgba(0,0,0,.35); }
.p-automation-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 22px 22px 0 0; background: linear-gradient(90deg, var(--ac, #ff9400), color-mix(in srgb, var(--ac, #ff9400) 50%, transparent)); }
.p-automation-card::after { display: none; }
.p-automation-card:hover { border-color: color-mix(in srgb, var(--ac-glow, #ff9400) 30%, transparent); box-shadow: 0 0 60px color-mix(in srgb, var(--ac-glow, #ff9400) 10%, transparent), 0 24px 64px rgba(0,0,0,.45); }
.p-automation-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.07); position: relative; z-index: 1; }
.p-automation-icon { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; animation: icon-float 3s ease-in-out infinite; background: var(--ac, #ff9400) !important; border: none !important; box-shadow: 0 4px 18px color-mix(in srgb, var(--ac, #ff9400) 45%, transparent); }
.p-automation-name { font-size: 17px; font-weight: 800; letter-spacing: -.015em; color: rgba(255,255,255,.92); margin: 0; }
.p-automation-outcome-title { margin: 3px 0 0; color: #a7f3c1; font-size: clamp(18px, 2vw, 24px); letter-spacing: -.03em; line-height: 1.1; }
.p-automation-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 10px; position: relative; z-index: 1; }
.p-automation-col { display: flex; flex-direction: column; gap: 7px; }
/* Labels */
.p-automation-lbl { font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.28); flex-shrink: 0; display: flex; align-items: center; gap: 5px; }
.p-automation-lbl.lbl-before { color: #f87171; }
.p-automation-lbl.lbl-before::before { content: "✕"; font-size: 8px; opacity: .7; }
.p-automation-lbl.lbl-ai { color: var(--ac, #ff9400); }
.p-automation-lbl.lbl-result { color: #6ee7a0; }
.p-automation-lbl.lbl-result::before { content: "✓"; font-size: 9px; }
/* Step cards */
.p-automation-step { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 12px 13px; border-radius: 11px; font-size: 12.5px; line-height: 1.65; font-weight: 500; }
.p-automation-step.manual { background: rgba(239,68,68,.1); color: #fca5a5; border: 1px solid rgba(239,68,68,.22); }
@keyframes ai-pulse { 0%,100% { box-shadow: 0 0 14px color-mix(in srgb, var(--card-glow,#ff9400) 18%, transparent); } 50% { box-shadow: 0 0 32px color-mix(in srgb, var(--card-glow,#ff9400) 32%, transparent); } }
@keyframes ai-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }
.p-automation-step.done { background: color-mix(in srgb, var(--card-glow, #ff9400) 12%, rgba(255,255,255,.02)); color: #fff; font-weight: 600; border: 1px solid color-mix(in srgb, var(--card-glow, #ff9400) 30%, transparent); border-left: 3px solid var(--card-glow, #ff9400); padding-left: 11px; position: relative; overflow: hidden; animation: ai-pulse 2.8s ease-in-out infinite; }
.p-automation-step.done::after { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); animation: ai-shimmer 3.5s ease-in-out infinite; pointer-events: none; }
.p-automation-step.result { background: rgba(34,197,94,.09); color: #86efac; font-weight: 600; border: 1px solid rgba(34,197,94,.22); }
.p-automation-link { display: inline-flex; position: relative; z-index: 1; margin-top: 18px; color: var(--ac, #ff9400); font-size: 13px; font-weight: 850; text-decoration: none; }
.p-automation-link:hover { color: #fff; }
/* AI badge */
.p-auto-ai-badge { display: inline-flex; align-items: center; font-size: 9px; font-weight: 900; letter-spacing: .08em; padding: 3px 8px; border-radius: 20px; border: 1px solid; align-self: flex-start; flex-shrink: 0; }
/* SVG arrow */
.p-auto-arrow { display: flex; align-items: center; justify-content: center; padding-top: 22px; }
.p-auto-arrow svg { overflow: visible; }
@media (max-width: 860px) { .p-automation-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 0 2px 5px; } .p-automation-tab { white-space: nowrap; } .p-automation-grid { grid-template-columns: 1fr; } .p-automation-flow { grid-template-columns: 1fr; } .p-auto-arrow { padding-top: 0; transform: rotate(90deg); } }

/* Portfolio section */
.p-portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1280px; margin: 0 auto; }
.p-portfolio-card { border: 1px solid #e5e6ed; border-radius: 20px; background: #fff; overflow: hidden; transform-style: preserve-3d; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; box-shadow: 0 4px 18px rgba(23,22,107,.06); }
.p-portfolio-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--pac, #ff9400) 40%, transparent); box-shadow: 0 16px 48px rgba(23,22,107,.12); }
.p-portfolio-visual { padding: 20px 20px 0; }
.p-portfolio-screen { border: 1px solid; border-radius: 12px 12px 0 0; background: #fff; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
/* Mini mockup UI */
.p-pmock { font-family: inherit; }
.p-pmock-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #17166b; color: #fff; font-size: 11px; font-weight: 700; }
.p-pmock-live { color: #4ade80; font-size: 10px; font-weight: 800; }
.p-pmock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-bottom: 1px solid #f0f1f7; }
.p-pmock-stat { padding: 10px 12px; border-right: 1px solid #f0f1f7; }
.p-pmock-stat:last-child { border-right: none; }
.p-pmock-stat strong { display: block; font-size: 16px; font-weight: 900; color: #17166b; }
.p-pmock-stat span { display: block; font-size: 9px; color: #8b8fa1; margin-top: 1px; }
.p-pmock-list { padding: 6px 0; }
.p-pmock-row { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 10px; color: #565b6e; border-bottom: 1px solid #f7f8fc; }
.p-pmock-row:last-child { border-bottom: none; }
.p-pmock-row span:first-child { font-weight: 700; color: #17166b; min-width: 60px; }
.p-pmock-row span:nth-child(2) { flex: 1; }
.p-pmock-badge { padding: 2px 7px; border-radius: 20px; background: #f0fdf5; color: #065f2e; font-size: 9px; font-weight: 800; white-space: nowrap; }
.p-pmock-bar-wrap { flex: 1; height: 5px; background: #f0f1f7; border-radius: 99px; overflow: hidden; }
.p-pmock-bar-fill { height: 100%; background: var(--pac, #ff9400); border-radius: 99px; }
/* Card info section */
.p-portfolio-info { padding: 18px 20px 20px; }
.p-portfolio-top { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.p-portfolio-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.p-portfolio-tag { font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; border: 1px solid; }
.p-portfolio-name { margin: 0 0 7px; font-size: 18px; font-weight: 800; color: #17166b; letter-spacing: -.02em; }
.p-portfolio-desc { margin: 0 0 14px; font-size: 13px; color: #626779; line-height: 1.6; }
.p-portfolio-features { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.p-portfolio-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: #444b5e; line-height: 1.4; }
.p-portfolio-check { font-weight: 900; font-size: 13px; flex-shrink: 0; margin-top: 0px; }
.p-portfolio-footer { display: flex; align-items: center; gap: 14px; }
.p-portfolio-live { font-size: 11px; font-weight: 800; color: #16a34a; }
@media (max-width: 1024px) { .p-portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .p-portfolio-grid { grid-template-columns: 1fr; } }

/* Product Finder */
.p-finder-section { background: #f5f6fc; }
.p-finder-card { max-width: 860px; margin: 0 auto; background: #fff; border: 1px solid #e2e4f0; border-radius: 24px; padding: 44px 48px; box-shadow: 0 8px 40px rgba(23,22,107,.07); }
.p-finder-progress { display: flex; align-items: center; margin-bottom: 36px; }
.p-finder-step { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; background: #eceef8; color: #9099b8; flex-shrink: 0; }
.p-finder-step.active { background: #17166b; color: #fff; }
.p-finder-line { flex: 1; height: 2px; background: #e4e6f0; margin: 0 10px; transition: background .3s; }
.p-finder-line.done { background: #17166b; }
.p-finder-q { font-size: 20px; font-weight: 800; color: #0a0a2e; margin: 0 0 24px; line-height: 1.35; }
.p-finder-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.p-finder-opts-col { grid-template-columns: 1fr; gap: 10px; }
.p-finder-opt { display: flex; align-items: center; gap: 13px; padding: 15px 16px; border: 1.5px solid #e4e6f0; border-radius: 12px; background: #fafbff; cursor: pointer; text-align: left; transition: border-color .18s, background .18s; }
.p-finder-opt:hover { border-color: #17166b; background: #f4f5ff; }
.p-finder-opt-icon { font-size: 24px; flex-shrink: 0; line-height: 1; }
.p-finder-opt-text { display: flex; flex-direction: column; gap: 2px; }
.p-finder-opt-text strong { font-size: 13px; font-weight: 800; color: #17166b; }
.p-finder-opt-text em { font-size: 11px; color: #7078a0; font-style: normal; }
.p-finder-opt-row { padding: 18px 22px; font-size: 14.5px; font-weight: 700; color: #17166b; border-radius: 12px; }
.p-finder-result { padding: 4px 0 0; }
.p-finder-badge { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px; background: #fdf6ee; border: 1px solid var(--rc, #ff9400); color: var(--rc, #ff9400); font-size: 11px; font-weight: 900; letter-spacing: .08em; margin-bottom: 24px; }
.p-finder-result-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid #eceef8; }
.p-finder-result-icon { width: 52px; height: 52px; border-radius: 14px; border: 1.5px solid; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.p-finder-result-name { margin: 0 0 7px; font-size: 24px; font-weight: 900; color: #0a0a2e; }
.p-finder-result-desc { margin: 0; color: #5a6080; font-size: 14px; line-height: 1.6; }
.p-finder-features-label { font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: rgba(0,0,40,.38); margin: 0 0 12px; }
.p-finder-features { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; margin: 0 0 28px; }
.p-finder-features li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: #1a1a3a; line-height: 1.6; padding: 14px 16px; background: #f7f8fd; border: 1px solid #eceef8; border-radius: 10px; }
.p-finder-check { font-weight: 900; color: var(--rc, #ff9400); flex-shrink: 0; margin-top: 1px; }
.p-finder-actions { display: flex; align-items: center; gap: 20px; }
.p-finder-restart { border: 0; background: none; color: #8890b0; font-size: 13px; font-weight: 700; cursor: pointer; padding: 8px 0; }
.p-finder-restart:hover { color: #17166b; }
@media (max-width: 700px) { .p-finder-card { padding: 28px 20px; } .p-finder-opts { grid-template-columns: 1fr; } }

/* Product comparison table */
.p-compare-wrap { max-width: 1280px; margin: 0 auto; overflow-x: auto; border: 1px solid var(--border-light); border-radius: 16px; }
.p-compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.p-compare-table th { text-align: left; padding: 14px 18px; background: var(--background-muted); color: var(--text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 900; border-bottom: 1px solid var(--border-light); white-space: nowrap; }
.p-compare-table td { padding: 16px 18px; border-bottom: 1px solid var(--border-light); color: #3f4458; font-size: 13.5px; vertical-align: top; }
.p-compare-table tr:last-child td { border-bottom: 0; }
.p-compare-table td b { display: block; color: var(--brand-navy); margin-bottom: 4px; }

/* Before / with Diglip comparison */
/* Before vs With Diglip redesign */
/* Difference section — dark animated redesign */
@keyframes diff-orb-1 { 0%,100% { transform: translate(0,0) scale(1); } 40% { transform: translate(60px,-80px) scale(1.1); } 70% { transform: translate(-40px,50px) scale(0.92); } }
@keyframes diff-orb-2 { 0%,100% { transform: translate(0,0) scale(1); } 35% { transform: translate(-70px,40px) scale(0.88); } 70% { transform: translate(50px,-60px) scale(1.14); } }
@keyframes diff-orb-3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,70px) scale(1.08); } }
.p-diff-section { background: #06061f; position: relative; overflow: hidden; }
.p-diff-section .p-section-head h2 { color: #fff; }
.p-diff-section .p-section-head > p { color: rgba(255,255,255,.5); }
.p-diff-section .p-eyebrow { color: #ff9400; }
.p-diff-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.p-diff-bg-orb { position: absolute; border-radius: 50%; filter: blur(100px); }
.p-diff-bg-orb:nth-child(1) { width: 500px; height: 500px; top: -150px; left: -80px; background: rgba(255,100,40,.14); animation: diff-orb-1 16s ease-in-out infinite; }
.p-diff-bg-orb:nth-child(2) { width: 440px; height: 440px; bottom: -120px; right: -60px; background: rgba(100,60,220,.14); animation: diff-orb-2 20s ease-in-out infinite; }
.p-diff-bg-orb:nth-child(3) { width: 350px; height: 350px; top: 40%; left: 48%; background: rgba(255,148,0,.08); animation: diff-orb-3 12s ease-in-out infinite; }
.p-diff-wrap { max-width: 1060px; margin: 0 auto; position: relative; z-index: 1; }
.p-diff-headers { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 14px; }
.p-diff-hdr { font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; padding: 0 22px 0 20px; }
.p-diff-hdr.before { color: rgba(255,130,100,.7); }
.p-diff-hdr.after { color: #ff9400; }
.p-diff-rows { display: flex; flex-direction: column; gap: 8px; }
.p-diff-row { display: grid; grid-template-columns: 1fr 3px 1fr; align-items: stretch; gap: 0; }
.p-diff-row:hover .p-diff-cell.before { background: rgba(200,50,20,.16); }
.p-diff-row:hover .p-diff-cell.after { background: rgba(255,255,255,.1); }
.p-diff-center-bar { background: linear-gradient(180deg, transparent 0%, rgba(255,148,0,.5) 40%, rgba(255,148,0,.5) 60%, transparent 100%); border-radius: 2px; }
.p-diff-cell { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; font-size: 14px; line-height: 1.65; transition: background .22s ease; }
.p-diff-cell p { margin: 0; }
.p-diff-cell.before { background: rgba(200,50,20,.1); color: rgba(255,180,160,.88); border: 1px solid rgba(200,80,40,.25); border-right: none; border-radius: 14px 0 0 14px; }
.p-diff-cell.after { background: rgba(255,255,255,.07); color: #fff; font-weight: 700; border: 1px solid rgba(255,255,255,.12); border-left: none; border-radius: 0 14px 14px 0; }
.p-diff-dot { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; margin-top: 3px; }
.p-diff-dot.before-dot { background: rgba(200,80,40,.5); }
.p-diff-dot.after-dot { background: #ff9400; box-shadow: 0 0 14px rgba(255,148,0,.5); }
@media (max-width: 700px) { .p-diff-headers { grid-template-columns: 1fr; gap: 6px; margin-bottom: 10px; } .p-diff-row { grid-template-columns: 1fr; } .p-diff-center-bar { display: none; } .p-diff-cell.before { border-right: 1px solid rgba(200,80,40,.25); border-bottom: none; border-radius: 14px 14px 0 0; } .p-diff-cell.after { border-left: 1px solid rgba(255,255,255,.12); border-top: none; border-radius: 0 0 14px 14px; } }

@media (prefers-reduced-motion: reduce) {
  .p-orb { animation: none; }
}

/* ── Hero WOW ── */
@keyframes hero-float-a { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-13px) rotate(1deg); } }
@keyframes hero-float-b { 0%,100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(11px) rotate(-1.5deg); } }
@keyframes hero-float-c { 0%,100% { transform: translateY(-7px) rotate(-1deg); } 50% { transform: translateY(7px) rotate(2deg); } }
@keyframes hero-float-d { 0%,100% { transform: translateY(9px) rotate(2deg); } 50% { transform: translateY(-9px) rotate(-2deg); } }
@keyframes hero-eyebrow-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.6); } }

/* Dot grid overlay */
.p-hero-dot-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(23,22,107,.065) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 70% 90% at 22% 55%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 22% 55%, black 10%, transparent 70%);
}

/* Richer hero background — stays white */
.p-hero {
  background:
    radial-gradient(circle at 78% 16%, rgba(255,148,0,.16), transparent 32%),
    radial-gradient(circle at 12% 86%, rgba(23,22,107,.11), transparent 26%),
    linear-gradient(140deg, #f5f6ff, #fff 46%, #fff7ed);
}

/* Stronger hero orbs */
.p-orb-a { width: 520px; height: 520px; top: -150px; right: -80px; background: radial-gradient(circle, rgba(255,148,0,.56), transparent 68%); }
.p-orb-b { width: 440px; height: 440px; bottom: -160px; left: -70px; background: radial-gradient(circle, rgba(48,46,145,.5), transparent 68%); }

/* Eyebrow pill */
.p-hero-eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; margin-bottom: 22px;
  border: 1px solid rgba(255,148,0,.28); border-radius: 999px;
  background: rgba(255,148,0,.07);
  color: #b55e00; font-size: 11px; font-weight: 950; letter-spacing: .15em;
}
.p-hero-eyebrow-dot {
  flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: #ff9400;
  animation: hero-eyebrow-dot 1.8s ease-in-out infinite;
}

/* Cycling headline word */
.p-hero-cycle-wrap {
  display: inline-block; overflow: hidden;
  vertical-align: bottom; line-height: inherit;
}
.p-hero h1 .p-hero-cycle-word {
  display: inline-block;
  background: linear-gradient(92deg, #ff9400 0%, #ffb347 45%, #e87000 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Hero trust chips */
.p-hero-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.p-hero-trust-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border: 1px solid rgba(23,22,107,.09); border-radius: 999px;
  background: rgba(23,22,107,.03); color: #3c4360; font-size: 12px; font-weight: 750;
}

/* Preview wrapper for floating badges */
.p-hero-preview-wrap { position: relative; min-width: 0; z-index: 1; }

/* Floating product badges */
.p-hero-float-badge {
  position: absolute; z-index: 20;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; background: #fff;
  border: 1px solid rgba(23,22,107,.1);
  box-shadow: 0 8px 28px rgba(23,22,107,.14), 0 2px 6px rgba(23,22,107,.06);
  font-size: 12px; font-weight: 850; color: #17166b;
  white-space: nowrap; pointer-events: none;
}
.p-hfb-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; }

.p-hero-float-a { top: 7%;  left: -30px;  animation: hero-float-a 5.5s ease-in-out infinite; }
.p-hero-float-b { top: 22%; right: -28px; animation: hero-float-b 6.3s ease-in-out infinite 0.7s; }
.p-hero-float-c { bottom: 26%; left: -26px; animation: hero-float-c 7s ease-in-out infinite 1.3s; }
.p-hero-float-d { bottom: 9%; right: -24px; animation: hero-float-d 5.8s ease-in-out infinite 0.3s; }

@media (max-width: 1100px) {
  .p-hero-float-a, .p-hero-float-b, .p-hero-float-c, .p-hero-float-d { display: none; }
}
@media (max-width: 700px) {
  .p-hero-eyebrow-pill { font-size: 10px; padding: 6px 12px; }
  .p-hero-trust { gap: 6px; }
  .p-hero-trust-chip { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .p-hero-eyebrow-dot, .p-hero-float-a, .p-hero-float-b, .p-hero-float-c, .p-hero-float-d { animation: none; }
}

/* ── Portfolio redesign ── */
.p-portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.p-portfolio-card { overflow: hidden; display: flex; flex-direction: column; }
.p-portfolio-card:hover { transform: none; } /* tilt handled by Framer Motion */

/* Colored header band */
.p-pf-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px; gap: 12px;
}
.p-pf-header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.p-pf-icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 13px;
  background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: 22px;
}
.p-pf-category { margin: 0 0 3px; color: rgba(255,255,255,.72); font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.p-pf-name { margin: 0; color: #fff; font-size: 19px; font-weight: 850; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-pf-live { flex-shrink: 0; color: rgba(255,255,255,.85); font-size: 11px; font-weight: 800; white-space: nowrap; }
.p-pf-status { flex-shrink: 0; font-size: 11px; font-weight: 800; white-space: nowrap; }
.p-pf-status-live { color: rgba(255,255,255,.9); }
.p-pf-status-soon { color: rgba(255,255,255,.6); }

/* Card body */
.p-pf-body { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 22px 26px 26px; }
.p-pf-promise { margin: 0; color: #17166b; font-size: 14.5px; font-weight: 800; line-height: 1.45; }
.p-pf-desc { margin: 0; color: #626779; font-size: 13px; line-height: 1.65; }
.p-pf-audience { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.p-pf-audience-lbl { color: #9298a8; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.p-pf-audience-val { color: #3d4460; font-size: 13px; font-weight: 700; }

/* Features 2×2 grid */
.p-pf-features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 2px; }
.p-pf-feat { display: flex; align-items: flex-start; gap: 8px; }
.p-pf-feat-check { flex-shrink: 0; font-size: 13px; font-weight: 900; line-height: 1.3; margin-top: 1px; }
.p-pf-feat-title { display: block; color: #17166b; font-size: 12px; font-weight: 850; line-height: 1.3; margin-bottom: 3px; }
.p-pf-feat-desc { margin: 0; color: #7d839a; font-size: 11.5px; line-height: 1.55; }

/* Footer */
.p-pf-footer { margin-top: auto; padding-top: 6px; }

@media (max-width: 960px) { .p-portfolio-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .p-pf-features { grid-template-columns: 1fr; }
  .p-pf-header { padding: 18px 20px; }
  .p-pf-body { padding: 18px 20px 22px; }
}

/* ── Products page ── */
.p-products-hero {
  padding: clamp(70px,8vw,100px) clamp(24px,7vw,110px) clamp(50px,6vw,80px);
  background: linear-gradient(145deg, #06061f 0%, #0e0d38 55%, #17166b 100%);
  position: relative; overflow: hidden;
}
.p-products-orb {
  position: absolute; border-radius: 50%; pointer-events: none; filter: blur(64px);
}
.p-products-orb-a { width: 520px; height: 520px; top: -180px; right: -80px; background: rgba(255,148,0,.16); }
.p-products-orb-b { width: 400px; height: 400px; bottom: -120px; left: -60px; background: rgba(99,102,241,.2); }
.p-products-hero-inner { position: relative; z-index: 1; max-width: 820px; }
.p-products-hero .p-eyebrow { color: #ff9400; margin-bottom: 14px; }
.p-products-hero h1 {
  margin: 0 0 20px; color: #fff;
  font-size: clamp(2.6rem, 5.2vw, 5.4rem); line-height: 1.02; letter-spacing: -.055em;
}
.p-products-hero h1 span { color: #ff9400; -webkit-text-fill-color: #ff9400; }
.p-products-lead {
  max-width: 620px; margin: 0 0 38px; color: rgba(255,255,255,.6);
  font-size: clamp(15px, 1.3vw, 18px); line-height: 1.72;
}
.p-products-stats { display: flex; gap: 44px; }
.p-products-stat { display: flex; flex-direction: column; }
.p-products-stat strong {
  color: #ff9400; font-size: clamp(2rem, 3vw, 3.2rem);
  font-weight: 950; letter-spacing: -.04em; line-height: 1;
}
.p-products-stat span { color: rgba(255,255,255,.5); font-size: 12px; font-weight: 700; margin-top: 5px; }
.p-products-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 26px;
  color: rgba(255,255,255,.5); font-size: 13px; font-weight: 750;
  text-decoration: none; transition: color .18s ease;
}
.p-products-back:hover { color: rgba(255,255,255,.85); }
@media (max-width: 700px) {
  .p-products-stats { gap: 24px; flex-wrap: wrap; }
  .p-products-stat strong { font-size: 2rem; }
}

/* ── Eco step 3D cards ── */
.p-eco-step {
  position: relative; overflow: hidden;
}
.p-eco-step::before {
  content: ''; position: absolute; top: 0; left: 24px; right: 24px;
  height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  pointer-events: none; z-index: 1;
}
.p-eco-step:hover {
  border-color: rgba(255,148,0,.42);
  background: rgba(255,148,0,.06);
  box-shadow: 0 0 60px rgba(255,148,0,.16), 0 28px 70px rgba(0,0,0,.55);
}
.p-eco-num-bg {
  position: absolute; bottom: -18px; right: 10px;
  font-size: 96px; font-weight: 950; line-height: 1;
  color: rgba(255,255,255,.043); letter-spacing: -.05em;
  pointer-events: none; user-select: none; z-index: 0;
}
.p-eco-num, .p-eco-title, .p-eco-desc { position: relative; z-index: 1; }

/* ── Custom consent checkbox ── */
.p-consent-card {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 16px; border: 1.5px solid #e1e3eb; border-radius: 12px;
  background: #fafafe; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.p-consent-card:hover { border-color: rgba(255,148,0,.45); background: rgba(255,148,0,.03); }
.p-consent-input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.p-consent-box {
  flex-shrink: 0; display: grid; place-items: center;
  width: 20px; height: 20px; margin-top: 1px;
  border: 2px solid #d0d3de; border-radius: 6px; background: #fff;
  transition: border-color .18s ease, background .18s ease;
}
.p-consent-box svg path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .2s ease .05s; }
.p-consent-input:checked ~ .p-consent-box { border-color: #ff9400; background: #ff9400; }
.p-consent-input:checked ~ .p-consent-box svg path { stroke-dashoffset: 0; }
.p-consent-input:focus-visible ~ .p-consent-box { outline: 2px solid #ff9400; outline-offset: 2px; }
.p-consent-text { color: #565c72; font-size: 13px; line-height: 1.55; }

/* ── WorkflowReview — dark WOW redesign ── */
@keyframes wfr-orb-a { 0%,100% { transform: translate(0,0) scale(1); } 40% { transform: translate(60px,-80px) scale(1.15); } 70% { transform: translate(-40px,55px) scale(.92); } }
@keyframes wfr-orb-b { 0%,100% { transform: translate(0,0) scale(1); } 35% { transform: translate(-70px,50px) scale(.87); } 65% { transform: translate(80px,-55px) scale(1.2); } }
@keyframes wfr-orb-c { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,70px) scale(1.1); } }
@keyframes wfr-dot   { 0% { left: 2%; } 100% { left: 89%; } }

.p-wfr-dark { background: #06061f; position: relative; overflow: hidden; }
.p-wfr-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.p-wfr-orb  { position: absolute; border-radius: 50%; filter: blur(120px); }
.p-wfr-orb-a { width: 620px; height: 620px; top: -160px; left: -110px; background: rgba(255,148,0,.09); animation: wfr-orb-a 22s ease-in-out infinite; }
.p-wfr-orb-b { width: 520px; height: 520px; bottom: -130px; right: -90px; background: rgba(101,88,232,.13); animation: wfr-orb-b 27s ease-in-out infinite; }
.p-wfr-orb-c { width: 380px; height: 380px; top: 42%; left: 48%; transform: translate(-50%,-50%); background: rgba(23,22,107,.2); animation: wfr-orb-c 19s ease-in-out infinite; }

.p-wfr-inner { position: relative; z-index: 1; }

.p-wfr-head { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 740px; margin: 0 auto 56px; }
.p-wfr-head .p-eyebrow { color: #ff9400; margin-bottom: 20px; }
.p-wfr-h2 { color: #fff; font-size: clamp(2.6rem, 5vw, 5rem); line-height: 1.05; letter-spacing: -.05em; margin: 0 0 22px; text-wrap: balance; }
.p-wfr-accent { background: linear-gradient(90deg, #ff9400 0%, #ffb347 55%, #ff6b00 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.p-wfr-lead { color: rgba(255,255,255,.52); font-size: 17px; line-height: 1.72; margin: 0 0 36px; max-width: 560px; }
.p-wfr-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.p-wfr-note { color: rgba(255,255,255,.35); font-size: 13px; font-weight: 600; margin: 0; letter-spacing: .01em; }

.p-wfr-track-wrap { max-width: 1280px; margin: 0 auto 32px; padding: 0 4px; }
.p-wfr-track { position: relative; height: 2px; background: rgba(255,255,255,.06); border-radius: 2px; }
.p-wfr-track-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, #ff9400 0%, rgba(255,148,0,.18) 100%); transform-origin: left; }
.p-wfr-track-dot { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #ff9400; box-shadow: 0 0 14px 4px rgba(255,148,0,.72); transform: translateY(-50%); animation: wfr-dot 2.8s ease-in-out infinite alternate; }

.p-wfr-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1280px; margin: 0 auto; }

.p-wfr-step { position: relative; overflow: hidden; padding: 34px 28px 30px; border: 1px solid rgba(255,255,255,.07); border-radius: 20px; background: rgba(255,255,255,.03); cursor: default; display: flex; flex-direction: column; gap: 20px; }
.p-wfr-step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 20px 20px 0 0; background: linear-gradient(90deg, #ff9400, rgba(255,148,0,0)); }
.p-wfr-step:hover { border-color: rgba(255,148,0,.26); background: rgba(255,148,0,.04); box-shadow: 0 0 44px rgba(255,148,0,.08); }

@keyframes wfr-num-glow {
  0%, 100% { -webkit-text-stroke-color: rgba(255,255,255,.15); text-shadow: none; }
  50%       { -webkit-text-stroke-color: rgba(255,255,255,.75); text-shadow: 0 0 40px rgba(255,255,255,.18), 0 0 80px rgba(255,255,255,.08); }
}
.p-wfr-num { display: block; font-size: clamp(4.5rem, 7vw, 7rem); font-weight: 900; line-height: .85; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.15); font-variant-numeric: tabular-nums; animation: wfr-num-glow 3.2s ease-in-out infinite; }
.p-wfr-step:nth-child(1) .p-wfr-num { animation-delay: 0s; }
.p-wfr-step:nth-child(2) .p-wfr-num { animation-delay: 1.07s; }
.p-wfr-step:nth-child(3) .p-wfr-num { animation-delay: 2.14s; }
.p-wfr-step-title { color: #fff; font-size: 19px; font-weight: 800; letter-spacing: -.025em; margin: 0 0 9px; }
.p-wfr-step-desc  { color: rgba(255,255,255,.48); font-size: 14px; line-height: 1.7; margin: 0; }

@media (max-width: 900px) {
  .p-wfr-steps { grid-template-columns: 1fr; }
  .p-wfr-track-wrap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .p-wfr-orb, .p-wfr-track-dot { animation: none !important; }
}

/* Nav "Talk to us" link + demo button */
.p-nav-talk { font-size: 14px; font-weight: 750; color: #4f5363; transition: color .15s; }
.p-nav-talk:hover, .p-nav-talk:focus-visible { color: #17166b; }
@media (max-width: 700px) { .p-nav-talk { display: none; } }