/* Variant: Prism — the hero inside a large card with a slowly rotating rainbow border;
   gradient edges on the cards. Hero markup in src/variants/prism. Light only. */

@property --pz-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --muted: #f2f2f4;
  --ink: #111111;
  --ink-2: #555b66;
  --line: #e6e6ea;
  --accent: #111111;
  --accent-ink: #ffffff;
  --accent-soft: #f0f0f3;
  --night: #111111;
  --night-2: #1d1d1f;

  --rainbow-stops: #4f7cff, #a35cff, #ff5c9a, #ffb347, #4fd1c5, #4f7cff;
  --rainbow-line: linear-gradient(120deg, #4f7cff, #a35cff, #ff5c9a, #ffb347, #4fd1c5);
  --ui-accent: #7b5cff;
  --ui-img: #f1edff;
  --ui-tint-a: #e7e0ff;
  --ui-tint-b: #d9f4ef;
  --ui-tint-c: #ffe7d1;

  color-scheme: light;
}

.pz-hero { padding-block: clamp(1.5rem, 4vw, 3rem) 0; }
.pz-card {
  --pz-angle: 0deg;
  position: relative;
  isolation: isolate;
  padding: 3px;
  border-radius: 36px;
  background: conic-gradient(from var(--pz-angle), var(--rainbow-stops));
}
.pz-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6%;
  border-radius: 36px;
  background: conic-gradient(from var(--pz-angle), var(--rainbow-stops));
  filter: blur(40px);
  opacity: 0.35;
}
@media (prefers-reduced-motion: no-preference) {
  .pz-card, .pz-card::before { animation: pz-spin 10s linear infinite; }
  @keyframes pz-spin { to { --pz-angle: 360deg; } }
}
.pz-card__inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(28px, 5vw, 64px);
  border-radius: 33px;
  background: var(--surface);
}
@media (min-width: 64em) { .pz-card__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); } }
.pz-title { font-size: clamp(2.75rem, 5.4vw, 5.25rem); line-height: 0.98; letter-spacing: -0.05em; }
.pz-hero .hero__lead { margin-top: 1.5rem; }
.pz-hero .hero__actions { margin-top: 2rem; }

.pz-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pz-win:first-child { grid-column: 1 / -1; }
.pz-win:first-child .ui { aspect-ratio: 16 / 7; }
.pz-win .ui { border: 1px solid var(--line); box-shadow: 0 20px 40px -28px rgba(20, 20, 40, 0.35); }
.pz-win figcaption { margin-top: 0.5rem; font-size: 0.8125rem; font-weight: 550; color: var(--ink-2); }

/* Shared sections with gradient edges */
.tile, .faq details, .product__visual, .contact__card {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--rainbow-line) border-box;
}
.tile--dark { background: linear-gradient(var(--night), var(--night)) padding-box, var(--rainbow-line) border-box; }
.tile--dark .focus strong { background: var(--rainbow-line); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ticks li::before { border-color: #a35cff; }
.steps li::before { background: var(--rainbow-line); }
.faq details[open] summary::after { background: var(--rainbow-line); }
.product__visual--water { background: linear-gradient(#eef2ff, #eef2ff) padding-box, var(--rainbow-line) border-box; }
.product__visual--jobs { background: linear-gradient(#e9f8f4, #e9f8f4) padding-box, var(--rainbow-line) border-box; }
.product__visual--food { background: linear-gradient(#fff2e6, #fff2e6) padding-box, var(--rainbow-line) border-box; }
.product__link { color: var(--ink); text-decoration-color: #a35cff; }
.phscale__ticks { color: var(--ink-2); }
.section--contact { position: relative; }
.section--contact::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--rainbow-line); }
.contact__card { background: linear-gradient(var(--night-2), var(--night-2)) padding-box, var(--rainbow-line) border-box; }