/* Unified audience-page theme. Loaded after each page's legacy inline CSS. */
:root {
  --bg: #07091a;
  --panel: #0c1024;
  --panel-2: #10162d;
  --ink: #f7f8fc;
  --ink-2: rgba(241,245,249,.78);
  --ink-3: rgba(203,213,225,.58);
  --line: rgba(148,163,184,.13);
  --line-strong: rgba(148,163,184,.23);
  --space: #34d399;
  --space-rgb: 52, 211, 153;
  --space-2: #60a5fa;
  --space-soft: rgba(52,211,153,.09);
}

body[data-space="industry"] {
  --space: #60a5fa;
  --space-rgb: 96, 165, 250;
  --space-2: #a78bfa;
  --space-soft: rgba(96,165,250,.09);
}

body[data-space="textile"] {
  --space: #f59e0b;
  --space-rgb: 245, 158, 11;
  --space-2: #fb7185;
  --space-soft: rgba(245,158,11,.09);
}

html { background: var(--bg); }

body {
  background:
    radial-gradient(900px 540px at 78% 5%, rgba(var(--space-rgb),.13), transparent 64%),
    radial-gradient(700px 460px at 18% 32%, rgba(59,130,246,.08), transparent 68%),
    var(--bg) !important;
  color: var(--ink-2) !important;
  font-family: Inter, 'Segoe UI', system-ui, sans-serif !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148,163,184,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 72%);
}

#canvas { display: none !important; }

nav {
  left: 0 !important;
  right: 0 !important;
  max-width: none !important;
  height: 82px;
  padding: 0 max(28px, calc((100vw - 1180px) / 2)) !important;
  background: rgba(7,9,26,.72) !important;
  border-bottom: 1px solid rgba(148,163,184,.08) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
}

.nav-logo {
  color: var(--ink) !important;
  font-size: 1rem !important;
  letter-spacing: -.03em !important;
}

.nav-back {
  color: var(--ink-3) !important;
  font: 600 .67rem/1 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: .12em !important;
  transition: color .18s cubic-bezier(.22,1,.36,1) !important;
}

.nav-back:hover { color: var(--space) !important; }

.nav-cta,
.hero-cta {
  border: 1px solid rgba(var(--space-rgb),.32) !important;
  background: rgba(var(--space-rgb),.11) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04) !important;
  transition: transform .18s cubic-bezier(.22,1,.36,1), background .18s cubic-bezier(.22,1,.36,1), border-color .18s cubic-bezier(.22,1,.36,1) !important;
}

.nav-cta:hover,
.hero-cta:hover {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  border-color: rgba(var(--space-rgb),.64) !important;
  background: rgba(var(--space-rgb),.17) !important;
}

.nav-cta:active,
.hero-cta:active { transform: scale(.97) !important; }

.sector-hero {
  width: min(1180px, calc(100% - 56px));
  min-height: 100svh !important;
  margin: 0 auto;
  padding: 132px 0 88px !important;
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(470px, 1.08fr);
  gap: clamp(48px, 6vw, 88px);
  align-items: center !important;
  text-align: left !important;
}

.sector-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sector-badge {
  margin: 0 0 28px !important;
  padding: 8px 14px !important;
  border-color: rgba(var(--space-rgb),.27) !important;
  background: rgba(var(--space-rgb),.06);
  color: var(--space) !important;
  font: 600 .64rem/1 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: .16em !important;
}

.sector-badge::before {
  width: 6px !important;
  height: 6px !important;
  background: var(--space) !important;
  animation: none !important;
  box-shadow: 0 0 16px rgba(var(--space-rgb),.55);
}

.sector-hero h1 {
  max-width: 12ch;
  margin: 0 0 26px !important;
  color: var(--ink) !important;
  font-size: clamp(3.05rem, 5.7vw, 5.7rem) !important;
  font-weight: 690 !important;
  line-height: .98 !important;
  letter-spacing: -.052em !important;
}

.sector-hero h1 .accent { color: var(--space) !important; }

.sector-hero p {
  max-width: 54ch !important;
  margin: 0 0 36px !important;
  color: var(--ink-3) !important;
  font-size: clamp(.98rem, 1.3vw, 1.08rem) !important;
  line-height: 1.66 !important;
}

.sector-hero-visual {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 42px 100px rgba(0,0,0,.36), 0 0 0 1px rgba(255,255,255,.015);
}

.sector-hero-visual.vs-stage { min-height: min(68vh, 630px); }

.products-section {
  width: min(1180px, calc(100% - 56px)) !important;
  max-width: none !important;
  padding: 118px 0 !important;
  margin: 0 auto !important;
}

.section-label {
  margin-bottom: 20px !important;
  color: var(--space) !important;
  font: 600 .65rem/1 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: .17em !important;
}

.section-label::before,
.section-label::after { background: var(--space) !important; }

.products-section > h2 {
  max-width: 18ch;
  margin-bottom: 18px !important;
  color: var(--ink) !important;
  font-size: clamp(2.25rem, 4vw, 4.1rem) !important;
  font-weight: 650 !important;
  line-height: 1.03 !important;
  letter-spacing: -.045em !important;
}

.products-section > p {
  max-width: 62ch !important;
  margin-bottom: 64px !important;
  color: var(--ink-3) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

.products-grid {
  grid-template-columns: 1fr !important;
  gap: 22px !important;
}

.product-card {
  display: grid !important;
  grid-template-columns: minmax(0, .88fr) minmax(400px, 1.12fr);
  column-gap: clamp(32px, 4vw, 54px) !important;
  row-gap: clamp(26px, 3vw, 38px) !important;
  min-height: 0;
  padding: clamp(28px, 3.5vw, 42px) !important;
  border: 1px solid var(--line) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 90% 12%, rgba(var(--space-rgb),.08), transparent 38%),
    linear-gradient(145deg, rgba(15,20,44,.88), rgba(8,11,27,.92)) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.025);
  transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .22s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1) !important;
}

.product-card:hover {
  border-color: rgba(var(--space-rgb),.34) !important;
  box-shadow: 0 36px 110px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.035) !important;
}

.product-card::after { display: none !important; }

.product-summary {
  grid-column: 1;
  align-self: center;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.product-summary > * { margin-left: 0 !important; margin-right: 0 !important; }
.product-summary .product-num { margin-bottom: 18px !important; }
.product-summary .pstatus { margin-bottom: 24px !important; }
.product-summary h3 { margin-bottom: 15px !important; }
.product-summary > p { max-width: 52ch; margin-bottom: 20px !important; }
.product-summary .plink { margin-top: 4px !important; }
.product-summary .product-tags { margin: 20px 0 0 !important; }

.product-details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  column-gap: clamp(32px, 4vw, 54px);
  row-gap: 18px;
  align-items: start;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.product-num {
  color: var(--space) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

.product-card h3 {
  color: var(--ink) !important;
  font-size: clamp(1.65rem, 2.7vw, 2.5rem) !important;
  font-weight: 640 !important;
  letter-spacing: -.035em !important;
}

.product-card p {
  color: var(--ink-3) !important;
  font-size: .94rem !important;
  line-height: 1.72 !important;
}

.how-it-works {
  grid-column: 1;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 0 !important;
}

.how-it-works li {
  position: relative;
  display: block !important;
  min-width: 0;
  padding-left: 20px;
  color: rgba(203,213,225,.68) !important;
  font-size: .8rem !important;
  line-height: 1.55 !important;
  overflow-wrap: break-word;
}

.how-it-works li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--space) !important;
}

.product-details .how-it-works:only-child {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pnote {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  border-left-color: rgba(var(--space-rgb),.44) !important;
  color: rgba(148,163,184,.62) !important;
}

.pstatus { justify-self: start; }

.ptag {
  border-color: rgba(var(--space-rgb),.25) !important;
  color: var(--space) !important;
  background: rgba(var(--space-rgb),.04);
}

.plink { color: var(--space) !important; }

.product-scene {
  grid-column: 2 !important;
  grid-row: 1;
  align-self: stretch;
  min-height: 330px;
  height: clamp(330px, 29vw, 370px);
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 22px;
  box-shadow: 0 26px 80px rgba(0,0,0,.28);
}

.product-scene .vs-world { inset: 5%; }

.cta-banner {
  z-index: 2 !important;
  padding: 100px 28px !important;
  border-color: var(--line) !important;
  background:
    radial-gradient(700px 280px at 50% 50%, rgba(var(--space-rgb),.10), transparent 70%),
    rgba(8,11,27,.52) !important;
}

.cta-banner h2 {
  color: var(--ink) !important;
  font-size: clamp(2rem, 4vw, 3.7rem) !important;
  font-weight: 650 !important;
  line-height: 1.06 !important;
  letter-spacing: -.04em !important;
}

.cta-banner p { color: var(--ink-3) !important; }

footer {
  z-index: 2 !important;
  width: min(1180px, calc(100% - 56px));
  margin: 0 auto;
  padding: 34px 0 !important;
  border-top: 1px solid var(--line);
}

.footer-logo { color: rgba(241,245,249,.55) !important; }
.footer-copy { color: rgba(148,163,184,.38) !important; }

.fade-in {
  opacity: 0;
  transform: translateY(10px) !important;
  filter: blur(2px);
  transition:
    opacity .42s cubic-bezier(.22,1,.36,1),
    transform .42s cubic-bezier(.22,1,.36,1),
    filter .42s cubic-bezier(.22,1,.36,1) !important;
}

.fade-in.visible {
  opacity: 1;
  transform: none !important;
  filter: none;
}

@media (max-width: 980px) {
  nav { padding: 0 24px !important; }
  .nav-back { display: none !important; }
  .sector-hero {
    width: min(100% - 40px, 760px);
    grid-template-columns: 1fr;
    padding-top: 128px !important;
    gap: 44px;
  }
  .sector-hero h1 { max-width: 12ch; }
  .sector-hero-visual.vs-stage { min-height: 500px; }
  .products-section { width: min(100% - 40px, 760px) !important; padding: 88px 0 !important; }
  .product-card { grid-template-columns: 1fr; padding: 34px !important; }
  .product-summary { grid-column: 1; grid-row: 1; }
  .product-scene { grid-column: 1 !important; grid-row: 2; min-height: 360px; height: 390px; }
  .product-details { grid-column: 1; grid-row: 3; grid-template-columns: 1fr; }
  .how-it-works { grid-column: 1; }
  .pnote { grid-column: 1; grid-row: auto; }
  .product-details .how-it-works:only-child { grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  nav { height: 70px; }
  .nav-cta { padding: 9px 13px !important; font-size: .65rem !important; }
  .sector-hero { width: calc(100% - 32px); padding: 110px 0 64px !important; }
  .sector-hero h1 { font-size: clamp(2.7rem, 13.2vw, 4rem) !important; }
  .sector-hero-visual.vs-stage { min-height: 390px; }
  .products-section { width: calc(100% - 32px) !important; padding: 72px 0 !important; }
  .product-card { padding: 24px !important; border-radius: 20px !important; }
  .product-scene { min-height: 300px; height: 320px; }
  .product-details { padding-top: 22px; }
  .how-it-works,
  .product-details .how-it-works:only-child { grid-template-columns: 1fr; }
  footer { width: calc(100% - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .fade-in { opacity: 1 !important; transform: none !important; filter: none !important; }
}