/* strassen.ai — shared design system ("operating room, not AI magic").
   Dark navy base, white typography, status accents used only with meaning:
   cyan = identity/route, lime = verified/complete, amber = policy/deployment,
   violet = context/research, red = liveness/risk. */

:root {
  --bg: #071019;
  --bg-2: #0a131e;
  --panel: rgba(15, 27, 40, .82);
  --panel-solid: #0f1b28;
  --ink: #f5f8fb;
  --ink-2: #c5cfda;
  --muted: #9eabb9;
  --dim: #7f8c9b;
  --line: rgba(156, 180, 204, .18);
  --line-strong: rgba(156, 180, 204, .34);
  --cyan: #4adeff;
  --lime: #9cff43;
  --amber: #ffbd45;
  --violet: #8b6cff;
  --red: #ff5158;
  --radius: 20px;
  --max: 1240px;
  --header-h: 72px;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 6%, rgba(74, 222, 255, .09), transparent 27rem),
    radial-gradient(circle at 12% 38%, rgba(139, 108, 255, .08), transparent 30rem),
    linear-gradient(180deg, #071019 0%, #08111b 47%, #071019 100%);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 75%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 75%);
  z-index: -1;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink); }
button { font: inherit; cursor: pointer; }
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4, p { margin: 0; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; border-radius: 10px; background: var(--lime); color: #071019; font-weight: 700;
}
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.shell { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.section { padding: 112px 0; position: relative; }
.section-tight { padding: 80px 0; }
.eyebrow {
  display: inline-flex; gap: 10px; align-items: center; margin: 0 0 18px;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--cyan);
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.eyebrow.lime { color: var(--lime); }
.eyebrow.amber { color: var(--amber); }
.eyebrow.violet { color: var(--violet); }
.eyebrow.red { color: var(--red); }
.headline { font-size: clamp(34px, 4.8vw, 66px); line-height: 1.12; letter-spacing: -.04em; font-weight: 900; }
.headline .nowrap { white-space: nowrap; }
.section-title { max-width: 900px; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.14; letter-spacing: -.035em; font-weight: 800; }
.section-title.wide { max-width: 1120px; }
.lead { margin: 24px 0 0; max-width: 760px; color: var(--ink-2); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.9; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.button-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.button {
  display: inline-flex; min-height: 50px; padding: 0 22px; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 255, 255, .02);
  color: var(--ink); font-weight: 700; line-height: 1.3; text-align: center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-2px); border-color: var(--cyan); background: rgba(74, 222, 255, .06); color: var(--ink); }
.button.primary { background: var(--lime); border-color: var(--lime); color: #071019; }
.button.primary:hover { background: #afff6c; color: #071019; }
.button.small { min-height: 44px; padding-inline: 17px; font-size: 14px; }
.button[disabled] { opacity: .6; cursor: progress; transform: none; }
.tag {
  display: inline-flex; align-items: center; min-height: 30px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 11px;
  color: var(--muted); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.tag.lime { color: var(--lime); border-color: rgba(156, 255, 67, .45); }
.tag.cyan { color: var(--cyan); border-color: rgba(74, 222, 255, .45); }
.tag.amber { color: var(--amber); border-color: rgba(255, 189, 69, .45); }
.tag.violet { color: var(--violet); border-color: rgba(139, 108, 255, .45); }
.tag.red { color: var(--red); border-color: rgba(255, 81, 88, .45); }

/* Announcement + header */
.announcement {
  position: relative; z-index: 12; min-height: 38px; display: grid; place-items: center; padding: 8px 16px;
  border-bottom: 1px solid rgba(156, 255, 67, .18); background: rgba(156, 255, 67, .07); color: #d9ffc3; text-align: center; font-size: 13px;
}
.announcement strong { color: var(--lime); letter-spacing: .08em; }
.announcement a { text-decoration: underline; text-underline-offset: 3px; }
.header { position: sticky; top: 0; z-index: 10; height: var(--header-h); border-bottom: 1px solid var(--line); background: rgba(7, 16, 25, .84); backdrop-filter: blur(18px); }
.nav { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: .08em; }
.brand-mark { width: 12px; height: 12px; border: 2px solid var(--cyan); transform: rotate(45deg); box-shadow: 0 0 18px rgba(74, 222, 255, .55); flex: none; }
.nav-links { display: flex; align-items: center; gap: 24px; color: #b9c5d1; font-size: 14px; font-weight: 600; }
.nav-links a:hover { color: var(--ink); }
.menu-button { display: none; background: none; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-height: 44px; }

/* Cards & grids */
.card {
  position: relative; min-height: 200px; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(20, 35, 50, .82), rgba(11, 21, 31, .76)); overflow: hidden;
}
.card::before { content: ""; position: absolute; top: 0; left: 0; width: 55px; height: 2px; background: var(--cyan); }
.card.amber::before { background: var(--amber); }
.card.violet::before { background: var(--violet); }
.card.lime::before { background: var(--lime); }
.card.red::before { background: var(--red); }
.card-num { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.card h3 { margin: 40px 0 8px; font-size: 22px; letter-spacing: -.02em; }
.card p { color: var(--muted); font-size: 14px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* Footer */
footer.site-footer { padding: 58px 0 35px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.footer-brand p { margin-top: 14px; color: var(--muted); max-width: 350px; font-size: 14px; }
.footer-col strong { display: block; margin-bottom: 14px; font-size: 13px; }
.footer-col a { display: block; padding: 6px 0; color: var(--muted); font-size: 13px; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 50px; padding-top: 22px; border-top: 1px solid var(--line); color: #8a98a8; font-size: 12px; }
.footer-bottom address { font-style: normal; }

/* Subpage article layout */
.article { padding: 72px 0 96px; }
.article-inner { width: min(760px, calc(100% - 48px)); margin-inline: auto; }
.article h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.2; letter-spacing: -.03em; font-weight: 800; margin: 12px 0 14px; }
.article h2 { font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.02em; margin: 44px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.article p, .article li { color: var(--ink-2); font-size: 16px; }
.article p + p { margin-top: 14px; }
.article ul { padding-left: 1.3em; margin: 10px 0; }
.article li { margin: 6px 0; }
.article a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.article .meta { color: var(--dim); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
.article .address-block { margin: 18px 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .02); font-style: normal; line-height: 1.9; }
.article .address-block strong { color: var(--ink); }

@media (max-width: 1050px) {
  .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  :root { --header-h: 64px; }
  .shell { width: min(100% - 28px, var(--max)); }
  .section { padding: 80px 0; }
  .section-tight { padding: 64px 0; }
  .announcement { font-size: 12px; line-height: 1.5; }
  .nav-links {
    display: none; position: absolute; top: calc(var(--header-h) + 8px); left: 14px; right: 14px; padding: 12px; flex-direction: column; align-items: stretch; gap: 0;
    border: 1px solid var(--line); border-radius: 16px; background: #0b1621; box-shadow: 0 25px 60px rgba(0, 0, 0, .38);
  }
  .nav-links.open { display: flex; }
  /* Sub-pages with a short static link row: keep it inline in the header instead of the dropdown box. */
  .nav-links.nav-inline {
    display: flex; position: static; flex-direction: row; align-items: center; gap: 16px; padding: 0;
    border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 13px;
  }
  .nav-links.nav-inline a { display: inline-flex; align-items: center; padding: 0 4px; min-height: 44px; }
  .nav-links.nav-inline .button { margin: 0; }
  .nav-links a { padding: 12px 10px; min-height: 44px; }
  .nav-links .button { margin: 6px 0; }
  .menu-button { display: block; }
  .cards-2, .cards-3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .button-row .button { width: 100%; }
}
/* Narrow phones (<=360px): the inline sub-page nav plus the brand overflowed by ~25px at 320px (Hayato, 2026-09-17). */
/* The English header carries seven nav items with longer labels than Japanese. Right after the
   780px breakpoint hands the row back to the inline desktop nav, 781px and 782px were 2px and 1px
   too narrow for them (measured 781-1100px: only those two widths overflowed). Tighten the gap for
   that narrow band only; Japanese pages and every other width keep 24px. */
@media (min-width: 781px) and (max-width: 800px) {
  html[lang="en"] .nav-links { gap: 20px; }
}
@media (max-width: 360px) {
  .nav { gap: 12px; }
  .brand { letter-spacing: .02em; gap: 8px; }
  .nav-links.nav-inline { gap: 6px; font-size: 12px; }
  .nav-links.nav-inline a { padding: 0 2px; }
  .nav-links.nav-inline .mono { font-size: 11px !important; letter-spacing: 0 !important; }
  .nav-links.nav-inline .button.small { padding: 8px 10px; font-size: 12px; }
}
@media (max-width: 480px) {
  .headline { font-size: 42px; }
  .section-title { font-size: 33px; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}