/* Scalyx Talent Group — one stylesheet, no framework.
   Dark ink, one acid accent, type doing most of the work and no stock photography anywhere. */

:root {
  --ink: #08090c;
  --ink-2: #0e1015;
  --ink-3: #14171e;
  --line: #22262f;
  --line-soft: #1a1e26;
  --text: #eceef2;
  --muted: #959cab;
  --accent: #d7ff3e;
  --accent-dim: #a8c92c;
  --violet: #8a8fff;
  --shell: 1180px;
  --radius: 14px;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  --tight: -0.03em;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html { background: var(--ink); }

body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Depth built out of light rather than out of pictures: nothing here is downloaded, licensed or
   dated, and the whole lot costs one paint.
   Behind everything, a faint grid — flat black has nothing for the eye to measure itself against,
   and a page of it reads as cheap. It is masked away towards the bottom so it never competes with
   the text. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(135% 105% at 50% 0%, #000 28%, transparent 82%);
  mask-image: radial-gradient(135% 105% at 50% 0%, #000 28%, transparent 82%);
}

/* On top of everything, a grain. Large dark areas band into visible steps on ordinary panels;
   a little noise hides the steps and gives the page a printed quality. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.032;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.site-head, main, .site-foot { position: relative; z-index: 1; }

h1, h2, h3 { letter-spacing: var(--tight); line-height: 1.04; margin: 0; font-weight: 680; }
h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
h3 { font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
a { color: inherit; }

.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
@media (max-width: 640px) { .shell { width: calc(100% - 2rem); } }

.muted { color: var(--muted); }
.eyebrow {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1.1rem;
}
.lede { font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: #c3c9d4; max-width: 56ch; }
.fine { font-size: 0.85rem; color: var(--muted); }

.skip {
  position: absolute; left: -999px; top: 0; background: var(--accent); color: #000;
  padding: 0.6rem 1rem; z-index: 100; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip:focus { left: 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}

/* --- wordmark ------------------------------------------------------------ */

.mark { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.mark-glyph { display: grid; gap: 3px; }
.mark-glyph i {
  display: block; height: 3px; border-radius: 2px; background: var(--accent);
}
.mark-glyph i:nth-child(1) { width: 22px; }
.mark-glyph i:nth-child(2) { width: 15px; opacity: 0.75; }
.mark-glyph i:nth-child(3) { width: 9px;  opacity: 0.45; }
.mark-text { display: grid; line-height: 1; }
.mark-text b { font-size: 1.02rem; font-weight: 750; letter-spacing: 0.16em; }
.mark-text em {
  font-style: normal; font-size: 0.6rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--muted); margin-top: 4px;
}

/* --- header -------------------------------------------------------------- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.head-row { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 1rem; }
.nav { display: flex; gap: 1.9rem; }
.nav a {
  text-decoration: none; font-size: 0.93rem; color: #cdd3dd; padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* The generator's header has no navigation: there is nowhere else on that host to go. The
   wordmark leads back to the showcase, and the only control is the one the host exists for. */
.gen-head .head-row { gap: 1rem; }
.head-account { display: flex; align-items: center; gap: 0.9rem; margin: 0; }
.head-account .who {
  font-size: 0.86rem; color: var(--muted); max-width: 42vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 560px) { .head-account .who { display: none; } }

.gen-foot { padding-top: clamp(2rem, 4vw, 2.6rem); }
.gen-foot .foot-base:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.gen-foot .foot-legal a:first-child { color: var(--accent); }

.burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; }
.burger span + span { margin-top: 6px; }

@media (max-width: 820px) {
  .burger { display: block; }
  .nav {
    position: absolute; inset: 72px 0 auto; flex-direction: column; gap: 0;
    background: var(--ink-2); border-bottom: 1px solid var(--line); padding: 0.5rem 1.25rem 1.25rem;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft); }
}

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.85rem 1.5rem; border-radius: 999px; text-decoration: none;
  font-weight: 620; font-size: 0.95rem; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: #0a0c06; }
.btn.primary:hover { background: #e4ff6b; }
.btn.ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn.ghost:hover { border-color: var(--muted); }
/* The way out of the showcase and into the tool. Given its own weight because it is the one
   place on the public site that leads somewhere else entirely. */
.btn.outline {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--text); background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.btn.outline:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.btn.lg { padding: 1.05rem 2.1rem; font-size: 1.02rem; }
.btn.sm { padding: 0.55rem 1.1rem; font-size: 0.86rem; }
.btn.google { background: #fff; color: #1f1f1f; }
.btn.google:hover { background: #f1f3f6; }
.btn.google .g {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
  mask: radial-gradient(circle, transparent 34%, #000 36%);
  -webkit-mask: radial-gradient(circle, transparent 34%, #000 36%);
}
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* --- hero ---------------------------------------------------------------- */

.hero { position: relative; padding: clamp(4rem, 9vw, 7rem) 0 clamp(2rem, 4vw, 3rem); overflow: hidden; }
/* Broad washes of colour behind the headline: one of each brand colour, a turquoise low on the
   right to break the symmetry, and a warm one at the foot so the section does not end on a hard
   black edge. They scroll away with the hero rather than following the viewport, so the page
   gets quieter as you read down it, and they drift slowly enough that you notice the page is
   alive without ever catching it moving. */
.hero-glow {
  position: absolute; inset: -45% -20% auto; height: 165%; pointer-events: none;
  background:
    radial-gradient(46rem 32rem at 12% 18%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 64%),
    radial-gradient(40rem 28rem at 88% 4%, color-mix(in srgb, var(--violet) 42%, transparent), transparent 66%),
    radial-gradient(34rem 24rem at 66% 54%, color-mix(in srgb, #2ad4c8 24%, transparent), transparent 68%),
    radial-gradient(52rem 20rem at 40% 96%, color-mix(in srgb, #ff8a3d 12%, transparent), transparent 72%);
  filter: blur(6px);
  animation: drift 38s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; }
}
.hero .shell { position: relative; }
.hero h1 { max-width: 16ch; }
/* The accent holds most of the word and only turns at the very end: a gradient spread evenly
   across it goes grey in the middle, exactly where the eye lands. */
.hero h1 .hi {
  background: linear-gradient(95deg, var(--accent) 0%, var(--accent) 52%, var(--violet) 108%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lede { margin-top: 1.8rem; }

.hero-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.5rem; margin: 2.8rem 0 0; padding-top: 1.8rem; border-top: 1px solid var(--line-soft);
}
.hero-facts dt { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hero-facts dd { margin: 0.4rem 0 0; font-weight: 600; }

/* --- bands and sections --------------------------------------------------- */

.band { padding: clamp(3rem, 6vw, 4.8rem) 0; position: relative; }
/* Translucent, not solid: the grid behind still shows through, so an alternating section reads as
   a change of light rather than as a different page stuck on. */
.band.alt {
  background: color-mix(in srgb, var(--ink-2) 88%, transparent);
  border-block: 1px solid var(--line-soft);
}
/* A hairline that catches the accent in the middle and fades at both ends — the join between two
   sections is where a dark page looks most like a stack of boxes. */
.band.alt::before {
  content: ""; position: absolute; inset: -1px 0 auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 38%, transparent) 50%, transparent);
}
.sec-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.sec-head h2 { margin-bottom: 1rem; }
.sec-lede { color: var(--muted); max-width: 58ch; margin: 0; }

.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.grid { display: grid; gap: 1.1rem; }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .cards-3, .cards-4 { grid-template-columns: 1fr; } }

.card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink-3) 94%, transparent), color-mix(in srgb, var(--ink-2) 88%, transparent));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.5rem; position: relative; overflow: hidden;
}
/* The thin bright edge a real surface catches along its top. Without it a bordered rectangle on a
   dark page reads as an outline drawn on the background rather than as a card sitting on it. */
.card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14) 50%, transparent);
}
.card h3 { margin-bottom: 0.7rem; }
.card p { color: var(--muted); font-size: 0.95rem; margin-bottom: 0; }
.card .big-link { color: var(--accent); font-weight: 620; word-break: break-word; }

.service .idx {
  display: block; font-size: 0.72rem; letter-spacing: 0.16em; color: var(--accent-dim);
  font-weight: 700; margin-bottom: 1.4rem;
}
.ticks { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.ticks li { font-size: 0.88rem; color: #b6bcc8; padding-left: 1.15rem; position: relative; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent);
}

/* auto-fit, not a fixed four: the tool page has three steps and a fixed grid would leave a gap
   where a fourth is not. */
.steps {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.step { border-top: 2px solid var(--line); padding-top: 1.2rem; }
.step:first-child { border-top-color: var(--accent); }
.step-no { font-size: 0.72rem; letter-spacing: 0.16em; font-weight: 700; color: var(--muted); }
.step h3 { margin: 0.8rem 0 0.6rem; }
.step p { color: var(--muted); font-size: 0.93rem; margin: 0; }

.fact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.fact-list li {
  display: grid; gap: 0.25rem; padding: 1.05rem 1.25rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--ink-2) 86%, transparent);
}
.fact-list b { font-size: 0.95rem; }
.fact-list span { color: var(--muted); font-size: 0.88rem; }

.cta-band {
  padding: clamp(3.5rem, 8vw, 6rem) 0; text-align: center;
  background:
    radial-gradient(30rem 18rem at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    var(--ink);
  border-top: 1px solid var(--line-soft);
}
.cta-band p { color: var(--muted); max-width: 52ch; margin-inline: auto; }
.cta-band .cta-row { justify-content: center; }

/* --- tool page ------------------------------------------------------------ */

.tool-head { padding: clamp(3rem, 6vw, 4.8rem) 0 clamp(1.5rem, 3vw, 2.4rem); }

/* The inner pages get a quieter version of the hero's wash, so arriving on one does not feel like
   arriving on a different site with the lights off. */
.tool-head, .page-head { position: relative; overflow: hidden; }
.tool-head::before, .page-head::before {
  content: ""; position: absolute; inset: -60% -12% auto; height: 200%; pointer-events: none;
  background:
    radial-gradient(38rem 26rem at 10% 26%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 64%),
    radial-gradient(32rem 22rem at 86% 8%, color-mix(in srgb, var(--violet) 32%, transparent), transparent 66%),
    radial-gradient(26rem 18rem at 62% 70%, color-mix(in srgb, #2ad4c8 16%, transparent), transparent 70%);
  filter: blur(6px);
}
.tool-head > .shell, .page-head > .shell { position: relative; }
.tool-head h1 { font-size: clamp(2.2rem, 5.4vw, 3.9rem); }
.tool-head .lede { margin-top: 1.4rem; }

.gate {
  background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.9rem 1.7rem;
}
.gate h3 { margin-bottom: 0.8rem; }
.gate p { color: var(--muted); font-size: 0.95rem; }
.gate .btn { margin: 0.6rem 0 1.1rem; }
.gate form { margin-top: 1rem; }
.gate.waiting { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.gate-msg {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-left: 3px solid var(--accent);
  padding: 0.9rem 1.1rem; border-radius: 0 8px 8px 0; margin-bottom: 1.1rem;
  color: var(--text); font-weight: 560;
}
.notice {
  border: 1px dashed var(--line); border-radius: 10px; padding: 0.9rem 1.1rem; margin: 0.6rem 0 1rem;
}

/* A setting is shown as a drawing until a photograph is put in public/scenes/; both are framed
   the same way, so swapping one for the other changes nothing but the picture. */
.scene .scene-art {
  aspect-ratio: 16 / 10; border-radius: 11px; margin-bottom: 1rem; overflow: hidden;
  border: 1px solid var(--line); background: var(--ink-3); position: relative;
  line-height: 0;
}
.scene .scene-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35));
}
.scene-svg, .scene-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.scene h3 { margin-bottom: 0.35rem; }
.scene p { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* --- simple pages --------------------------------------------------------- */

.page-head { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.page-head.tall { padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.page-head .lede { margin-top: 1.3rem; }

.prose { max-width: 70ch; }
.prose h2 { font-size: 1.35rem; margin: 2.6rem 0 0.9rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: #c0c6d1; }
.prose a { color: var(--accent); }

address { font-style: normal; color: var(--muted); font-size: 0.93rem; line-height: 1.7; }

/* --- footer --------------------------------------------------------------- */

.site-foot {
  position: relative;
  border-top: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--ink-2) 90%, transparent);
  padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem;
}
.site-foot::before {
  content: ""; position: absolute; inset: -1px 0 auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 30%, transparent) 50%, transparent);
}
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.2rem; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand p { color: var(--muted); font-size: 0.92rem; margin-top: 1rem; max-width: 34ch; }
.foot-col h2 { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; font-weight: 700; }
.foot-col p { font-size: 0.93rem; margin-bottom: 0.5rem; }
.foot-col a { color: var(--accent); text-decoration: none; }
.foot-col a:hover { text-decoration: underline; }
.foot-base {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft);
}
.foot-base p { margin: 0; font-size: 0.85rem; color: var(--muted); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.foot-legal a { font-size: 0.85rem; color: var(--muted); text-decoration: none; }
.foot-legal a:hover { color: var(--text); }