:root {
  --porcelain-0: #ffffff;
  --porcelain-1: #fafbf9;
  --porcelain-2: #f4f6f4;
  --porcelain-3: #edf1ef;
  --surface-ink: #171c24;
  --surface-line: rgba(116, 128, 145, .16);
}

body {
  background: var(--porcelain-2);
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: .22;
  pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(44, 54, 69, .16) 0 .45px, transparent .55px 3.6px);
  mix-blend-mode: multiply;
}

/* Public website: luminous porcelain instead of a flat white page. */
.marketing-page {
  background:
    radial-gradient(ellipse at 12% 4%, rgba(255,255,255,.98), transparent 34%),
    radial-gradient(ellipse at 88% 18%, rgba(211,225,226,.56), transparent 31%),
    linear-gradient(145deg, #fbfcfa, #eef2f0 58%, #f8f6f3);
}

.marketing-page::before {
  z-index: 0;
  opacity: .12;
  mask-image: linear-gradient(180deg, #000, transparent 82%);
}

.marketing-page > * {
  position: relative;
  z-index: 1;
}

.marketing-page .hero-band {
  background:
    radial-gradient(ellipse at 72% 18%, rgba(104, 129, 223, .13), transparent 22%),
    radial-gradient(ellipse at 90% 43%, rgba(73, 180, 163, .11), transparent 19%),
    radial-gradient(ellipse at 8% 72%, rgba(234, 214, 194, .2), transparent 26%),
    linear-gradient(128deg, #ffffff 0%, #f7f9f7 34%, #eaf0ee 70%, #f8f5f2 100%);
}

.marketing-page .hero-band::after {
  background:
    linear-gradient(180deg, transparent, rgba(248,249,247,.72) 56%, #f8f9f7),
    radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.9), transparent 58%);
}

.marketing-page .proof-band {
  background:
    linear-gradient(118deg, rgba(255,255,255,.74), rgba(239,243,241,.82) 48%, rgba(249,247,244,.76)) !important;
}

.marketing-page .capabilities-section {
  background:
    radial-gradient(ellipse at 8% 15%, rgba(255,255,255,.94), transparent 34%),
    radial-gradient(ellipse at 90% 86%, rgba(214,225,220,.5), transparent 31%),
    linear-gradient(145deg, #fafbf9, #eff3f0);
}

.marketing-page .usecase-section {
  background:
    radial-gradient(ellipse at 80% 12%, rgba(255,255,255,.92), transparent 32%),
    radial-gradient(ellipse at 13% 88%, rgba(226,216,205,.26), transparent 28%),
    linear-gradient(155deg, #f7f8f6, #edf1ef 66%, #f7f5f2);
}

.marketing-page .pricing-section {
  background:
    radial-gradient(ellipse at 15% 4%, rgba(255,255,255,.9), transparent 30%),
    radial-gradient(ellipse at 82% 78%, rgba(204,220,216,.42), transparent 32%),
    linear-gradient(138deg, #f4f6f3, #e8eeeb 58%, #f6f3f0);
}

/* Account surfaces: focused light with a soft edge around the form. */
.auth-page {
  background:
    radial-gradient(ellipse at 88% 7%, rgba(215,225,240,.66), transparent 31%),
    radial-gradient(ellipse at 12% 92%, rgba(216,232,226,.45), transparent 32%),
    linear-gradient(145deg, #fbfcfb, #eef2f1 60%, #f8f6f3);
}

.auth-page .auth-panel-wrap {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(206,219,238,.62), transparent 34%),
    radial-gradient(ellipse at 0% 100%, rgba(210,229,222,.42), transparent 30%),
    linear-gradient(148deg, #fbfcfb, #f0f3f2 58%, #f8f6f3);
}

.auth-page .auth-panel {
  border-color: rgba(161, 174, 191, .3);
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(248,250,249,.72));
  box-shadow:
    0 40px 110px rgba(42, 52, 69, .13),
    0 1px 0 rgba(255,255,255,.95) inset,
    0 0 0 1px rgba(255,255,255,.42);
}

/* Product workspace: one porcelain material with page-specific lighting. */
.product-page {
  background:
    radial-gradient(ellipse at 76% 2%, rgba(211,221,239,.58), transparent 31%),
    radial-gradient(ellipse at 10% 94%, rgba(215,231,224,.42), transparent 32%),
    linear-gradient(145deg, #f9faf9, #edf1ef);
}

.product-page .app-ambient {
  background:
    radial-gradient(ellipse at 70% 0%, rgba(218,226,241,.6), transparent 34%),
    radial-gradient(ellipse at 18% 100%, rgba(219,232,227,.42), transparent 31%);
}

.product-page .ambient-orb {
  opacity: .11;
  filter: blur(120px);
}

.product-page .app-shell {
  background: rgba(246, 248, 247, .55);
}

.product-page .workspace {
  background: transparent;
}

.product-page .view {
  background-color: #f6f8f7;
  background-repeat: no-repeat;
  background-size: cover;
}

.product-page [data-view-panel="dashboard"] {
  background-image:
    radial-gradient(ellipse at 82% 4%, rgba(183,202,235,.3), transparent 31%),
    radial-gradient(ellipse at 9% 92%, rgba(223,210,197,.23), transparent 27%),
    linear-gradient(145deg, #fafbfa, #eff2f1);
}

.product-page [data-view-panel="agents"] {
  background-image:
    radial-gradient(ellipse at 76% 0%, rgba(181,199,235,.28), transparent 30%),
    radial-gradient(ellipse at 14% 100%, rgba(206,225,219,.25), transparent 29%),
    linear-gradient(150deg, #fafbfb, #eef2f1 64%, #f6f5f2);
}

.product-page [data-view-panel="knowledge"] {
  background-image:
    radial-gradient(ellipse at 90% 8%, rgba(191,220,213,.31), transparent 30%),
    radial-gradient(ellipse at 12% 88%, rgba(222,228,214,.25), transparent 28%),
    linear-gradient(142deg, #fafcfb, #edf3f0 62%, #f7f7f3);
}

.product-page [data-view-panel="skills"] {
  background-image:
    radial-gradient(ellipse at 82% 6%, rgba(232,216,190,.31), transparent 28%),
    radial-gradient(ellipse at 10% 91%, rgba(208,220,234,.25), transparent 29%),
    linear-gradient(146deg, #fcfbf8, #f2f1ec 59%, #f3f7f6);
}

.product-page [data-view-panel="data"] {
  background-image:
    radial-gradient(ellipse at 86% 5%, rgba(183,207,235,.34), transparent 30%),
    radial-gradient(ellipse at 8% 92%, rgba(211,225,229,.28), transparent 28%),
    linear-gradient(145deg, #fafcfc, #edf2f4 62%, #f6f7f5);
}

.product-page [data-view-panel="automation"] {
  background-image:
    radial-gradient(ellipse at 87% 7%, rgba(185,224,212,.33), transparent 30%),
    radial-gradient(ellipse at 11% 89%, rgba(211,218,236,.24), transparent 29%),
    linear-gradient(142deg, #fafcfb, #edf3f1 61%, #f5f6f4);
}

.product-page [data-view-panel="market"] {
  background-image:
    radial-gradient(ellipse at 84% 5%, rgba(235,213,196,.31), transparent 29%),
    radial-gradient(ellipse at 8% 92%, rgba(203,220,230,.24), transparent 29%),
    linear-gradient(143deg, #fcfbf9, #f3f0ed 58%, #f1f6f5);
}

.product-page [data-view-panel="team"] {
  background-image:
    radial-gradient(ellipse at 86% 6%, rgba(200,225,207,.32), transparent 30%),
    radial-gradient(ellipse at 10% 92%, rgba(218,215,233,.22), transparent 28%),
    linear-gradient(146deg, #fbfcfa, #eef3ef 61%, #f6f5f3);
}

.product-page [data-view-panel="settings"] {
  background-image:
    radial-gradient(ellipse at 83% 4%, rgba(209,217,229,.34), transparent 29%),
    radial-gradient(ellipse at 9% 94%, rgba(225,219,208,.22), transparent 28%),
    linear-gradient(145deg, #fafbfa, #eff1f0 62%, #f7f5f2);
}

.product-page .primary-nav,
.product-page .agent-rail {
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(244,247,245,.7));
}

.product-page .panel,
.product-page .metric-card,
.product-page .market-app-card,
.product-page .skill-card,
.product-page .settings-content,
.product-page .settings-navigation {
  background:
    linear-gradient(145deg, rgba(255,255,255,.83), rgba(248,250,249,.62));
}

/* Legal pages: paper-like background with a quiet editorial column. */
.legal-page {
  background:
    radial-gradient(ellipse at 86% 8%, rgba(207,220,231,.46), transparent 30%),
    radial-gradient(ellipse at 9% 90%, rgba(225,215,204,.25), transparent 29%),
    linear-gradient(145deg, #fbfcfa, #eef2f0 62%, #f8f6f3);
}

.legal-page .legal-header {
  background: rgba(250,252,251,.78);
  backdrop-filter: blur(24px) saturate(1.15);
}

.legal-page .legal-shell article {
  border-color: rgba(166,178,193,.28);
  background:
    linear-gradient(148deg, rgba(255,255,255,.86), rgba(249,250,247,.7));
  box-shadow: 0 32px 90px rgba(39,49,65,.09), inset 0 1px 0 #fff;
}

/* Admin: neutral silver porcelain so operational data remains dense and calm. */
.admin-page {
  background:
    radial-gradient(ellipse at 84% 4%, rgba(199,213,232,.5), transparent 31%),
    radial-gradient(ellipse at 8% 94%, rgba(218,228,222,.34), transparent 30%),
    linear-gradient(145deg, #fafbfa, #edf1f0 62%, #f7f5f2);
}

.admin-page main {
  background: transparent;
}

.admin-page .admin-login-screen,
.admin-page .admin-app {
  background: transparent;
}

.admin-page .admin-login-card,
.admin-page .admin-shell,
.admin-page .admin-content,
.admin-page .admin-metric,
.admin-page .panel {
  border-color: rgba(158,171,189,.28);
  background:
    linear-gradient(145deg, rgba(255,255,255,.84), rgba(247,249,248,.66));
  box-shadow: 0 28px 80px rgba(39,49,66,.09), inset 0 1px 0 rgba(255,255,255,.95);
}

@media (max-width: 820px) {
  body::before {
    opacity: .1;
  }

  .product-page .view {
    background-size: 160% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    display: none;
  }
}