@layer reset, base, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, ol, ul, li, figure, blockquote { margin: 0; }
  ol, ul { padding: 0; }
  img, svg, canvas { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
}

@layer base {
  /* Tokens mirror DESIGN.md — the dashboard's design system is the landing's. */
  :root {
    --bg: #08090a;
    --bg-panel: #0f1011;
    --bg-l2: #141516;
    --bg-l3: #191a1b;
    --bg-hover: #1c1c1f;
    --bg-tert: #232326;
    --line: #23252a;
    --line-2: #34343a;
    --line-t: rgba(255,255,255,.05);
    --ink: #f7f8f8;
    --ink-2: #d0d6e0;
    --mut: #8a8f98;
    --mut-2: #62666d;
    --accent: #8fbd78;
    --accent-h: #a0c98b;
    --accent-tint: #172018;
    --link: #9ac986;
    --red: #eb5757;
    --orange: #fc7840;
    --green: #27a644;
    --r-btn: 6px;
    --r-card: 12px;
    --r-badge: 4px;
    --sans: "Inter", system-ui, sans-serif;
  }

  body {
    min-width: 320px;
    overflow-x: hidden;
    color: var(--ink);
    background: var(--bg);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    font-feature-settings: "cv01", "ss03";
    -webkit-font-smoothing: antialiased;
  }

  ::selection { color: #10120d; background: var(--accent); }

  .skip-link {
    position: fixed; z-index: 100; top: 12px; left: 12px;
    padding: 10px 14px; color: var(--bg); background: var(--accent);
    transform: translateY(-160%); transition: transform .15s ease;
  }
  .skip-link:focus { transform: translateY(0); }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

  .section { padding: 128px max(5vw, 24px); }
  .eyebrow {
    display: flex; align-items: center; gap: 9px;
    color: var(--accent); font-size: 13px; font-weight: 590; letter-spacing: -.01em;
  }
  h1, h2 { font-weight: 500; letter-spacing: -.045em; line-height: .98; }
  h1 { max-width: 790px; font-size: clamp(54px, 7.3vw, 112px); }
  h2 { font-size: clamp(42px, 5.2vw, 76px); }
  h1 em, h2 em { color: var(--accent-h); font-style: normal; font-weight: 500; }

  .section-intro > h2 { margin-top: 24px; }
  .section-intro > p:not(.eyebrow) { max-width: 520px; margin-top: 26px; color: var(--ink-2); font-size: 17px; line-height: 1.65; }
}

@layer components {
  /* ---- header ---- */
  .site-header {
    position: absolute; z-index: 10; top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between;
    height: 88px; padding: 0 max(5vw, 24px); border-bottom: 1px solid var(--line-t);
  }
  .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
  .brand-logo { width: 36px; height: 28px; object-fit: contain; }
  .site-header nav { display: flex; align-items: center; gap: 32px; color: var(--ink-2); font-size: 13px; }
  .site-header nav a { transition: color .16s ease; }
  .site-header nav a:hover { color: var(--ink); }
  .nav-cta { padding: 10px 15px; color: var(--bg); background: var(--ink); border-radius: var(--r-btn); }
  .site-header nav .nav-cta:hover { color: var(--bg); background: var(--accent-h); }

  /* ---- buttons (marketing) ---- */
  .button {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
    min-height: 52px; padding: 0 18px; border-radius: var(--r-btn); font-size: 14px; font-weight: 600;
    transition: background .16s ease;
  }
  .button-primary { color: #10120d; background: var(--accent); }
  .button-primary:hover { background: var(--accent-h); }
  .text-link { padding: 12px 0; color: var(--ink-2); font-size: 14px; border-bottom: 1px solid var(--line); }
  .text-link:hover { color: var(--ink); border-color: var(--ink); }

  /* ---- dashboard vocabulary (shared by hero card, fragments, app frame) ----
     Anatomy matches make-dashboard.py's lead_row(): cohead → cometa → trigger
     → dossier → actions. */
  .cohead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .cohead strong { font-size: 14px; font-weight: 590; letter-spacing: -.013em; }
  .fitpill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 1px 8px; border: 1px solid var(--line-2); border-radius: 999px;
    color: var(--ink-2); font-size: 11px; font-weight: 500; white-space: nowrap;
  }
  .fitpill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mut-2); }
  .fitpill.s4::before { background: var(--accent); }
  .fitpill.s3::before { background: var(--mut); }
  .cometa { display: flex; align-items: center; flex-wrap: wrap; margin-top: 5px; color: var(--mut); font-size: 11px; }
  .cometa > span + span::before { content: "·"; margin: 0 7px; color: var(--mut-2); }
  .draftready { display: inline-flex; align-items: center; gap: 5px; }
  .draftready i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
  .trigger { margin-top: 9px; color: var(--ink-2); font-size: 12.5px; line-height: 1.55; }
  .chip {
    display: inline-block; margin-right: 7px; padding: 0 5px;
    border: 1px solid var(--line-2); border-radius: var(--r-badge);
    color: var(--mut); font-size: 10px; vertical-align: 1px;
  }
  .badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 1px 7px; border: 1px solid var(--line-2); border-radius: 999px;
    color: var(--mut); font-size: 10.5px; font-weight: 510; white-space: nowrap;
  }
  .badge.hot { color: var(--orange); border-color: rgba(252,120,64,.35); }
  .badge.hot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
  .badge.naf { color: var(--mut); }
  .badge.reply { color: var(--accent); border-color: rgba(143,189,120,.4); margin-right: 8px; }
  .badge.reply::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  .fit-reason { margin-top: 14px; padding: 11px 12px; border-left: 2px solid var(--accent); background: var(--accent-tint); }
  .fit-reason > span { color: var(--accent); font-size: 11px; font-weight: 590; }
  .fit-reason p { margin-top: 4px; color: var(--ink-2); font-size: 12.5px; line-height: 1.55; }
  .dossier { margin-top: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-l2); }
  .doss-label { display: block; color: var(--link); font-size: 11.5px; }
  .dossier p { margin-top: 8px; color: var(--ink-2); font-size: 12px; line-height: 1.55; }
  .dossier b { color: var(--ink); font-weight: 590; }
  .lead-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .btn {
    display: inline-flex; align-items: center;
    height: 26px; padding: 0 10px; border-radius: var(--r-btn);
    font-size: 11.5px; font-weight: 510; white-space: nowrap; cursor: default;
  }
  .btn.primary { color: #10120d; background: var(--accent); }
  .btn.ghost { color: var(--ink-2); border: 1px solid var(--line-2); }
  .btn.quiet { color: var(--mut); }

  /* ---- hero ---- */
  .hero {
    position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
    align-items: center; min-height: 850px; padding: 150px max(5vw, 24px) 80px;
    border-bottom: 1px solid var(--line);
  }
  .hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(var(--line-t) 1px, transparent 1px), linear-gradient(90deg, var(--line-t) 1px, transparent 1px);
    background-size: 96px 96px; mask-image: linear-gradient(to right, black, transparent 74%); opacity: .22;
  }
  .hero-copy { position: relative; z-index: 2; padding-right: 24px; }
  .pulse { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 5px rgba(143,189,120,.12); }
  .hero h1 { margin-top: 28px; }
  .hero-lede { max-width: 610px; margin-top: 32px; color: var(--ink-2); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; }
  .hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 38px; }
  .microcopy { margin-top: 23px; color: var(--mut); font-size: 12px; }

  .signal-stage { position: relative; min-height: 620px; overflow: hidden; isolation: isolate; }
  #signal-canvas { position: absolute; inset: -10%; width: 120%; height: 120%; }
  .find-card {
    position: absolute; z-index: 3; top: 15%; right: 1%; width: min(410px, 84%);
    overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-card);
    background: var(--bg-panel);
  }
  .mini-appbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--mut); font-size: 11px; }
  .mini-appbar span:first-child { display: flex; align-items: center; gap: 7px; color: var(--ink-2); font-weight: 590; }
  .mini-appbar i { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
  .find-card-body { padding: 16px 16px 18px; }
  .find-card .trigger { margin-top: 12px; }
  .find-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--mut); font-size: 11px; }
  .find-action > span { display: flex; align-items: center; gap: 7px; }
  .find-action i { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
  .find-action strong { color: var(--link); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
  .signal-label { position: absolute; z-index: 2; padding: 4px 8px; color: var(--mut); background: rgba(8,9,10,.72); border: 1px solid var(--line); border-radius: var(--r-badge); font-size: 10px; }
  .signal-label-a { top: 12%; left: 5%; }
  .signal-label-b { bottom: 14%; left: 14%; }
  .signal-label-c { bottom: 6%; right: 9%; }

  /* ---- trust strip ---- */
  .trust-strip { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 22px max(5vw, 24px); border-bottom: 1px solid var(--line); color: var(--mut); font-size: 13px; }
  .trust-strip > p { color: var(--ink-2); font-weight: 500; }
  .trust-items { display: flex; gap: 36px; }
  .trust-items span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 9px; vertical-align: 3px; background: var(--accent); border-radius: 50%; }

  /* ---- how it works ---- */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 40px; margin-top: 72px; list-style: none; }
  .steps li { display: flex; flex-direction: column; gap: 22px; }
  .step-copy { flex: 1; }
  .step-number { color: var(--accent); font-size: 14px; font-weight: 590; }
  .steps h3 { margin-top: 12px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
  .step-copy > p { margin-top: 10px; color: var(--mut); font-size: 14px; line-height: 1.65; }

  .frag { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-panel); }
  .frag.doc p { padding: 14px 16px; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
  .doc-head, .doc-foot { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; color: var(--mut); font-size: 11px; }
  .doc-head { border-bottom: 1px solid var(--line); }
  .doc-head span:first-child { color: var(--ink-2); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; }
  .doc-foot { border-top: 1px solid var(--line); }
  .frag.runlog { padding: 6px 0; }
  .log-row { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 8px 16px; font-size: 12px; }
  .log-row + .log-row { border-top: 1px solid var(--line-t); }
  .log-row span:first-child { color: var(--mut-2); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; white-space: nowrap; }
  .log-row span:last-child { color: var(--ink-2); }
  .frag.minilead { padding: 14px 16px 16px; }

  /* ---- dashboard frame ---- */
  .app-frame { margin-top: 72px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); }
  .app-chrome { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--bg-panel); color: var(--mut); font-size: 11px; }
  .dots { display: flex; gap: 6px; }
  .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--bg-tert); border: 1px solid var(--line-2); }
  .app-url { flex: 1; text-align: center; color: var(--mut); }
  .app-time { color: var(--mut-2); }
  .app-body { display: grid; grid-template-columns: 220px 1fr; }
  .app-side { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--bg-panel); padding: 14px 10px 12px; }
  .ws-row { display: flex; align-items: center; gap: 8px; padding: 0 8px; font-size: 13px; font-weight: 590; }
  .ws-row img { width: 22px; height: 18px; object-fit: contain; }
  .app-filter { margin: 12px 0 10px; padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--bg-l2); color: var(--mut-2); font-size: 12px; }
  .app-nav { display: flex; flex-direction: column; gap: 1px; }
  .app-nav a { display: flex; align-items: center; padding: 5px 8px; border-radius: var(--r-btn); color: var(--mut); font-size: 12.5px; font-weight: 510; }
  .app-nav a.on { background: var(--accent-tint); color: var(--ink); }
  .app-nav a b { margin-left: auto; color: var(--mut-2); font-size: 11px; font-weight: 400; }
  .nav-label { margin: 14px 8px 4px; color: var(--mut-2); font-size: 10.5px; font-weight: 510; letter-spacing: .06em; text-transform: uppercase; }
  .app-pinned { display: flex; flex-direction: column; gap: 1px; margin-top: 26px; padding-top: 10px; border-top: 1px solid var(--line); }
  .app-pinned a { padding: 5px 8px; color: var(--mut); font-size: 12.5px; }
  .app-pinned span { padding: 6px 8px 0; color: var(--mut-2); font-size: 10.5px; }
  .app-main { min-width: 0; padding: 16px 18px 20px; }
  .tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .tile { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-panel); }
  .tile .lbl { display: flex; align-items: center; gap: 6px; color: var(--mut-2); font-size: 10.5px; font-weight: 510; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
  .tile .lbl i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
  .tile .num { display: block; margin-top: 3px; font-size: 21px; font-weight: 590; letter-spacing: -.015em; }
  .tile.hot .num { color: var(--orange); }
  .panel { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-panel); }
  .panel > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
  .panel > header span:first-child { font-weight: 590; }
  .panel > header span:last-child { color: var(--mut-2); font-size: 11px; }
  .lead { padding: 13px 16px 15px; }
  .lead + .lead { border-top: 1px solid var(--line-t); }
  .lead.dim .cohead strong, .lead.dim .trigger { color: var(--mut); }
  .fu-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; }
  .fu-row + .fu-row { border-top: 1px solid var(--line-t); }
  .fu-row p { color: var(--ink-2); font-size: 12.5px; line-height: 1.55; }
  .fu-row strong { color: var(--ink); font-weight: 590; }

  .frame-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; list-style: none; }
  .frame-notes li { padding-top: 16px; border-top: 1px solid var(--line); color: var(--mut); font-size: 14px; line-height: 1.65; }
  .frame-notes li span { display: block; margin-bottom: 8px; color: var(--ink); font-size: 15px; font-weight: 590; letter-spacing: -.013em; }

  /* ---- features ---- */
  .features-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    margin-top: 72px; list-style: none;
    border: 1px solid var(--line); background: var(--line); border-radius: var(--r-card); overflow: hidden;
  }
  .features-grid li { padding: 26px 28px 30px; background: var(--bg-panel); }
  .features-grid h3 { font-size: 16px; font-weight: 590; letter-spacing: -.015em; }
  .features-grid p { margin-top: 10px; color: var(--mut); font-size: 13.5px; line-height: 1.65; }

  /* ---- join / footer ---- */
  .join { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; background: var(--accent); color: #11150e; }
  .join .eyebrow { color: #435128; }
  .join h2 { margin-top: 24px; }
  .join h2 em { color: #35431f; }
  .join-action { width: min(350px, 100%); }
  .button-light { width: 100%; color: var(--ink); background: var(--bg); }
  .button-light:hover { background: #20241c; }
  .join-action p { margin-top: 12px; color: #4e5a39; font-size: 12px; }

  footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 36px max(5vw, 24px); color: var(--mut); font-size: 11px; }
  footer > p:last-child { justify-self: end; }
}

@layer responsive {
  @media (max-width: 1120px) {
    .tiles { grid-template-columns: repeat(3, 1fr); }
  }

  @media (max-width: 980px) {
    .hero { grid-template-columns: 1fr; padding-top: 170px; }
    .hero-copy { padding-right: 0; }
    .signal-stage { min-height: 600px; margin-top: 30px; }
    .steps { grid-template-columns: 1fr; gap: 40px; max-width: 560px; }
    .frame-notes { grid-template-columns: 1fr; gap: 28px; }
    .features-grid { grid-template-columns: 1fr 1fr; }
    .app-body { grid-template-columns: 1fr; }
    .app-side { display: none; }
    .join { align-items: flex-start; flex-direction: column; }
  }

  @media (max-width: 680px) {
    .section { padding-top: 92px; padding-bottom: 92px; }
    .site-header { height: 72px; }
    .site-header nav > a:not(.nav-cta) { display: none; }
    .hero { min-height: 720px; padding-top: 132px; }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
    .button-primary { width: 100%; }
    .signal-stage { min-height: 560px; margin: 20px -12px 0; }
    .find-card { top: 10%; right: 3%; width: 88%; }
    .signal-label-c { display: none; }
    .trust-strip { align-items: flex-start; flex-direction: column; }
    .trust-items { align-items: flex-start; flex-direction: column; gap: 10px; }
    .app-frame { margin-left: -8px; margin-right: -8px; }
    .app-main { padding: 12px 12px 16px; }
    .tiles { grid-template-columns: repeat(2, 1fr); }
    .fu-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .features-grid { grid-template-columns: 1fr; }
    .join { padding-left: 24px; padding-right: 24px; }
    footer { grid-template-columns: 1fr; gap: 14px; }
    footer > p:last-child { justify-self: start; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
}