/* ============================================================
   NEUMO UI: visual identity. Site-specific.

   WHO THIS IS FOR
   Designers and front-end developers who love the soft, tactile
   look of neumorphism and don't want to ship something people
   can't read or use.

   WHAT THE DESIGN HAS TO SAY
   It can be done. The site is itself soft UI: one cool grey
   surface, raised cards and pressed wells made with a light and a
   dark shadow. But text is dark and measured, controls have real
   labels, focus is a two-color ring, and shadows are never the
   only signal.

   SIGNATURES
   Raised cards and buttons, pressed wells for code and specs, a
   knob brand mark, the live demo with a toggle that says On or Off,
   and solid borders when forced colors strip the shadows.

   COLOR
   Cool grey surface, deep slate ink, a deep blue for links and
   buttons, sky blue on the dark footer. Every text pair is checked
   by the build script.

   TYPE
   Urbanist for headings and reading: soft geometric shapes that
   suit the style and stay clear. Martian Mono for code.
   ============================================================ */

:root {
  --base:     #e4e9f0;
  --pressed:  #d7dee8;
  --ink:      #1c2330;
  --ink-soft: #4a5568;
  --link:     #0a5a86;
  --dark:     #1c2330;
  --on-dark:  #d9dee7;
  --sky:      #9fd3f5;
  --ring:     #0b1f33;
  --warn:     #8a4b00;
  --light:    #ffffff;
  --shade:    #b3bdcc;

  --raise:  6px 6px 14px var(--shade), -6px -6px 14px var(--light);
  --raise-sm: 4px 4px 9px var(--shade), -4px -4px 9px var(--light);
  --press:  inset 4px 4px 9px var(--shade), inset -4px -4px 9px var(--light);

  --accent:     var(--link);
  --accent-ink: #ffffff;
  --focus:      #0b1f33;
  --measure:    66ch;

  --display: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

[hidden] { display: none !important; }
body { font-family: var(--display); font-size: 1.0625rem; line-height: 1.7; color: var(--ink); background: var(--base); }
.wrap { width: min(70rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 46rem; }
h1, h2, h3 { font-family: var(--display); line-height: 1.1; }
h1 { font-weight: 800; font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -0.02em; }
h2 { font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 0.6rem; }
h3 { font-weight: 700; font-size: 1.2rem; margin-bottom: 0.3rem; }
p + p { margin-top: 0.8rem; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 2px; font-weight: 600; }
a:hover { color: var(--ink); }
a[href^="mailto:"] { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; box-shadow: 0 0 0 3px var(--light); border-radius: 6px; }
.kicker { font-weight: 700; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--link); margin-bottom: 0.5rem; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 56ch; }
.fine { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.8rem; }
.label { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--link); margin: 0 0 0.3rem; }
.label--warn { color: var(--warn); }
.source { font-size: 0.8125rem; color: var(--ink-soft); margin-top: auto; padding-top: 0.5rem; overflow-wrap: anywhere; }
code { font-family: var(--mono); font-size: 0.85em; }

.site-header { background: var(--base); box-shadow: 0 6px 14px var(--shade); position: relative; z-index: 1; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.7rem; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 44px; font-weight: 800; font-size: 1.35rem; color: var(--ink); text-decoration: none; }
.knob { width: 28px; height: 28px; border-radius: 50%; background: var(--base); box-shadow: var(--raise-sm); position: relative; }
.knob::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--link); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.8rem; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; }
.site-nav a:hover { box-shadow: var(--raise-sm); color: var(--ink); }
.site-nav a[aria-current="page"] { box-shadow: var(--press); background: var(--pressed); }

main { padding-block: 3rem 4rem; }
.hero { padding-bottom: 1rem; }
.hero h1 { max-width: 16ch; margin-bottom: 0.9rem; }
.section { margin-top: 3.5rem; }

/* Cards */
.cards { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
.card { max-width: none; background: var(--base); border: 2px solid transparent; border-radius: 22px; box-shadow: var(--raise); padding: 1.2rem 1.3rem 1.1rem; display: flex; flex-direction: column; }
.maker { font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 0.3rem; }
.specs { margin: 0.8rem 0 0; background: var(--pressed); box-shadow: var(--press); border-radius: 14px; padding: 0.6rem 0.9rem; font-size: 0.95rem; }
.specs div + div { margin-top: 0.4rem; }
.specs dt { font-weight: 700; }
.specs dd { margin: 0; color: var(--ink); }
.go { margin-top: auto; padding-top: 0.5rem; }
.go a { display: inline-flex; align-items: center; min-height: 44px; }

/* Demo */
.demo { background: var(--base); border: 2px solid transparent; border-radius: 26px; box-shadow: var(--raise); padding: clamp(1.2rem, 3vw, 2rem); margin-top: 1.2rem; max-width: 46rem; }
.demo-row { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; margin-top: 0.6rem; }
.soft-btn, .soft-toggle { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 52px; padding: 0 1.3rem; background: var(--base); color: var(--ink); border: 2px solid transparent; border-radius: 16px; box-shadow: var(--raise-sm); font: inherit; font-weight: 700; cursor: pointer; }
.soft-btn:active, .soft-toggle[aria-pressed="true"] { box-shadow: var(--press); background: var(--pressed); }
.soft-toggle-track { width: 46px; height: 26px; border-radius: 999px; background: var(--pressed); box-shadow: var(--press); position: relative; }
.soft-toggle-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink-soft); transition: left 0.15s ease; }
.soft-toggle[aria-pressed="true"] .soft-toggle-knob { left: 23px; background: var(--link); }
.code { margin-top: 1.4rem; background: var(--pressed); box-shadow: var(--press); border-radius: 18px; padding: 1.1rem 1.2rem; overflow-x: auto; font-family: var(--mono); font-size: 0.85rem; line-height: 1.6; color: var(--ink); max-width: 46rem; }

/* Panels */
.panel { background: var(--base); border: 2px solid transparent; border-radius: 24px; box-shadow: var(--raise); padding: clamp(1.2rem, 3vw, 1.9rem); }
.panel ul { padding-left: 1.2rem; }
.panel li { margin-bottom: 0.5rem; }
.panel--warn h2 { color: var(--warn); }
.checks { list-style: none; padding-left: 0 !important; }
.checks li { position: relative; padding-left: 2rem; }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.35rem; width: 1.1rem; height: 1.1rem; border-radius: 6px; background: var(--pressed); box-shadow: var(--press); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 1.4rem; background: var(--link); color: #ffffff; border: 2px solid var(--link); border-radius: 16px; box-shadow: var(--raise-sm); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--ink); border-color: var(--ink); color: #ffffff; }
.btn--quiet { background: var(--base); color: var(--ink); border-color: transparent; }
.btn--quiet:hover { background: var(--pressed); color: var(--ink); border-color: transparent; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }
.prose h2 { margin-top: 2.25rem; }
.prose ul { padding-left: 1.25rem; margin-top: 0.5rem; }
.prose li { margin-bottom: 0.45rem; }
.signup { display: grid; gap: 0.7rem; max-width: 26rem; margin-top: 1rem; }
.signup label { font-weight: 700; }
.signup input { padding: 0.7rem 1rem; border: 2px solid var(--ink-soft); border-radius: 14px; background: var(--pressed); box-shadow: var(--press); font: inherit; color: var(--ink); }
.signup button { justify-self: start; }

.site-footer { background: var(--dark); color: #ffffff; margin-top: 3rem; padding-block: 2.5rem 3rem; }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h2 { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky); margin-bottom: 0.5rem; }
.site-footer p { color: var(--on-dark); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: #ffffff; display: inline-block; padding-block: 0.3rem; }
.site-footer a:hover { color: var(--sky); }
.site-footer .fine { color: var(--on-dark); margin-top: 2rem; }
.site-footer :focus-visible { outline-color: var(--sky); box-shadow: 0 0 0 3px var(--dark); }

@media (prefers-contrast: more) {
  .card, .demo, .panel, .soft-btn, .soft-toggle { border-color: var(--ink-soft); }
}
@media (forced-colors: active) {
  .card, .demo, .panel, .soft-btn, .soft-toggle, .btn, .specs, .code, .site-nav a { border: 2px solid ButtonText; }
}
@media (prefers-reduced-motion: reduce) { .soft-toggle-knob { transition: none; } }