/* superaligned.to tokens, gone dark: Instrument Sans for copy, Sora for display,
   JetBrains Mono for labels. Near-black ground, Cloud Dancer copy, hot pink as
   the one accent, and a neon sunset (blue, violet, pink, coral, butter) for the
   glows and the footer wordmark. */
:root {
  color-scheme: dark;
  --night: #0c0f17;
  --plaster: #f0eee9;
  --pink: #ff5c93;
  --pink-light: #ff7fab;
  --sunset-blue: #3d7bff;
  --sunset-violet: #9a5cff;
  --text: var(--plaster);
  /* 7.9:1 and 6.7:1 on the ground: the faint one still passes for small text. */
  --text-muted: rgb(240 238 233 / 0.78);
  --text-faint: rgb(240 238 233 / 0.62);
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: Sora, "Instrument Sans", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius-control: 4px;
  --radius-sm: 5px;
  --radius-card: 10px;
  --radius-button: 10px;
  --gutter: 6%;
  --accent: var(--pink);
  --action: var(--pink);
  --action-hover: var(--pink-light);
  /* Near-black on the pink: 6.6:1. */
  --action-text: var(--night);
}
* { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-button); }
::selection { background: var(--action); color: var(--action-text); }
.skip-link { position: fixed; z-index: 20; top: -100px; left: 10px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--action); color: var(--action-text); }
.skip-link:focus { top: 10px; }

/* Hero: one screen, the scene full bleed behind it, the headline set huge at the bottom. */
.landing { position: relative; isolation: isolate; min-height: 640px; min-height: max(640px, 100svh); display: flex; flex-direction: column; overflow: hidden; }
.world { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--night); }
/* One canvas pixel per CSS pixel (background.js sizes it), scaled up crisp. */
.world-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
/* Shade the factory where the copy sits: along the bottom, the top, and on wide
   screens the left. */
.world-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgb(12 15 23 / 0.92) 0%, rgb(12 15 23 / 0.6) 30%, transparent 58%), linear-gradient(180deg, rgb(12 15 23 / 0.55), transparent 16%); }
/* Soft sunset glows drifting behind the factory, screened onto the ground and
   faded out before the hero ends. */
.world::after { content: ""; position: absolute; inset: -10%; pointer-events: none; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 74%); mask-image: linear-gradient(180deg, #000 45%, transparent 74%);
  background: radial-gradient(42% 52% at 74% 28%, rgb(154 92 255 / 0.3), transparent 70%), radial-gradient(38% 46% at 96% 70%, rgb(255 92 147 / 0.24), transparent 70%), radial-gradient(34% 40% at 52% 4%, rgb(61 123 255 / 0.2), transparent 70%);
  animation: glow-drift 24s ease-in-out infinite alternate; }
@keyframes glow-drift { from { transform: translate3d(-2%, 1%, 0) scale(1); } to { transform: translate3d(3%, -2%, 0) scale(1.06); } }
@media (min-width: 701px) {
  .world-shade { background: linear-gradient(90deg, rgb(12 15 23 / 0.78) 0%, rgb(12 15 23 / 0.45) 38%, transparent 62%), linear-gradient(0deg, rgb(12 15 23 / 0.92) 0%, rgb(12 15 23 / 0.6) 30%, transparent 58%), linear-gradient(180deg, rgb(12 15 23 / 0.55), transparent 16%); }
}
.header, .main, .footer-grid, .footer-base { width: calc(100% - 2 * var(--gutter)); max-width: 1440px; margin-inline: auto; }

.header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; }
.brand img { display: block; width: auto; height: 28px; }
.top-nav { display: flex; align-items: center; gap: 4px; }
.icon-link { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-button); color: var(--text-muted); transition: color .15s ease, background-color .15s ease; }
.icon-link:hover { color: var(--text); background: rgb(240 238 233 / 0.1); }

/* Buttons as on superaligned.to: 38px tall, 10px rounding, Instrument Sans 500, in pink. */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 20px; border: 0; border-radius: var(--radius-button); background: var(--action); color: var(--action-text); font: 500 14px / 1 var(--font-sans); white-space: nowrap; cursor: pointer; transition: background-color .15s ease; }
.btn::after { content: ""; position: absolute; inset: -4px 0; }
.btn:hover { background: var(--action-hover); }
.btn.ghost { padding: 0 16px; background: rgb(240 238 233 / 0.1); color: var(--plaster); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn.ghost:hover { background: rgb(240 238 233 / 0.18); }
.btn svg { flex: none; }

.main { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-block: 48px 36px; }
.headline { margin: 0; max-width: 15ch; font-family: var(--font-display); font-size: clamp(48px, 8.4vw, 156px); font-weight: 700; line-height: .94; letter-spacing: -0.045em; text-wrap: balance; }
/* Outlined, so the scene shows through the word it's about. */
/* Outlines need air: the headline's tight tracking makes stroked letters touch. */
.headline em { font-style: normal; color: transparent; -webkit-text-stroke: max(1.5px, .012em) var(--accent); letter-spacing: 0.005em; white-space: nowrap; }
/* Nothing on the page selects or drags: clicks drop junk into the factory. */
html { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img, svg { -webkit-user-drag: none; }
/* Hovering the robot's head (background.js): it can be clicked. */
.on-head, .on-head * { cursor: pointer !important; }
/* Overdrive (the easter egg in background.js): the outline fills in. */
.headline em { transition: color .3s ease; }
.overdrive .headline em { color: var(--accent); }
/* Two halves: the claim on the left, Book a call filling the right. */
.hero-foot { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; margin-top: clamp(28px, 4vh, 48px); }
.subtitle { max-width: 640px; margin: 0; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: var(--plaster); text-wrap: pretty; text-shadow: 0 1px 18px rgb(12 15 23 / 0.9); }
.hero-actions { display: flex; }
/* The page's one call to action: square, outlined thick in pink like the
   outlined headline word, and filled pink on hover. */
.hero-actions .btn { flex: 1; height: 96px; padding: 0 32px; border: 4px solid var(--pink); border-radius: 0; background: rgb(12 15 23 / 0.55); color: var(--pink); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .15s ease, color .15s ease; }
.hero-actions .btn:hover { background: var(--pink); color: var(--night); }




/* Footer: below the fold, reached by scrolling. */
.footer { padding-top: 72px; background: var(--night); }
/* Minimal: the lockup on the left, the social links in a row on the right. */
.footer-grid { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px; }
.footer-brand img { display: block; width: auto; height: 22px; }
.footer-col { display: flex; align-items: center; gap: 4px; margin-right: -9px; }

.footer-base { display: flex; gap: 16px; margin-top: 64px; padding: 28px 0 32px; font: 11px var(--font-mono); color: var(--text-faint); }

@media (max-width: 1050px) {
  :root { --gutter: 40px; }
  .hero-foot { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 700px) {
  :root { --gutter: 22px; }
  .header { padding-top: 18px; }
  .brand img { height: 24px; }
  .top-nav { margin-right: -8px; }
  .headline { font-size: clamp(42px, 12.5vw, 72px); line-height: .98; }
  .main { padding-block: 40px 24px; }
  .hero-foot { gap: 20px; }
  .subtitle { font-size: 17px; }
  .footer { padding-top: 48px; }
  .footer-base { flex-direction: column; gap: 6px; margin-top: 40px; }
  .world::after { background: radial-gradient(60% 26% at 70% 16%, rgb(154 92 255 / 0.3), transparent 70%), radial-gradient(50% 22% at 18% 24%, rgb(61 123 255 / 0.24), transparent 70%), radial-gradient(60% 20% at 50% 4%, rgb(255 92 147 / 0.18), transparent 70%); }
  /* A little taller than the screen on short phones, so the factory keeps
     its place between the header and the headline above the big buttons. */
  .landing { min-height: max(100svh, 720px); }
  /* Full-width buttons, taller and easier to hit. */
  .hero-actions .btn { height: 68px; border-width: 3px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}