/* DSH PRO — landing page.
 *
 * Design language borrowed from the DeepSeek Harness developer-preview page:
 * near-black ground, DM Sans, a left-aligned hero with a card beside it rather
 * than a centred stack, medium-weight display type instead of bold, body copy
 * at half-opacity, full-round pill buttons, and a generous 120px section
 * rhythm.
 *
 * Identity deliberately NOT borrowed. This product must not read as an official
 * DeepSeek property — it says so in its own About panel — so the mark, the
 * wordmark and the holographic accent stay ours, and the accent is used
 * sparingly rather than as a wash.
 *
 * Their page is dark only. This one keeps both schemes, so every colour is a
 * token with two value sets rather than a hardcoded near-black. */

:root {
  color-scheme: dark light;

  --violet: #7c6cff;
  --cyan: #63b8ff;
  --magenta: #d684ff;
  --holo: linear-gradient(100deg, var(--violet), var(--cyan) 45%, var(--magenta));

  --radius: 14px;
  --radius-lg: 20px;
  --pill: 100px;

  --measure: 1200px;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* Dark is the primary scheme — it is the one the reference commits to. */
  --bg: #0a0a0a;
  --bg-elev: #121212;
  --surface: rgba(255, 255, 255, .04);
  --surface-hover: rgba(255, 255, 255, .08);
  --border: rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .18);
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, .50);
  --text-faint: rgba(255, 255, 255, .34);
  --btn-bg: #ffffff;
  --btn-fg: #0a0a0a;
  --nebula: .55;

  /* Closing illustration. Flat, single-accent, unDraw-style — every fill is a
     token so the scene inverts with the page instead of staying light on it. */
  --il-ink: #2b2f3d;
  --il-mid: #1b1e29;
  --il-soft: rgba(255, 255, 255, .07);
  --il-line: rgba(255, 255, 255, .22);
  --il-leaf: #3f9a76;
  --il-skin: #efb49b;
  --il-hair: #24242e;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #fbfbfd;
    --bg-elev: #ffffff;
    --surface: rgba(10, 10, 20, .035);
    --surface-hover: rgba(10, 10, 20, .07);
    --border: rgba(10, 10, 20, .11);
    --border-strong: rgba(10, 10, 20, .20);
    --text: #0a0a0f;
    --text-dim: rgba(10, 10, 20, .58);
    --text-faint: rgba(10, 10, 20, .40);
    --btn-bg: #0a0a0f;
    --btn-fg: #ffffff;
    --nebula: .30;
    --il-ink: #43465c;
    --il-mid: #e9eaf3;
    --il-soft: rgba(10, 10, 20, .06);
    --il-line: rgba(10, 10, 20, .20);
    --il-leaf: #4bab85;
    --il-skin: #f0ad95;
    --il-hair: #2c2c38;
  }
}

:root[data-theme="light"] {
  --bg: #fbfbfd;
  --bg-elev: #ffffff;
  --surface: rgba(10, 10, 20, .035);
  --surface-hover: rgba(10, 10, 20, .07);
  --border: rgba(10, 10, 20, .11);
  --border-strong: rgba(10, 10, 20, .20);
  --text: #0a0a0f;
  --text-dim: rgba(10, 10, 20, .58);
  --text-faint: rgba(10, 10, 20, .40);
  --btn-bg: #0a0a0f;
  --btn-fg: #ffffff;
  --nebula: .30;
  --il-ink: #43465c;
  --il-mid: #e9eaf3;
  --il-soft: rgba(10, 10, 20, .06);
  --il-line: rgba(10, 10, 20, .20);
  --il-leaf: #4bab85;
  --il-skin: #f0ad95;
  --il-hair: #2c2c38;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── The nebula ────────────────────────────────────────────────────────────
   The reference puts a soft blue bloom and a fine star field behind the hero
   only, not the whole page. Ours is the same idea in our own colours, and it
   fades out below the fold so the rest of the page is honest black. */
.nebula {
  position: absolute;
  inset: 0 0 auto 0;
  height: 900px;
  z-index: 0;
  pointer-events: none;
  opacity: var(--nebula);
  background:
    radial-gradient(52% 46% at 72% 18%, rgba(96, 150, 255, .40), transparent 68%),
    radial-gradient(44% 40% at 24% 8%, rgba(124, 108, 255, .30), transparent 70%),
    radial-gradient(60% 50% at 88% 52%, rgba(214, 132, 255, .16), transparent 72%);
  -webkit-mask-image: linear-gradient(#000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 55%, transparent 100%);
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 28px; }

main { position: relative; z-index: 1; }

section { padding: 120px 0; }
@media (max-width: 800px) { section { padding: 72px 0; } }

/* ── Header ─────────────────────────────────────────────────────────────── */
/* Sticky, but weightless until it has something to sit on top of: the blur and
   the hairline only appear once the page has scrolled, so the hero meets the
   top of the window with nothing drawn across it. */
.site-head {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid transparent;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              backdrop-filter .25s var(--ease);
}
.site-head.stuck {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--border);
}
.site-head .wrap { display: flex; align-items: center; gap: 10px; height: 72px; }

.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand img { width: 26px; height: 26px; border-radius: 7px; display: block; }
.brand-name { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }

/* A quiet chip beside the wordmark, the way the reference tags "Harness". */
.chip-tag {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 10px;
  border-radius: var(--pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px; font-weight: 500; letter-spacing: .06em;
  color: var(--text-dim);
}
.chip-tag.pro {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(100deg, #5b8cff, #9a7bff 35%, #63d2ff 70%, #5b8cff);
  background-size: 220% 100%;
  animation: shimmer 7s linear infinite;
  letter-spacing: .10em; font-weight: 700;
}
@keyframes shimmer { to { background-position: 220% 0; } }
@media (prefers-reduced-motion: reduce) { .chip-tag.pro { animation: none; } }

.head-spacer { flex: 1; }
.head-links { display: flex; align-items: center; gap: 4px; }
.head-links a {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-dim); text-decoration: none;
  font-size: 15px; padding: 8px 12px; border-radius: var(--pill);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.head-links a:hover { color: var(--text); background: var(--surface); }

/* The channel, in the chrome rather than buried in the footer. */
.head-yt svg { width: 17px; height: 17px; color: #ff0033; flex: 0 0 auto; }
.head-yt:hover svg { color: #ff2a52; }

/* Download is the one thing this page is for, so it is the one solid control. */
.head-cta {
  background: var(--btn-bg) !important;
  color: var(--btn-fg) !important;
  font-weight: 500;
  padding: 8px 16px !important;
  margin-left: 4px;
}
.head-cta:hover { opacity: .88; }

@media (max-width: 860px) { .head-links a.optional { display: none; } }
@media (max-width: 860px) { .head-links .head-yt .optional { display: none; } }

.theme-toggle {
  width: 34px; height: 34px;
  margin-left: 6px;
  display: inline-grid; place-items: center;
  border-radius: var(--pill);
  border: 1px solid var(--border);
  background: transparent; color: var(--text-dim); cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .moon { display: block; }
.theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .moon { display: none; }
  :root:not([data-theme="dark"]) .theme-toggle .sun { display: block; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding: 64px 0 96px; }
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
@media (max-width: 940px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}

.kicker { margin: 0 0 18px; font-size: 18px; font-weight: 500; color: var(--text); }
.kicker .accent {
  background: var(--holo);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

h1 {
  margin: 0;
  font-size: clamp(38px, 4.6vw, 52px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.18;
}

.hero p.lede { margin: 22px 0 0; font-size: 17px; color: var(--text-dim); max-width: 46ch; }
.hero p.lede + p.lede { margin-top: 16px; }
.hero p.lede strong { color: var(--text); font-weight: 500; }

/* The reference's 2x2 pill grid. */
.actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 12px;
  margin-top: 34px;
}
@media (max-width: 520px) { .actions { grid-template-columns: minmax(0, 1fr); } }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  border-radius: var(--pill);
  font-size: 15px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  transition: background-color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.btn-primary {
  background: var(--btn-bg); color: var(--btn-fg); border-color: transparent;
}
.btn-primary:hover { background: var(--btn-bg); opacity: .88; border-color: transparent; }
.btn small { display: block; font-size: 12px; opacity: .6; line-height: 1.2; font-weight: 400; }
.btn .stack { display: flex; flex-direction: column; align-items: flex-start; }

.platform-note { margin: 22px 0 0; font-size: 14px; color: var(--text-faint); }
.platform-note .dot { opacity: .5; margin: 0 8px; }

/* ── The window card that sits beside the hero ─────────────────────────── */
.window {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
}
:root[data-theme="light"] .window,
:root:not([data-theme="dark"]) .window {
  box-shadow: 0 30px 80px rgba(10, 10, 30, .16), 0 2px 8px rgba(10, 10, 30, .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .window {
    box-shadow: 0 30px 90px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
  }
}

.window-bar {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px;
  border-bottom: 1px solid var(--border);
}
.window-bar .lights { display: flex; gap: 7px; }
.window-bar .lights i {
  width: 11px; height: 11px; border-radius: 50%; display: block;
  background: var(--border-strong);
}
.window-bar .title {
  margin-left: 6px; font-size: 13px; color: var(--text-faint);
}
.window-bar .spacer { flex: 1; }
.window-bar .copy {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-faint);
  background: transparent; border: 0; cursor: pointer; padding: 4px 6px;
  border-radius: 8px;
}
.window-bar .copy:hover { color: var(--text); background: var(--surface-hover); }
.window-bar .copy svg { width: 13px; height: 13px; }

.window img { display: block; width: 100%; height: auto; }

/* Ship one screenshot per scheme so a light page never shows a dark app.
   Every selector below is qualified by .window on purpose: `.window img` above
   is specificity (0,1,1), and a bare `.shot-dark` at (0,1,0) loses to it
   regardless of source order — which is exactly how both screenshots ended up
   rendering, stacked, in an earlier revision of this page. */
.window .shot-light { display: none; }
:root[data-theme="light"] .window .shot-light { display: block; }
:root[data-theme="light"] .window .shot-dark { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .window .shot-light { display: block; }
  :root:not([data-theme="dark"]) .window .shot-dark { display: none; }
}

/* ── Section headings ───────────────────────────────────────────────────── */
.eyebrow {
  margin: 0 0 22px;
  font-size: 13px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
}

h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.22;
  max-width: 20ch;
}
h2 .dim { color: var(--text-dim); }

.section-lede { margin: 20px 0 0; font-size: 17px; color: var(--text-dim); max-width: 58ch; }

/* ── Feature rows ───────────────────────────────────────────────────────── */
.rows { display: grid; gap: 1px; margin-top: 64px; background: var(--border); border-radius: var(--radius); overflow: hidden; }
.row {
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  gap: 40px;
  padding: 36px 32px;
  background: var(--bg);
}
@media (max-width: 800px) { .row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 28px 22px; } }
.row h3 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.row p { margin: 0; color: var(--text-dim); font-size: 16px; }

/* ── Split showcase ─────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.split + .split { margin-top: 120px; }
.split.reverse .split-media { order: -1; }
@media (max-width: 940px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .split.reverse .split-media { order: 0; }
}
.split h2 { max-width: 16ch; }
.split p { margin: 20px 0 0; color: var(--text-dim); }
.split ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.split li { display: flex; gap: 11px; color: var(--text-dim); font-size: 16px; }
.split li svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 5px; color: var(--violet); }

/* ── Closing / attribution ──────────────────────────────────────────────── */
.notice {
  margin-top: 22px;
  font-size: 14.5px; line-height: 1.7; color: var(--text-faint);
  max-width: 74ch;
}
.notice strong { color: var(--text-dim); font-weight: 500; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--border); padding: 40px 0 64px; position: relative; z-index: 1; }
.site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; justify-content: space-between; }
.foot-brand { display: flex; align-items: center; gap: 10px; color: var(--text-faint); font-size: 14px; }
.foot-brand img { width: 20px; height: 20px; border-radius: 6px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 20px; }
.foot-links a { color: var(--text-faint); font-size: 14px; text-decoration: none; }
.foot-links a:hover { color: var(--text); }

.byline {
  color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
  transition: border-color .15s var(--ease);
}
.byline:hover { border-bottom-color: currentColor; }

.yt {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: var(--pill);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-dim); font-size: 14px; text-decoration: none;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.yt:hover { color: var(--text); background: var(--surface-hover); }
.yt svg { width: 16px; height: 16px; color: #ff0033; }

/* Reveal-on-scroll, opt-in from JS so a no-JS visitor sees everything. */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }

/* ── Closing block ──────────────────────────────────────────────────────── */
/* Buttons and byline on the left, the illustration filling the space that was
   otherwise empty on the right. Collapses to one column before the drawing
   gets too small to read. */
.closer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px; align-items: center;
}
.closer .actions { margin-top: 0; }
.closer-by { margin: 22px 0 0; color: var(--text-dim); font-size: 15px; }

.illo { width: 100%; max-width: 460px; height: auto; justify-self: end; }
@media (max-width: 900px) {
  .closer { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .illo { justify-self: start; max-width: 380px; }
}

.il-blob      { fill: var(--violet); opacity: .10; }
.il-soft      { fill: var(--il-soft); }
.il-screen    { fill: var(--il-mid); }
.il-sidebar   { fill: var(--il-ink); }
.il-accent    { fill: var(--violet); }
.il-accentline{ fill: var(--violet); opacity: .28; }
.il-line      { fill: var(--il-line); }
.il-stand,
.il-deskline  { fill: var(--il-ink); }
.il-desk      { fill: var(--il-ink); }
.il-ink       { fill: var(--il-ink); }
.il-skin      { fill: var(--il-skin); }
.il-hair      { fill: var(--il-hair); }
.il-pot       { fill: var(--violet); opacity: .55; }
.il-leaf      { fill: var(--il-leaf); }
/* The two stroked shapes. Everything else is a fill. */
.il-arm    { fill: none; stroke: var(--il-skin); stroke-width: 9; stroke-linecap: round; }
.il-handle { fill: none; stroke: var(--violet); stroke-width: 3; }