/* Dashboard showcase hero: a luminous violet-indigo stage with glass surfaces, real outputs as the visual focus, and the free test panel.
   Studio only (the administration dashboard never loads this file). Animations are slow and light, and all of them stop for
   prefers-reduced-motion. Text on the stage is white on deep indigo (>= 7:1). */

.sc-hero {
  --v1: #1a1052; --v2: #3b1d9e; --v3: #6a2ed8; --pink: #e266c9; --cyan: #5cd3f5;
  position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; margin-bottom: 26px; color: #fff;
  background: linear-gradient(125deg, var(--v1) 0%, #2a1478 28%, var(--v3) 66%, #a43bc4 100%);
  background-size: 160% 160%; animation: sc-shift 26s ease-in-out infinite alternate;
  box-shadow: 0 30px 80px rgba(60, 30, 160, .38), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.sc-hero::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 35%, rgba(92, 211, 245, .5) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@keyframes sc-shift { to { background-position: 100% 100%; } }

/* Ambient light and a few slow particles */
.sc-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sc-bg b { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: sc-drift 22s ease-in-out infinite alternate; }
.sc-bg b:nth-child(1) { width: 420px; height: 420px; background: var(--pink); inset-block-start: -150px; inset-inline-start: 6%; }
.sc-bg b:nth-child(2) { width: 380px; height: 380px; background: var(--cyan); opacity: .32; inset-block-end: -160px; inset-inline-end: 22%; animation-delay: -8s; }
.sc-bg b:nth-child(3) { width: 300px; height: 300px; background: #8b5cf6; inset-block-start: 40%; inset-inline-start: -90px; animation-delay: -14s; }
@keyframes sc-drift { to { transform: translate3d(40px, 30px, 0) scale(1.12); } }
.sc-bg i { position: absolute; inset-block-end: -20px; inset-inline-start: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: rgba(255, 255, 255, .7);
  box-shadow: 0 0 10px rgba(255, 255, 255, .8); opacity: 0; animation: sc-float var(--d) linear var(--o) infinite; }
@keyframes sc-float { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .7; } 90% { opacity: .5; } 100% { transform: translateY(-460px); opacity: 0; } }

.sc-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 44px); padding: clamp(22px, 3.4vw, 44px); align-items: start; }
.sc-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sc-eyebrow { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sc-hero h2 { margin: 0; color: #fff; font-size: clamp(1.75rem, 3.4vw, 2.9rem); line-height: 1.45; font-weight: 800; letter-spacing: 0; text-wrap: balance; }
.sc-grad { background: linear-gradient(90deg, #ffd0f2, #8fe4ff); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.sc-lead { margin: 0; max-width: 46ch; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 2; color: rgba(255, 255, 255, .88); }
.sc-cta { gap: 12px; }
.sc-ico { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; flex: none; } .sc-ico svg { width: 100%; height: 100%; }

/* Buttons local to the hero (the studio's own buttons are tuned for light glass) */
.sc-btn { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border-radius: 14px; font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; border: 1px solid rgba(255, 255, 255, .3); color: #fff; background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .15s, box-shadow .2s, background .2s, filter .2s; }
.sc-btn:hover { background: rgba(255, 255, 255, .2); transform: translateY(-1px); }
.sc-btn:active { transform: translateY(1px); }
.sc-btn:disabled { opacity: .6; cursor: progress; transform: none; }
.sc-btn.small { min-height: 34px; padding: 0 12px; font-size: .85rem; border-radius: 11px; }
.sc-btn.big { min-height: 50px; padding: 0 24px; font-size: 1.02rem; border-radius: 16px; }
.sc-btn.light { background: #fff; color: #2a1478; border-color: #fff; box-shadow: 0 10px 30px rgba(10, 0, 60, .35); }
.sc-btn.light:hover { background: #fff; box-shadow: 0 14px 38px rgba(10, 0, 60, .45); }
.sc-btn.primary { color: #fff; background: linear-gradient(135deg, #7a3cf5 0%, #c02bd0 100%); border-color: rgba(255, 255, 255, .35); box-shadow: 0 10px 28px rgba(160, 50, 220, .5), inset 0 1px 0 rgba(255, 255, 255, .4); }
.sc-btn.primary:hover { filter: brightness(1.08); background: linear-gradient(135deg, #7a3cf5 0%, #c02bd0 100%); box-shadow: 0 14px 34px rgba(160, 50, 220, .6); }
.sc-btn.ghost { background: rgba(255, 255, 255, .08); }
.sc-btn:focus-visible, .sc-tile:focus-visible, .sc-result:focus-visible, .sc-close:focus-visible, .sc-nav:focus-visible, .sc-form textarea:focus-visible { outline: 3px solid #8fe4ff; outline-offset: 3px; }

/* The free test panel */
.sc-panel { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 22px; margin-top: 6px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 18px 50px rgba(10, 0, 60, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }
.sc-panel h3 { margin: 0; color: #fff; font-size: 1.1rem; }
.sc-chip { padding: 3px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); color: #fff; }
.sc-chip.used { background: rgba(92, 255, 190, .18); border-color: rgba(92, 255, 190, .5); color: #c9ffe9; }
.sc-chip.busy { background: rgba(255, 213, 92, .2); border-color: rgba(255, 213, 92, .5); color: #fff0c4; }
.sc-form { display: flex; flex-direction: column; gap: 10px; }
.sc-label { color: rgba(255, 255, 255, .9); font-size: .85rem; font-weight: 600; margin: 0; }
.sc-form textarea { width: 100%; min-height: 96px; resize: vertical; color: #fff; background: rgba(12, 6, 50, .45); border: 1px solid rgba(255, 255, 255, .28); border-radius: 14px; padding: 12px 14px; line-height: 1.9; box-shadow: none; }
.sc-form textarea::placeholder { color: rgba(255, 255, 255, .62); }
.sc-form textarea:focus { background: rgba(12, 6, 50, .6); border-color: #8fe4ff; box-shadow: 0 0 0 4px rgba(143, 228, 255, .22); }
.sc-count { font-size: .8rem; color: rgba(255, 255, 255, .75); font-variant-numeric: tabular-nums; } .sc-count.warn { color: #ffd98a; }
.sc-err { min-height: 1.2em; color: #ffc2cf; font-size: .88rem; }
.sc-alert { padding: 10px 14px; border-radius: 12px; background: rgba(255, 120, 150, .2); border: 1px solid rgba(255, 160, 180, .5); color: #fff; font-size: .9rem; }
.sc-fine { font-size: .8rem; color: rgba(255, 255, 255, .74); margin: 0; line-height: 1.8; }
.sc-success { margin: 0; font-weight: 700; color: #d7ffee; }
.sc-prompt { font-size: .82rem; color: rgba(255, 255, 255, .78); line-height: 1.8; background: rgba(12, 6, 50, .35); border: 1px dashed rgba(255, 255, 255, .25); border-radius: 12px; padding: 8px 12px; overflow-wrap: anywhere; }
.sc-after { display: flex; gap: 10px; flex-wrap: wrap; }
.sc-result { position: relative; display: block; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 16px; overflow: hidden; cursor: zoom-in; background: #000; min-height: 0; }
.sc-result img { display: block; width: 100%; max-height: 300px; object-fit: cover; transition: transform .5s; }
.sc-result:hover img { transform: scale(1.03); }
.sc-expand { position: absolute; inset-block-end: 10px; inset-inline-end: 10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(10, 5, 40, .6); color: #fff; }
.sc-working { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 14px 4px; }
.sc-orb { width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(from 0deg, #8fe4ff, #e266c9, #7a3cf5, #8fe4ff); -webkit-mask: radial-gradient(farthest-side, transparent 58%, #000 60%); mask: radial-gradient(farthest-side, transparent 58%, #000 60%); animation: sc-spin 1.4s linear infinite; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.sc-skel { height: 64px; border-radius: 14px; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.2), rgba(255,255,255,.08)); background-size: 200% 100%; animation: sc-sheen 1.4s infinite; } .sc-skel.short { height: 40px; width: 60%; }
@keyframes sc-sheen { to { background-position: -200% 0; } }

/* The gallery: staggered columns on wide screens, a swipeable row on phones */
.sc-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; min-width: 0; }
.sc-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sc-col { gap: 14px; } .sc-col.c1 { margin-block-start: 38px; }
.sc-tile { position: relative; display: block; width: 100%; padding: 0; aspect-ratio: var(--r); overflow: hidden; border-radius: 18px; cursor: zoom-in; background: #1b1260;
  border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 14px 36px rgba(8, 0, 50, .4); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; min-height: 0; }
.sc-tile.video { cursor: pointer; }
.sc-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.sc-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(8, 0, 50, .55), 0 0 0 1px rgba(255, 255, 255, .45); }
.sc-tile:hover img { transform: scale(1.06); }
.sc-badge { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; display: inline-flex; gap: 5px; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  color: #fff; background: rgba(15, 8, 60, .62); border: 1px solid rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sc-badge .sc-ico { width: .95em; height: .95em; }
.sc-play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, rgba(10, 5, 40, 0) 55%, rgba(10, 5, 40, .5)); }
.sc-play .sc-ico { width: 54px; height: 54px; padding: 14px; border-radius: 50%; color: #fff; background: rgba(20, 10, 80, .55); border: 1px solid rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); transition: transform .3s, background .3s; }
.sc-tile:hover .sc-play .sc-ico { transform: scale(1.1); background: rgba(122, 60, 245, .8); }
.sc-hover { position: absolute; inset-inline: 0; inset-block-end: 0; display: flex; flex-direction: column; gap: 2px; padding: 26px 12px 10px; text-align: start; color: #fff;
  background: linear-gradient(180deg, rgba(10, 5, 40, 0), rgba(10, 5, 40, .82)); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.sc-tile:hover .sc-hover, .sc-tile:focus-visible .sc-hover { opacity: 1; transform: none; }
.sc-hover .sc-style { font-size: .72rem; color: #8fe4ff; } .sc-hover strong { font-size: .86rem; line-height: 1.5; }

/* Lightbox */
dialog.sc-lightbox { width: min(980px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border-radius: 22px; overflow: hidden; color: #fff; border: 1px solid rgba(255, 255, 255, .25);
  background: linear-gradient(160deg, rgba(36, 18, 110, .94), rgba(14, 8, 58, .96)); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 40px 100px rgba(5, 0, 40, .6); }
dialog.sc-lightbox::backdrop { background: rgba(8, 4, 36, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sc-lightbox figure { margin: 0; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, 1fr); max-height: calc(100dvh - 24px); }
.sc-stage { background: #07031f; display: grid; place-items: center; min-height: 0; } .sc-stage img, .sc-stage video { max-width: 100%; max-height: calc(100dvh - 24px); display: block; object-fit: contain; }
.sc-cap { padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.sc-cap-title { font-size: 1.1rem; line-height: 1.6; } .sc-made { font-size: .8rem; color: rgba(255, 255, 255, .72); }
.sc-tag, .sc-style { padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); }
.sc-style { color: #8fe4ff; }
.sc-close, .sc-nav { position: absolute; z-index: 2; width: 42px; height: 42px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(10, 5, 40, .6); border: 1px solid rgba(255, 255, 255, .35); transition: background .2s, transform .15s; }
.sc-close:hover, .sc-nav:hover { background: rgba(122, 60, 245, .85); transform: scale(1.06); }
.sc-close { inset-block-start: 12px; inset-inline-start: 12px; } .sc-nav { inset-block-start: 45%; } .sc-nav.prev { inset-inline-end: 12px; } .sc-nav.next { inset-inline-start: 12px; }
.sc-nav .sc-ico, .sc-close .sc-ico { width: 20px; height: 20px; }

/* Tablet and phone */
@media (max-width: 1100px) {
  /* one column: headline and CTA, then the gallery, then the free-image panel */
  .sc-inner { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .sc-left { display: contents; }
  .sc-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-col, .sc-col.c1 { display: contents; margin: 0; }
  .sc-eyebrow { order: 1; align-self: flex-start; } .sc-hero h2 { order: 2; } .sc-lead { order: 3; } .sc-cta { order: 4; } .sc-gallery { order: 5; } .sc-panel-slot { order: 6; }
}
@media (max-width: 760px) {
  .sc-hero { border-radius: 22px; }
  .sc-inner { gap: 14px; }
  .sc-gallery { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; margin-inline: -4px; scrollbar-width: none; }
  .sc-gallery::-webkit-scrollbar { display: none; }
  .sc-col, .sc-col.c1, .sc-col.c2 { display: contents; margin: 0; }
  .sc-tile { flex: 0 0 min(62vw, 250px); width: auto; aspect-ratio: 4 / 5; scroll-snap-align: center; }
  .sc-hover { opacity: 1; transform: none; }
  .sc-lightbox figure { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .sc-stage img, .sc-stage video { max-height: 62dvh; }
}
@media (hover: none) { .sc-hover { opacity: 1; transform: none; } .sc-tile:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sc-hero, .sc-bg b, .sc-bg i, .sc-orb, .sc-skel { animation: none; }
  .sc-bg i { display: none; }
  .sc-tile, .sc-tile img, .sc-btn, .sc-result img, .sc-hover { transition: none; }
  .sc-gallery { scroll-behavior: auto; }
}
@media (prefers-reduced-transparency: reduce) { .sc-panel, .sc-btn, .sc-eyebrow { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(40, 22, 120, .85); } }