/* Leviathan landing page — Panopticon theme mapped onto Washi primitives. */

:root {
  /* Brand glyph: the coiled leviathan, used as a mask so any tile size
     paints it in a single flat colour. */
  --lv-serpent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 56 56'%3E%3Cpath fill='black' d='M24.92 13.8 C25.78 13.75 28.38 13.32 30.05 13.52 C31.73 13.72 33.45 14.27 34.97 15.01 C36.49 15.75 37.93 16.81 39.17 17.97 C40.41 19.13 41.52 20.53 42.41 21.98 C43.29 23.43 44.04 25.05 44.5 26.68 C44.97 28.31 45.26 30.09 45.2 31.77 C45.15 33.46 44.82 35.26 44.17 36.8 C43.52 38.35 42.51 39.9 41.3 41.05 C40.1 42.2 38.51 43.19 36.93 43.71 C35.35 44.23 33.47 44.42 31.83 44.16 C30.2 43.9 28.43 43.17 27.14 42.16 C25.84 41.14 24.65 39.6 24.08 38.07 C23.51 36.55 23.33 34.57 23.71 33 C24.09 31.43 25.12 29.67 26.36 28.67 C27.59 27.67 29.55 26.96 31.12 27 C32.7 27.04 35.03 28.6 35.81 28.92 C35.1 28.06 32.26 25.01 30.1 24.76 C27.94 24.51 24.88 25.74 23.12 27.24 C21.35 28.74 19.95 31.44 19.49 33.77 C19.03 36.09 19.44 38.99 20.36 41.21 C21.29 43.43 23.11 45.63 25.05 47.09 C27 48.54 29.61 49.57 32.02 49.94 C34.44 50.32 37.19 50.06 39.54 49.33 C41.88 48.6 44.24 47.2 46.08 45.56 C47.92 43.92 49.51 41.72 50.57 39.49 C51.64 37.25 52.27 34.65 52.48 32.17 C52.69 29.69 52.41 27.05 51.83 24.62 C51.25 22.19 50.25 19.76 49 17.59 C47.75 15.42 46.15 13.34 44.34 11.61 C42.54 9.88 40.41 8.32 38.17 7.21 C35.94 6.09 33.42 5.28 30.95 4.93 C28.49 4.57 24.64 5.06 23.38 5.09 A4.42 4.42 0 0 1 24.92 13.8 Z M32.65 4.01 C31.78 4.05 29.11 3.87 27.41 4.21 C25.71 4.56 23.88 5.35 22.45 6.08 C21.02 6.82 19.62 7.91 18.84 8.64 C18.05 9.37 17.71 9.93 17.73 10.45 C17.75 10.97 18.03 11.23 18.97 11.76 C19.91 12.29 21.68 13.34 23.36 13.64 C25.03 13.94 27.27 13.96 29.03 13.57 C30.79 13.18 33.1 11.68 33.91 11.3 Z M22.66 10.92A1.75 1.75 0 1 1 26.16 10.92A1.75 1.75 0 1 1 22.66 10.92Z'/%3E%3C/svg%3E");
  --ink: #172b4d;
  --ink-2: #66788a;
  --paper: #f3f6fa;
  --paper-2: #edf5fb;
  --paper-3: #e2f0fa;
  --card: #ffffff;
  --accent: #0c78c9;
  --accent-2: #0967ad;
  --jade: #218838;
  --jade-2: #196b2b;
  --murasaki: #0c78c9;
  --murasaki-2: #0967ad;
  --gold: #b36b00;
  --gold-2: #8c5300;
  --muted: #75879a;
  --line: #dfe7ef;
  --accent-soft: rgba(12, 120, 201, 0.10);
  --jade-soft: rgba(47, 179, 68, 0.11);
  --murasaki-soft: rgba(34, 184, 207, 0.12);
  --gold-soft: rgba(245, 159, 0, 0.12);
  --ink-soft: rgba(7, 28, 51, 0.055);
  --font-display: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 8px;
  --r-lg: 12px;
  --shadow: 0 8px 25px rgba(23, 43, 77, 0.045);
  --shadow-lg: 0 13px 30px rgba(23, 43, 77, 0.08);
  --container: 1180px;
}

[data-theme="sumi"] {
  --paper: #071c33;
  --paper-2: #0d2946;
  --paper-3: #123a5f;
  --card: #0c2641;
  --ink: #f4f8fb;
  --ink-2: #b9c9d7;
  --muted: #91a7ba;
  --line: #274966;
  --accent: #3ea6e8;
  --accent-2: #69bbed;
  --jade: #66c777;
  --gold: #ffbd4a;
  --murasaki: #45c4d8;
  --ink-soft: rgba(255, 255, 255, 0.07);
  --shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.28);
}

body {
  background-image: radial-gradient(circle at 90% -5%, rgba(34, 184, 207, 0.15) 0, transparent 32rem);
  font-size: 0.9375rem;
  line-height: 1.65;
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid rgba(12, 120, 201, 0.3);
  outline-offset: 2px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  /* washi.css aligns header children on the baseline, which hangs the
     brand tile above the wordmark now that the mark is a single glyph. */
  align-items: center;
  min-height: 64px;
  padding-block: 0;
  background: color-mix(in srgb, var(--card) 96%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(7, 28, 51, 0.08);
  box-shadow: 0 1px 8px rgba(23, 43, 77, 0.03);
}

.lv-brand-link { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--ink); text-decoration: none; }
.lv-brand-link:hover { color: var(--accent); text-decoration: none; }
.lv-brand-name { font-weight: 700; letter-spacing: -0.02em; }
.lv-brand-mark {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  vertical-align: middle;
  background: linear-gradient(145deg, #071c33, #124c77);
  box-shadow: 0 5px 12px rgba(7, 28, 51, 0.18);
}
/* The coiled leviathan is masked in rather than inlined as markup, so the
   one path lives in a single place and every tile size shares it. */
.lv-brand-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  -webkit-mask: var(--lv-serpent) center / 100% 100% no-repeat;
          mask: var(--lv-serpent) center / 100% 100% no-repeat;
}
.nav { gap: 0.35rem; }
.nav a { padding: 0.55rem 0.75rem; border: 0; border-radius: 8px; font-weight: 500; }
.nav a:hover { background: var(--paper-2); color: var(--accent); border: 0; }

.btn {
  border-width: 1px;
  border-color: #c8d5e1;
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
.btn:hover { border-color: var(--accent); background: var(--paper-2); color: var(--accent); }
.btn-primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.btn-primary:hover { border-color: var(--accent-2); background: var(--accent-2); color: #fff; }
.btn-ghost { background: transparent; }

.hero { padding-block: clamp(4.25rem, 9vw, 7rem); text-align: left; }
.hero::before { content: none; }
.hero p { max-width: 65ch; margin-inline: 0; }
.hero .cluster { justify-content: flex-start; margin-top: var(--sp-5); }
.eyebrow {
  color: #54718b;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.display { color: #071c33; font-size: clamp(2.5rem, 5vw, 4.4rem); letter-spacing: -0.052em; line-height: 1.03; }
[data-theme="sumi"] .display { color: var(--ink); }
.lead { color: var(--ink-2); font-size: 1.05rem; }
.lv-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.lv-hero-art { display: flex; justify-content: center; }
.lv-hero-preview {
  width: 100%;
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
  border: 1px solid rgba(7, 28, 51, 0.08);
  border-radius: 16px;
  background: linear-gradient(120deg, var(--card) 35%, var(--paper-2));
  box-shadow: 0 22px 60px rgba(23, 43, 77, 0.12);
}
.lv-preview-head { display: flex; align-items: center; gap: 0.6rem; color: var(--ink-2); font-size: 0.78rem; }
.lv-health-dot { width: 10px; height: 10px; border-radius: 50%; background: #2fb344; box-shadow: 0 0 0 6px rgba(47, 179, 68, 0.10); }
.lv-preview-live { margin-left: auto; padding: 0.35rem 0.65rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.lv-preview-metric { display: flex; flex-direction: column; margin-block: 2rem 1.25rem; }
.lv-preview-metric span { color: #071c33; font-size: clamp(3rem, 7vw, 5rem); line-height: 1; letter-spacing: -0.055em; }
[data-theme="sumi"] .lv-preview-metric span { color: var(--ink); }
.lv-preview-metric small { color: var(--ink-2); }
.lv-preview-chart { position: relative; height: 90px; overflow: hidden; border-bottom: 1px solid var(--line); }
.lv-preview-chart::before, .lv-preview-chart::after { position: absolute; inset-inline: 0; content: ""; }
.lv-preview-chart::before { top: 14px; height: 52px; background: linear-gradient(165deg, transparent 48%, rgba(34,184,207,.18) 49% 77%, transparent 78%); }
.lv-preview-chart::after { top: 44px; height: 2px; background: linear-gradient(165deg, transparent 0 13%, var(--accent) 14% 24%, transparent 25% 34%, var(--accent) 35% 47%, transparent 48% 58%, var(--accent) 59% 70%, transparent 71% 80%, var(--accent) 81% 100%); }
.lv-preview-stats { display: flex; gap: 1.5rem; margin-top: 1rem; color: var(--ink-2); font-size: 0.76rem; }
.lv-preview-stats strong { color: var(--ink); font-size: 1rem; }

.lv-section { padding-block: clamp(2.75rem, 6vw, 5rem); }
.rule { justify-content: flex-start; margin-bottom: 2rem; color: #54718b; font-size: 0.69rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.rule::before { display: none; }
.rule::after { max-width: 80px; background: var(--accent); }
.card {
  border: 1px solid rgba(7, 28, 51, 0.08);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.card-accent, .card-jade, .card-violet, .card-gold { border-top-width: 1px; }
.card-hover:hover { border-color: rgba(12, 120, 201, 0.22); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card-title { color: #071c33; font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; }
[data-theme="sumi"] .card-title { color: var(--ink); }
.lv-card-dot { width: 10px; height: 10px; border-radius: 50%; }
.lv-card-dot-blue { background: #0c78c9; }
.lv-card-dot-green { background: #2fb344; }
.lv-card-dot-cyan { background: #22b8cf; }
.lv-card-dot-amber { background: #f59f00; }
.badge { border: 0; border-radius: 999px; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; text-transform: none; }
.badge-jade { color: #218838; background: rgba(47, 179, 68, 0.11); }
.badge-gold { color: #b36b00; background: rgba(245, 159, 0, 0.12); }
.stat { padding: 1.2rem; border: 1px solid rgba(7, 28, 51, 0.08); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); }
.stat-num { color: #071c33; font-family: var(--font-body); font-size: 2rem; letter-spacing: -0.04em; }
[data-theme="sumi"] .stat-num { color: var(--ink); }
.stat-label { letter-spacing: 0.08em; }

.lv-tool .card-body { padding-top: 0.9rem; }
.lv-tool p { margin: 0.4rem 0 0; font-size: 0.92rem; }
.lv-tool .card-header { align-items: flex-start; }

.lv-depths {
  padding: clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
  border: 1px solid rgba(7, 28, 51, 0.08);
  border-radius: 16px;
  background: linear-gradient(145deg, #071c33, #124c77);
  color: #f4f8fb;
  box-shadow: 0 20px 55px rgba(7, 28, 51, 0.2);
}
.lv-depths h2, .lv-depths h3 { color: #fff; }
.lv-depths .eyebrow { color: #7ed8e6; }
.lv-depths .lead { color: #c7d7e3; }
.lv-session { padding: 1.25rem 1.4rem; overflow-x: auto; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(0,0,0,.2); color: #eaf2f7; font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.9; }
.lv-session .p { color: #55c7e2; }
.lv-session .k { color: #ffbd4a; }
.lv-session .d { color: #91a7ba; }
.lv-session .j { color: #66c777; }

.lv-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.lv-steps li { counter-increment: step; position: relative; min-height: 2rem; margin-bottom: 1.1rem; padding-left: 3rem; }
.lv-steps li::before { position: absolute; top: -2px; left: 0; display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; content: counter(step); }
.lv-cta-band { text-align: center; }
.lv-cta-band .display { margin-bottom: 0.75rem; }
.lv-cta-mark {
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  margin: 0 auto 1.75rem;
  border-radius: 22px;
  box-shadow: 0 22px 44px rgba(7, 28, 51, 0.22);
}
.site-footer { border-top: 1px solid var(--line); background: var(--card); }

@media (max-width: 900px) {
  .site-header { flex-wrap: wrap; padding-block: 0.75rem; }
  .nav { width: 100%; overflow-x: auto; }
  .nav a, .nav button { flex: 0 0 auto; }
  .lv-hero-grid { grid-template-columns: 1fr; }
  .lv-hero-art { order: -1; }
  .lv-hero-preview { max-width: 520px; }
}

@media (max-width: 620px) {
  .nav a:not(.btn), #lv-theme-btn { display: none; }
  .nav { width: auto; margin-left: auto; }
  .hero { padding-top: 2.5rem; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .lv-preview-stats { flex-direction: column; gap: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}