/* ==========================================================================
   Custom AI Applications — page visuals
   product stage (hero), intro tokens, architecture stack, feature window, exploded product
   ========================================================================== */

/* ==========================================================================
   Hero product stage — HTML panels sized in container units so the whole
   composition scales like an image while text stays real
   ========================================================================== */
.d-glow--apps {
  inset: -6% 4% 42%;
  background:
    radial-gradient(45% 60% at 28% 55%, rgb(107 63 212 / 0.55), transparent 70%),
    radial-gradient(40% 55% at 74% 45%, rgb(58 126 246 / 0.5), transparent 72%),
    radial-gradient(28% 40% at 55% 18%, rgb(214 51 132 / 0.28), transparent 70%);
}
.app-stage { --px: 0; --py: 0; position: relative; max-width: 78rem; margin-inline: auto; container-type: inline-size; }
.app-stage__canvas { position: relative; aspect-ratio: 16 / 9.4; font-size: 1cqi; }

.ui {
  --depth: 0.5;
  position: absolute;
  display: flex; flex-direction: column;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 1.1em;
  background: #0c0c10;
  color: var(--white);
  overflow: hidden;
  box-shadow: 0 2em 4em -1.5em rgb(0 0 0 / 0.8);
  translate: calc(var(--px) * var(--depth) * 14px) calc(var(--py) * var(--depth) * 10px);
}
.ui--dash { left: 13%; top: 4%; width: 60%; height: 88%; flex-direction: row; z-index: 1; }
.ui--flow { left: 0; top: 12%; width: 21%; z-index: 2; padding: 1.1em 1.2em; }
.ui--data { left: 2%; top: 57%; width: 23%; z-index: 2; padding: 1.1em 1.2em 0.6em; }
.ui--assist { left: 62%; top: 7%; width: 32%; height: 66%; z-index: 3; gap: 0.85em; padding: 1.1em 1.2em; }
.ui--stats { left: 67%; top: 75%; width: 28%; z-index: 4; flex-direction: row; align-items: center; gap: 1em; padding: 1em 1.2em; }
.ui__label { margin-bottom: 0.8em; font-size: 0.75em; color: rgb(255 255 255 / 0.5); }

/* dashboard */
.ui__side { flex: none; width: 12%; display: flex; flex-direction: column; align-items: center; gap: 1.3em; padding-top: 1.4em; border-right: 1px solid rgb(255 255 255 / 0.08); }
.ui__logo { width: 1.9em; aspect-ratio: 1; margin-bottom: 0.6em; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #2f86ff, #0f55e6); }
.ui__side i { width: 1.4em; height: 1.4em; border-radius: 0.4em; background: rgb(255 255 255 / 0.1); }
.ui__side i.is-on { background: var(--blue); }
.ui__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.1em; padding: 1.3em 1.5em; }
.ui__top { display: flex; align-items: center; gap: 1.2em; }
.ui__title { flex: none; font-size: 1.25em; font-weight: 600; letter-spacing: -0.02em; }
.ui__search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.6em; padding: 0.6em 0.9em; border-radius: 99em; background: rgb(255 255 255 / 0.06); font-size: 0.85em; color: rgb(255 255 255 / 0.45); white-space: nowrap; overflow: hidden; }
.ui__search b { flex: none; width: 0.8em; height: 0.8em; border: 1.5px solid currentColor; border-radius: 50%; }
.ui__avatar { flex: none; width: 2em; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #9b7cf0, #4f6ff0); }
.ui__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9em; }
.ui__kpi { display: grid; gap: 0.3em; padding: 0.9em 1em; border: 1px solid rgb(255 255 255 / 0.08); border-radius: 0.8em; background: rgb(255 255 255 / 0.03); }
.ui__kpi span { font-size: 0.75em; color: rgb(255 255 255 / 0.5); white-space: nowrap; }
.ui__kpi b { font-size: 1.6em; font-weight: 600; letter-spacing: -0.03em; }
.ui__kpi em { font-size: 0.72em; font-style: normal; color: var(--green); }
.ui__chart { position: relative; flex: 1; min-height: 0; padding: 0.9em 1em 0; border: 1px solid rgb(255 255 255 / 0.08); border-radius: 0.8em; }
.ui__chart-label { font-size: 0.75em; color: rgb(255 255 255 / 0.5); }
.ui__chart svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: calc(100% - 2.6em); }
.ui__area { fill: rgb(58 126 246 / 0.16); }
.ui__line { fill: none; stroke: var(--blue-bright); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
.ui__flag { position: absolute; right: 10%; top: 1.5em; padding: 0.35em 0.7em; border-radius: 99em; background: var(--blue); font-size: 0.72em; font-weight: 600; }
.ui__rows { display: grid; }
.ui__row { display: flex; align-items: center; gap: 0.8em; padding: 0.55em 0.2em; border-top: 1px solid rgb(255 255 255 / 0.06); }
.ui__row i { flex: none; width: 0.6em; height: 0.6em; border-radius: 50%; }
.ui__row i.ok { background: var(--green); }
.ui__row i.warn { background: #f5a524; }
.ui__row span { flex: 1; max-width: 45%; height: 0.5em; border-radius: 99em; background: rgb(255 255 255 / 0.12); }
.ui__row em { margin-left: auto; padding: 0.25em 0.6em; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 99em; font-size: 0.72em; font-style: normal; color: rgb(255 255 255 / 0.55); }

/* workflow */
.ui__steps { display: grid; gap: 0.65em; font-size: 0.9em; }
.ui__steps li { display: flex; align-items: center; gap: 0.7em; color: rgb(255 255 255 / 0.45); }
.ui__steps li::before { content: ""; flex: none; width: 1.15em; height: 1.15em; border: 1.5px solid rgb(255 255 255 / 0.25); border-radius: 50%; }
.ui__steps li.done, .ui__steps li.run { color: var(--white); }
.ui__steps li.done::before { background: var(--blue); border-color: var(--blue); }
.ui__steps li.run::before { border-color: var(--blue-bright); border-right-color: transparent; }

/* data */
.ui__src { display: flex; align-items: center; gap: 0.6em; padding: 0.55em 0; border-top: 1px solid rgb(255 255 255 / 0.07); font-size: 0.88em; }
.ui__src i { flex: none; width: 1.4em; height: 1.4em; border-radius: 0.35em; background: rgb(255 255 255 / 0.12); }
.ui__src em { margin-left: auto; font-size: 0.75em; font-style: normal; color: var(--green); }
.ui__src .ui__bar { position: relative; width: 3.5em; height: 0.35em; border-radius: 99em; background: rgb(255 255 255 / 0.1); overflow: hidden; }
.ui__bar b { position: absolute; inset: 0; width: 40%; border-radius: inherit; background: var(--blue-bright); }

/* assistant */
.ui__head { display: flex; align-items: center; gap: 0.6em; font-size: 0.95em; font-weight: 600; }
.ui__spark { flex: none; width: 1.4em; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 200deg, #7a45e0, #3f6ff2, #7a45e0); }
.ui__pill { margin-left: auto; padding: 0.3em 0.6em; border: 1px solid rgb(255 255 255 / 0.15); border-radius: 99em; font-size: 0.7em; font-weight: 500; color: rgb(255 255 255 / 0.6); }
.ui__msg { padding: 0.75em 0.9em; border-radius: 0.9em; font-size: 0.88em; line-height: 1.4; }
.ui__msg--user { align-self: flex-end; max-width: 80%; background: rgb(255 255 255 / 0.08); }
.ui__msg--ai { border: 1px solid rgb(58 126 246 / 0.3); background: rgb(58 126 246 / 0.1); }
.ui__bars { display: flex; align-items: flex-end; gap: 0.35em; height: 3.2em; margin-top: 0.7em; }
.ui__bars i { flex: 1; height: var(--h); border-radius: 0.25em 0.25em 0 0; background: rgb(255 255 255 / 0.2); }
.ui__bars i:nth-child(4) { background: var(--blue-bright); }
.ui__cite { display: inline-block; margin-top: 0.6em; font-size: 0.72em; color: var(--blue-bright); }
.ui__actions { display: flex; flex-wrap: wrap; gap: 0.5em; }
.ui__actions span { padding: 0.45em 0.7em; border: 1px solid rgb(255 255 255 / 0.15); border-radius: 99em; font-size: 0.75em; }
.ui__actions span:first-child { border-color: var(--white); background: var(--white); color: var(--black); }
.ui__input { margin-top: auto; display: flex; align-items: center; padding: 0.7em 0.9em; border-radius: 0.8em; background: rgb(255 255 255 / 0.06); font-size: 0.82em; color: rgb(255 255 255 / 0.4); }
.ui__input b { width: 1px; height: 1.1em; margin-left: 0.3em; background: var(--white); }

/* analytics */
.ui__donut { flex: none; width: 3.6em; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--blue) 0 72%, rgb(255 255 255 / 0.1) 0); -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%); mask: radial-gradient(circle, transparent 52%, #000 53%); }
.ui__big { font-size: 1.8em; font-weight: 600; letter-spacing: -0.03em; }
.ui--stats .ui__label { margin-bottom: 0.15em; }

@media (prefers-reduced-motion: no-preference) {
  .js .ui { opacity: 0; transform: translate3d(var(--fx), var(--fy), 0) scale(0.96); }
  .is-loaded .ui { opacity: 1; transform: none; transition: opacity 0.9s var(--ease-soft), transform 1.4s var(--ease-out); transition-delay: calc(0.75s + var(--i) * 140ms); }
  .js .ui__line { stroke-dashoffset: 1; }
  .is-loaded .ui__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease-in-out) 1.4s; }

  .ui__steps li.run::before { animation: ui-spin 0.9s linear infinite; }
  .ui__bar b { animation: ui-sync 1.6s var(--ease-in-out) infinite; }
  .ui__input b { animation: ui-caret 1s steps(1) infinite; }
  .d-hero.is-paused .app-stage *, .d-hero.is-paused .app-stage *::before { animation-play-state: paused; }

  @keyframes ui-spin { to { transform: rotate(360deg); } }
  @keyframes ui-sync { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
  @keyframes ui-caret { 50% { opacity: 0; } }
}

/* ==========================================================================
   Intro — "chat box" struck out, the real ingredients as interface tokens
   ========================================================================== */
.apps-intro__title { font-size: clamp(3rem, 0.9rem + 7.2vw, 10rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.055em; }
.apps-intro__title .mask { display: block; width: fit-content; margin-inline: auto; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.apps-strike { position: relative; color: #a3a3a3; }
.apps-strike i { position: absolute; left: -2%; right: -2%; top: 55%; height: 0.075em; background: var(--blue); transform-origin: 0 50%; }
.apps-intro__lead {
  max-width: 21em;
  margin: clamp(2rem, 3.5vw, 3.5rem) auto 0;
  font-size: clamp(1.5rem, 0.85rem + 2.1vw, 3.3rem); font-weight: 600; line-height: 1.32; letter-spacing: -0.035em;
}
.apps-token {
  display: inline-flex; align-items: center; gap: 0.28em;
  padding: 0 0.45em 0.04em 0.32em;
  border: 1.5px solid rgb(58 126 246 / 0.45); border-radius: 99em;
  background: rgb(58 126 246 / 0.08);
  color: var(--blue); line-height: 1.15;
}
.apps-token i { width: 0.42em; height: 0.42em; border-radius: 50%; background: currentColor; }
.apps-intro__note {
  display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
  gap: 1.25rem clamp(2rem, 6vw, 8rem);
  margin-top: clamp(4rem, 7vw, 7.5rem); padding-top: 2rem;
  border-top: 1px solid var(--black);
  text-align: left;
}
.apps-intro__note .d-eyebrow { align-self: start; }
.apps-intro__text { font-size: clamp(1.2rem, 0.8rem + 1.05vw, 2.15rem); line-height: 1.35; letter-spacing: -0.025em; color: var(--gray-ink); }

@media (prefers-reduced-motion: no-preference) {
  .js .apps-strike i { transform: scaleX(0); transition: transform 0.9s var(--ease-in-out) 0.95s; }
  .js .apps-intro__title.is-in .apps-strike i { transform: none; }
  .js .apps-token { opacity: 0; transform: scale(0.7); }
  .js .apps-intro__lead.is-in .apps-token { opacity: 1; transform: none; transition: opacity 0.4s var(--ease-soft), transform 0.8s var(--ease-out); transition-delay: calc(0.45s + var(--t) * 120ms); }
}

/* ==========================================================================
   Product architecture — tilted stack, requests down / responses up
   ========================================================================== */
.arch { position: relative; background: var(--black); color: var(--white); padding-block: clamp(5rem, 9vw, 10rem); overflow: clip; }
.arch__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 3rem clamp(2rem, 6vw, 7rem); }
.arch__title { margin-top: 1rem; font-size: clamp(2.4rem, 1rem + 4vw, 6rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.05em; }
.arch__title .mask { display: block; width: fit-content; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.arch__hint { max-width: 26em; margin-top: 1.5rem; line-height: 1.5; color: rgb(255 255 255 / 0.6); }
.arch__panels { min-height: 12rem; margin-top: clamp(2rem, 4vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / 0.2); }
.arch__count { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.1em; color: var(--blue-bright); }
.arch__panel h3 { margin-top: 0.6rem; font-size: clamp(1.6rem, 1rem + 1.4vw, 2.6rem); font-weight: 600; letter-spacing: -0.04em; }
.arch__panel p { max-width: 28em; margin-top: 0.7rem; line-height: 1.5; color: rgb(255 255 255 / 0.72); }

.arch__stage { perspective: 1600px; }
.arch__stack { transform: rotateX(14deg) rotateY(-12deg); transform-style: preserve-3d; }
.arch__layer {
  position: relative;
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1rem, 1.8vw, 1.5rem) clamp(1.1rem, 2vw, 1.75rem);
  border: 1px solid rgb(255 255 255 / 0.14); border-radius: 1rem;
  background: rgb(255 255 255 / 0.03);
  text-align: left;
  transition: transform 0.6s var(--ease-out), background-color 0.4s, border-color 0.4s;
}
.arch__name { display: flex; align-items: baseline; gap: 0.8rem; font-size: clamp(1.1rem, 0.8rem + 0.8vw, 1.7rem); font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.arch__name b { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.1em; color: rgb(255 255 255 / 0.45); }
.arch__chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; }
.arch__chips i { padding: 0.3rem 0.6rem; border: 1px solid rgb(255 255 255 / 0.14); border-radius: 99em; font-size: 0.78rem; font-style: normal; color: rgb(255 255 255 / 0.65); }
.arch__layer--ai { border-color: rgb(91 150 255 / 0.45); background: linear-gradient(90deg, rgb(107 63 212 / 0.28), rgb(58 126 246 / 0.2)); }
.arch__layer:hover { border-color: rgb(255 255 255 / 0.4); }
.arch__layer[aria-selected="true"] { transform: translateZ(40px) translateX(-0.75rem); border-color: var(--blue-bright); background: rgb(58 126 246 / 0.16); }
.arch__layer[aria-selected="true"] .arch__name b { color: var(--blue-bright); }

.arch__lane { position: relative; height: clamp(1.4rem, 2.6vw, 2.2rem); }
.arch__lane i { position: absolute; top: 0; bottom: 0; width: 6px; margin-left: -3px; overflow: hidden; }
.arch__lane i:first-child { left: 32%; --c: var(--blue-bright); }
.arch__lane i:last-child { left: 68%; --c: #9b7cf0; }
.arch__lane i::after { content: ""; position: absolute; left: 2.5px; top: 0; bottom: 0; width: 1px; background: rgb(255 255 255 / 0.18); }
.arch__lane i::before { content: ""; position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(transparent 38%, var(--c) 38% 62%, transparent 62%); transform: translateY(-70%); }

@media (prefers-reduced-motion: no-preference) {
  .js .arch__stage .arch__layer { opacity: 0; translate: 0 1.5rem; }
  .arch__stage.is-in .arch__layer {
    opacity: 1; translate: 0 0;
    transition: opacity 0.6s var(--ease-soft), translate 0.9s var(--ease-out), transform 0.6s var(--ease-out), background-color 0.4s, border-color 0.4s;
    transition-delay: calc(var(--i) * 110ms), calc(var(--i) * 110ms), 0s, 0s, 0s;
  }
  .arch__lane i::before { animation: arch-flow 1.9s var(--ease-in-out) infinite; }
  .arch__lane i:last-child::before { animation-direction: reverse; animation-delay: -0.95s; }
  .arch__lane:nth-child(4) i::before { animation-delay: 0.25s; }
  .arch__lane:nth-child(6) i::before { animation-delay: 0.5s; }
  .arch__lane:nth-child(8) i::before { animation-delay: 0.75s; }
  .arch__lane:nth-child(10) i::before { animation-delay: 1s; }
  .arch.is-paused .arch__lane i::before { animation-play-state: paused; }
  @keyframes arch-flow { from { transform: translateY(-70%); } to { transform: translateY(70%); } }
}

/* ==========================================================================
   Features — settings list with switches + preview window
   ========================================================================== */
.feat { background: var(--off-white); color: var(--black); padding-bottom: clamp(5rem, 9vw, 10rem); }
.feat > .container { padding-top: clamp(4rem, 7vw, 8rem); border-top: 1px solid var(--border-light); }
.feat__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: 2.5rem clamp(2rem, 5vw, 6rem); margin-top: clamp(3rem, 5.5vw, 6rem); }
.feat__list { border-top: 1px solid var(--black); }
.feat__item {
  width: 100%;
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding-block: clamp(0.8rem, 1.4vw, 1.1rem);
  border-bottom: 1px solid var(--border-light);
  text-align: left;
}
.feat__num { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.08em; color: #8a8a8a; transition: color 0.3s; }
.feat__name { font-size: clamp(1.2rem, 0.85rem + 1vw, 2rem); font-weight: 600; letter-spacing: -0.035em; transition: transform 0.6s var(--ease-out), color 0.3s; }
.feat__switch { position: relative; width: 2.6rem; height: 1.5rem; border-radius: 99em; background: var(--black); transition: background-color 0.4s; }
.feat__switch::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--white); transform: translateX(1.1rem); transition: transform 0.5s var(--ease-out); }
.feat__item:hover .feat__name { transform: translateX(0.3rem); }
.feat__item[aria-selected="true"] .feat__num { color: var(--blue); }
.feat__item[aria-selected="true"] .feat__name { color: var(--blue); transform: translateX(0.6rem); }
.feat__item[aria-selected="true"] .feat__switch { background: var(--blue); }
.feat__item:focus-visible { outline-offset: -2px; }

.feat__window {
  position: sticky; top: calc(var(--header-h) + 1rem);
  border: 1px solid rgb(0 0 0 / 0.1); border-radius: clamp(1rem, 1.5vw, 1.5rem);
  background: #0b0b0f; color: var(--white);
  overflow: hidden;
}
.feat__bar { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.2rem; border-bottom: 1px solid rgb(255 255 255 / 0.08); font: 500 var(--fs-micro)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; color: rgb(255 255 255 / 0.45); }
.feat__panels { padding: clamp(1.25rem, 2.5vw, 2.25rem); }
.feat__desc { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / 0.1); line-height: 1.5; color: rgb(255 255 255 / 0.72); }
.feat__desc b { font-weight: 600; color: var(--white); }

.fx { display: block; width: 100%; height: auto; overflow: visible; }
.fx-panel { fill: rgb(255 255 255 / 0.04); stroke: rgb(255 255 255 / 0.16); stroke-width: 1.2; }
.fx-hot { stroke: var(--blue-bright); }
.fx-text { fill: rgb(255 255 255 / 0.18); }
.fx-text--inv { fill: var(--white); }
.fx-field { fill: rgb(255 255 255 / 0.06); stroke: rgb(255 255 255 / 0.14); }
.fx-accent { fill: var(--blue); }
.fx-dot { fill: rgb(255 255 255 / 0.22); }
.fx-chip { fill: none; stroke: rgb(255 255 255 / 0.25); }
.fx-chip--on { fill: rgb(58 126 246 / 0.25); stroke: var(--blue-bright); }
.fx-line { fill: none; stroke: rgb(255 255 255 / 0.22); stroke-width: 1.5; stroke-linecap: round; }
.fx-check { fill: none; stroke: var(--blue-bright); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fx-ring { fill: none; stroke: var(--blue-bright); stroke-width: 3; stroke-dasharray: 44 20; transform-box: fill-box; transform-origin: center; }
.fx-label, .fx-label text { font: 600 11px/1 var(--font-body); letter-spacing: 0.12em; fill: rgb(255 255 255 / 0.5); }
.fx-flow { fill: none; stroke: var(--blue-bright); stroke-width: 2.5; stroke-dasharray: 4 10; }
.fx-track { fill: rgb(255 255 255 / 0.1); }
.fx-trend { fill: none; stroke: #9b7cf0; stroke-width: 2.5; stroke-linejoin: round; }
.fx-bar { fill: rgb(255 255 255 / 0.14); }
.fx-warn { fill: #f5a524; }

@media (prefers-reduced-motion: no-preference) {
  /* switches flip on one after another as the list arrives */
  /* (animations, not transitions, so later selection changes aren't delayed) */
  .js .feat__list.is-in .feat__switch { animation: sw-track 0.4s var(--ease-soft) calc(0.3s + var(--i) * 90ms) backwards; }
  .js .feat__list.is-in .feat__switch::after { animation: sw-knob 0.5s var(--ease-out) backwards; animation-delay: inherit; }
  @keyframes sw-track { from { background-color: rgb(0 0 0 / 0.12); } }
  @keyframes sw-knob { from { transform: none; } }

  .pick-panel.is-active .fx-ring { animation: ui-spin 1.4s linear infinite; }
  .pick-panel.is-active .fx-flow { animation: fx-dash 1.2s linear infinite; }
  @keyframes fx-dash { to { stroke-dashoffset: -28; } }
}

/* ==========================================================================
   We build products around it — exploded product, reacts to scroll
   ========================================================================== */
.around { position: relative; background: var(--black); color: var(--white); padding-block: clamp(5rem, 10vw, 10rem); overflow: clip; view-timeline: --around; }
.around__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 3rem clamp(2rem, 5vw, 6rem); min-height: min(80svh, 56rem); }
.around__title { font-size: clamp(2.6rem, 0.8rem + 4.9vw, 7rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.055em; }
.around__title .mask { display: block; width: fit-content; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.around__text { max-width: 26em; margin-top: 1.75rem; font-size: clamp(1rem, 0.85rem + 0.4vw, 1.25rem); line-height: 1.5; color: rgb(255 255 255 / 0.62); }

.explode { perspective: 2000px; }
.explode__scene {
  position: relative;
  width: min(100%, 36rem); aspect-ratio: 1; margin-inline: auto;
  transform-style: preserve-3d;
  transform: rotateX(54deg) rotateZ(-38deg);
}
.explode__float { transform-style: preserve-3d; }
.explode__layer { position: absolute; inset: 16% 10%; border-radius: 1.4rem; transform-style: preserve-3d; }
.explode__layer--data { transform: translateZ(-130px); border: 1px solid rgb(255 255 255 / 0.16); background: #0d0d12; }
.explode__layer--ai { transform: translateZ(0); border: 1px solid rgb(91 150 255 / 0.45); background: radial-gradient(circle at 50% 50%, rgb(58 126 246 / 0.35), rgb(58 126 246 / 0.04) 62%); }
.explode__layer--ui { transform: translateZ(130px); inset: 20% 14%; }
.explode__grid { position: absolute; inset: 9%; background-image: radial-gradient(rgb(255 255 255 / 0.38) 1.2px, transparent 1.7px); background-size: 18px 18px; }
.explode__core, .explode__halo { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; }
.explode__core { width: 22%; background: radial-gradient(circle at 38% 32%, #6aa4ff, #1557ea); box-shadow: 0 0 60px rgb(58 126 246 / 0.7); }
.explode__halo { width: 52%; border: 1px dashed rgb(155 124 240 / 0.65); }
.explode__window { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: rgb(243 243 246 / 0.88); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.6); }
.explode__bar { display: flex; gap: 0.35rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid rgb(0 0 0 / 0.08); }
.explode__bar i { width: 0.5rem; aspect-ratio: 1; border-radius: 50%; background: rgb(0 0 0 / 0.18); }
.explode__body { display: grid; grid-template-columns: 18% 1fr 1fr; grid-auto-rows: 1fr; gap: 0.6rem; height: calc(100% - 2rem); padding: 0.8rem; }
.explode__side { grid-row: 1 / span 2; border-radius: 0.5rem; background: rgb(0 0 0 / 0.07); }
.explode__card { border-radius: 0.5rem; background: var(--white); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }
.explode__card--wide { grid-column: span 2; }
.explode__card--accent { background: var(--blue); box-shadow: none; }
.explode__tag {
  position: absolute; left: 0; top: 0; translate: -0.5rem calc(-100% - 0.5rem);
  padding: 0.3rem 0.65rem;
  border: 1px solid rgb(255 255 255 / 0.3); border-radius: 99em;
  background: var(--black);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
.explode__layer--ai .explode__tag { color: var(--blue-bright); border-color: rgb(91 150 255 / 0.5); }

@media (prefers-reduced-motion: no-preference) {
  .explode__float { animation: ex-float 7s ease-in-out infinite alternate; }
  .explode__halo { animation: ui-spin 30s linear infinite; }
  .around.is-paused :is(.explode__float, .explode__halo) { animation-play-state: paused; }
  @keyframes ex-float { from { transform: translateY(-10px); } to { transform: translateY(10px); } }

  /* scroll opens the product up: the layers separate and the scene settles */
  @supports (animation-timeline: view()) and (animation-range: entry) {
    .explode__scene { animation: ex-scene linear both; animation-timeline: --around; animation-range: entry 10% cover 55%; }
    .explode__layer--data { animation: ex-data linear both; animation-timeline: --around; animation-range: entry 15% cover 50%; }
    .explode__layer--ui { animation: ex-ui linear both; animation-timeline: --around; animation-range: entry 15% cover 50%; }
    @keyframes ex-scene { from { transform: rotateX(62deg) rotateZ(-50deg) scale(0.88); } }
    @keyframes ex-data { from { transform: translateZ(-12px); } }
    @keyframes ex-ui { from { transform: translateZ(12px); } }
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 64em) {
  .arch__inner, .feat__grid, .around__inner { grid-template-columns: 1fr; }
  .arch__stack { transform: none; }
  .arch__layer[aria-selected="true"] { transform: translateX(0.5rem); }
  .feat__window { position: sticky; top: calc(var(--header-h) - 0.25rem); z-index: 2; order: -1; }
  .feat__panels { padding: 1rem 1.1rem 1.1rem; }
  .fx { max-height: 30vh; }
  .feat__desc { margin-top: 0.75rem; padding-top: 0.75rem; font-size: 0.92rem; }
  .around__inner { min-height: 0; }
}

@media (max-width: 48em) {
  .app-stage__canvas { aspect-ratio: 4 / 5; font-size: 2.35cqi; }
  .ui--dash { left: 0; top: 0; width: 100%; height: 64%; }
  .ui--dash .ui__side, .ui__search, .ui__kpi:nth-child(3) { display: none; }
  .ui__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui--assist { left: 16%; top: 45%; width: 84%; height: 55%; }
  .ui--flow, .ui--data, .ui--stats { display: none; }

  .apps-intro__title .mask { margin-inline: 0; }
  .apps-intro__lead { margin-inline: 0; }
  .apps-intro__note { grid-template-columns: 1fr; }

  .arch__layer { flex-direction: column; align-items: flex-start; }
  .arch__chips { justify-content: flex-start; }
  .arch__lane i:first-child { left: 20%; }
  .arch__lane i:last-child { left: 36%; }

  .explode__scene { width: min(100%, 22rem); }
  .explode__layer--data { transform: translateZ(-80px); }
  .explode__layer--ui { transform: translateZ(80px); }
}