/* Design: Prism — modern and bright. A centred hero over an iridescent glow, a tight grotesk,
   soft bento cards. Light first (dark on the toggle). Applies only when <html data-design="prism">.
   The glow is a WebGL shader drawn by design-prism.js; its colours are the --prism-* values. */

:root[data-design="prism"] {
  --ink: #FAFAFB;
  --ink-2: #F3F3F6;
  --surface: #FFFFFF;
  --surface-2: #EEEEF3;
  --line: rgba(12, 12, 24, 0.08);
  --line-strong: rgba(12, 12, 24, 0.15);
  --text: #0B0B14;
  --text-rgb: 11, 11, 20;
  --text-2: #3A3A4C;
  --muted: #6B6B80;
  --glass: #6A4CFF;
  --glass-rgb: 106, 76, 255;
  --glass-hover: #5638F0;
  --on-glass: #FFFFFF;
  --amber: #C2570C;
  --danger: #D23B4E;
  --spot: rgba(106, 76, 255, 0.06);
  --card: #FFFFFF;
  --card-shadow: 0 1px 2px rgba(12, 12, 24, .04), 0 12px 32px -12px rgba(12, 12, 24, .10);
  --prism-bg: #FAFAFB;
  --prism-1: #7C5CFF;
  --prism-2: #FF5FA2;
  --prism-3: #FFB45E;
  --prism-4: #3EC5F2;
  --grad: linear-gradient(95deg, #7C5CFF 0%, #FF5FA2 50%, #FF9F45 100%);
  --font-display: "Geist", system-ui, sans-serif;
  --font-body: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}
:root[data-design="prism"][data-theme="dark"] {
  --ink: #08080C;
  --ink-2: #0D0D13;
  --surface: #111118;
  --surface-2: #181822;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #F5F5FA;
  --text-rgb: 245, 245, 250;
  --text-2: #B9B9C8;
  --muted: #84849A;
  --glass: #9C86FF;
  --glass-rgb: 156, 134, 255;
  --glass-hover: #B6A6FF;
  --on-glass: #0B0B14;
  --amber: #FFB45E;
  --spot: rgba(156, 134, 255, 0.08);
  --card: #101017;
  --card-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 40px -20px rgba(0, 0, 0, .6);
  --prism-bg: #08080C;
  --prism-1: #6D4DFF;
  --prism-2: #F0468E;
  --prism-3: #FF9F45;
  --prism-4: #2BB8E8;
}

:root[data-design="prism"] .hero-art > #estate,
:root[data-design="prism"] .hero-art > .tip { display: none; }
:root[data-design="prism"] .hero::before { display: none; }

/* type: one tight grotesk throughout */
:root[data-design="prism"] h1 { font-weight: 600; letter-spacing: -0.055em; line-height: .98; }
:root[data-design="prism"] h2 { font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; }
:root[data-design="prism"] h3, :root[data-design="prism"] h4, :root[data-design="prism"] summary { font-weight: 600; letter-spacing: -0.025em; }
:root[data-design="prism"] .hero-copy h1 .w:nth-last-child(-n+3) > span {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* header: frosted, with an iridescent mark */
:root[data-design="prism"] .top { background: color-mix(in oklab, var(--ink) 72%, transparent); }
:root[data-design="prism"] .brand { font-weight: 600; letter-spacing: -0.03em; }
:root[data-design="prism"] .brand .mark { border-radius: 8px; border: 0; background: conic-gradient(from 210deg, var(--prism-1), var(--prism-2), var(--prism-3), var(--prism-4), var(--prism-1)); }
:root[data-design="prism"] .brand .mark::after { inset: 6px; border-radius: 3px; background: var(--ink); }
:root[data-design="prism"] .top .progress { background: var(--grad); height: 2px; }

/* buttons: solid pills, a coloured ring on hover */
:root[data-design="prism"] .btn { border-radius: 999px; background: var(--text); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.08); transition: box-shadow .25s var(--ease), transform .25s var(--ease), background .25s; }
:root[data-design="prism"] .btn:hover { background: var(--text); box-shadow: 0 0 0 4px rgba(var(--glass-rgb), .22), 0 10px 30px -10px rgba(var(--glass-rgb), .55); transform: translateY(-1px); }
:root[data-design="prism"] .btn.ghost { background: var(--card); color: var(--text); border: 1px solid var(--line-strong); }
:root[data-design="prism"] .btn.ghost:hover { background: var(--card); border-color: rgba(var(--glass-rgb), .5); }
:root[data-design="prism"] .themer, :root[data-design="prism"] .menu-btn { border-radius: 999px; }

/* hero: centred over the glow */
:root[data-design="prism"] .hero .wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; min-height: min(94vh, 960px); align-content: center; padding-block: 56px clamp(150px, 20vh, 240px); }
:root[data-design="prism"] .hero-copy { max-width: 1040px; display: flex; flex-direction: column; align-items: center; }
:root[data-design="prism"] .hero-copy::before {
  content: "Services as software"; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px;
  padding: 6px 14px 6px 12px; border-radius: 999px; font-size: .84rem; font-weight: 500; color: var(--text-2);
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box; border: 1px solid transparent;
  box-shadow: var(--card-shadow);
}
:root[data-design="prism"] .hero-copy h1 { font-size: clamp(3rem, 1.2rem + 6.4vw, 7.2rem); max-width: 14ch; }
:root[data-design="prism"] .hero-copy .lede { margin-inline: auto; max-width: 58ch; font-size: 1.2rem; }
:root[data-design="prism"] .hero-copy .acts { justify-content: center; }
:root[data-design="prism"] .hero-copy .who { margin-inline: auto; max-width: 60ch; font-size: .86rem; color: var(--text-2); }
:root[data-design="prism"] .hero-art,
:root[data-design="prism"] .page-head .hero-art { position: absolute; inset: 0; z-index: -1; width: auto; max-height: none; aspect-ratio: auto; margin: 0; display: block; justify-self: stretch; align-self: stretch; }
:root[data-design="prism"] .hero-art canvas { width: 100%; height: 100%; -webkit-mask-image: none; mask-image: none; }
/* a faint grid behind everything, fading out from the centre */
:root[data-design="prism"] .hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; display: block; width: auto; height: auto; max-width: none; max-height: none; border-radius: 0; filter: none; opacity: 1; animation: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 38%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 60% 55% at 50% 38%, #000 10%, transparent 75%);
}
@media (max-width: 980px) {
  :root[data-design="prism"] .hero .wrap { min-height: 0; padding-block: 48px 180px; }
}

/* page heads: left aligned, glow on the right */
:root[data-design="prism"] .page-head { position: relative; overflow: hidden; isolation: isolate; padding: clamp(80px, 10vw, 150px) 0 clamp(48px, 6vw, 88px); }
:root[data-design="prism"] .page-head .wrap { grid-template-columns: minmax(0, 1fr); }
:root[data-design="prism"] .page-head h1 { max-width: 15ch; }
@media (max-width: 920px) { :root[data-design="prism"] .page-head .hero-art { display: block; } }

/* bento: soft cards instead of rules */
:root[data-design="prism"] section + section { border-top: 0; }
:root[data-design="prism"] .cols { gap: 16px; }
:root[data-design="prism"] .cols > div, :root[data-design="prism"] .cols > div + div { padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); }
:root[data-design="prism"] .cols .more { color: var(--glass); }
:root[data-design="prism"] .seq { gap: 16px; }
:root[data-design="prism"] .seq > div { padding: 56px 28px 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); }
:root[data-design="prism"] .seq > div::before { top: 24px; left: 28px; background: var(--grad); color: #fff; border: 0; font-family: var(--font-mono); font-size: .75rem; }
:root[data-design="prism"] .prodgrid { gap: 16px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
:root[data-design="prism"] .prod { border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); }
:root[data-design="prism"] .prod:hover { background: var(--card); border-color: rgba(var(--glass-rgb), .35); }
:root[data-design="prism"] .prod .pname { font-weight: 600; letter-spacing: -0.04em; }
:root[data-design="prism"] .prod::after { background: var(--grad); height: 2px; }
:root[data-design="prism"] .frame { border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); }
:root[data-design="prism"] .facts { gap: 16px; }
:root[data-design="prism"] .facts > div { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); }
:root[data-design="prism"] .facts b { font-weight: 600; letter-spacing: -0.03em; }
:root[data-design="prism"] .rows { border-top: 0; }
:root[data-design="prism"] .row { border-bottom: 1px solid var(--line); }
:root[data-design="prism"] details { border-radius: 16px; }
:root[data-design="prism"] .ledger td.free { color: var(--glass); font-weight: 500; }
:root[data-design="prism"] .band { position: relative; overflow: hidden; border: 0; color: #fff; background: radial-gradient(70% 140% at 85% 10%, rgba(255, 95, 162, .55), transparent 60%), radial-gradient(60% 120% at 10% 90%, rgba(62, 197, 242, .45), transparent 60%), linear-gradient(120deg, #3B22C8, #6A4CFF 55%, #B24BD8); }
:root[data-design="prism"] .band h2 { color: #fff; }
:root[data-design="prism"] .band p { color: rgba(255, 255, 255, .82); }
:root[data-design="prism"] .band .btn { background: #fff; color: #0B0B14; }
:root[data-design="prism"] .band .btn.ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); }
:root[data-design="prism"] form input, :root[data-design="prism"] form textarea, :root[data-design="prism"] form select { border-radius: 12px; background: var(--card); }
@media (max-width: 760px) {
  :root[data-design="prism"] .cols { gap: 12px; }
  :root[data-design="prism"] .cols > div + div { border-left: 1px solid var(--line); }
}