/* cybermitai.com — public site.
   Own design language. Deliberately NOT the product console stylesheet:
   this is a marketing surface, not a suite component. No third-party assets,
   no webfont host, no script — the page is pure HTML + this file. */

/* ---------- tokens ---------- */
:root {
  /* surfaces */
  --bg:            #0a0611;
  --shell:         #0d0814;
  --surface:       #150e20;
  --surface-2:     #1d1329;
  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* brand */
  --violet:        #7b2ff7;
  --violet-lit:    #a855f7;
  --violet-deep:   #3b0d63;
  --orchid:        #e6a2ee;

  /* text */
  --text:          #f5f1fa;
  --text-muted:    #c2b6d1;
  --text-dim:      #8d80a0;

  /* status (product availability, nothing else) */
  --live:          #52d6a4;
  --wip:           #e3b341;
  --planned:       #8d80a0;

  /* geometry */
  --shell-max:     1680px;
  --radius-lg:     28px;
  --radius-md:     16px;
  --radius-pill:   999px;

  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  /* Japanese: system faces only. No webfont host — see the header comment. */
  --font-jp: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo,
             "MS PGothic", sans-serif;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 20px;
  min-height: 100vh;
  overflow-x: hidden;   /* no sideways scroll on any phone; nothing here is sticky */
  font-family: var(--font-sans);
  color: var(--text);
  background:
    radial-gradient(1100px 620px at 78% -10%, #6d21c4 0%, rgba(109, 33, 196, 0) 62%),
    radial-gradient(900px 700px at 4% 12%, #45108a 0%, rgba(69, 16, 138, 0) 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

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

/* the inset rounded page card */
.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--shell);
  border: 1px solid var(--border);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 26px 26px 120px;
  background: linear-gradient(168deg, #1a0b2e 0%, #14091f 55%, #0d0814 100%);
}

/* angular light shards — decorative, aria-hidden in the markup */
.shard {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
}

.shard-l {
  top: -6%;
  left: -8%;
  width: 46%;
  height: 118%;
  background: linear-gradient(135deg, #8b3fe0 0%, #4c1490 55%, rgba(76, 20, 144, 0) 100%);
  clip-path: polygon(0 0, 62% 0, 100% 46%, 34% 100%, 0 74%);
}

.shard-r {
  top: -18%;
  right: -10%;
  width: 52%;
  height: 128%;
  background: linear-gradient(210deg, #b06be8 0%, #5a1aa5 48%, rgba(90, 26, 165, 0) 92%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 58% 82%, 0 30%);
}

.shard-fade {
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(120% 80% at 50% 20%, rgba(13, 8, 20, 0) 30%, var(--shell) 100%);
  opacity: 0.9;
}

/* the glowing orb sitting behind the nav */
.orb {
  position: absolute;
  z-index: 0;
  top: 34px;
  left: 50%;
  width: 76px;
  height: 76px;
  margin-left: -38px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, var(--orchid) 38%, #c561e0 100%);
  box-shadow: 0 0 70px 24px rgba(230, 162, 238, 0.35);
}

/* the vertical kana watermark down the right edge of the hero.
   Outlined, not filled — a colour is set as well so it still reads if a
   browser ignores -webkit-text-stroke. */
.kana {
  position: absolute;
  z-index: 0;
  top: 18%;
  right: 5%;
  pointer-events: none;
  user-select: none;
  writing-mode: vertical-rl;
  white-space: nowrap;   /* vertical text wraps into a SECOND COLUMN, not a second line */
  font-family: var(--font-jp);
  font-size: clamp(1.5rem, 2.1vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.05);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.17);
}

.kana-mark {
  font-family: var(--font-jp);
  letter-spacing: 0.14em;
  color: var(--text-dim);
}

/* ---------- nav ---------- */
.nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 12px 14px 12px 24px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: #000000;
}

.brand {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-decoration: none;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav-links a:hover { color: var(--text); }

.nav-spacer { flex: 1 1 auto; min-width: 0; }

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* language switch — a link, not a button: it changes the page, it is not an action */
.lang-link {
  padding: 0 8px;
  font-size: 15px;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.lang-link:hover { color: var(--text); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.btn:active { transform: translateY(1px); }

.btn-light {
  background: #f3eef8;
  color: #17091f;
}
.btn-light:hover { background: #ffffff; }

.btn-glass {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.18); }

.btn-dark {
  background: #100a1a;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-dark:hover { background: #1b1129; }

.btn-sm { padding: 9px 16px; font-size: 13px; }

/* ---------- hero copy ---------- */
.hero-body {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  /* was 150px top; the mark now occupies most of that gap under the nav */
  padding: 60px 16px 0;
  text-align: center;
}

/* A hero with no .hero-mark (the diary post) would start its text right on the
   orb, which sits at the top of the hero. Push it down so the eyebrow and
   title clear the glow — roughly where the mark would have ended. */
.hero-body-text { padding-top: 138px; }


/* the company mark, centred under the black nav pill. img is display:block
   from the reset, so the auto side margins are what centre it. */
.hero-mark {
  width: clamp(124px, 15.5vw, 220px);
  height: auto;
  margin: 0 auto 34px;
}

.eyebrow {
  margin: 0 0 26px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dim);
}

h1 {
  margin: 0;
  font-size: clamp(2.4rem, 6.4vw, 4.2rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h1 strong {
  display: block;
  font-weight: 700;
}

.hero-sub {
  max-width: 620px;
  margin: 26px auto 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 38px;
}

/* ---------- sections ---------- */
.section {
  padding: 88px 48px;
  border-top: 1px solid var(--border);
}

.section-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.section h2 {
  margin: 0 0 14px;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.section-lead {
  max-width: 780px;
  margin: 0 0 44px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---------- product cards ---------- */
.cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card {
  min-width: 0;
  /* Equal heights, no forced shape. Grid items stretch to the row by default
     and the row is sized from the tallest card, so all three match whatever
     the longest copy needs. Nothing here pins an aspect ratio any more.
     Do NOT add align-items: start to .cards — it opts each card out of the
     row and they go back to three different heights.
     Do NOT add overflow: hidden — a card must grow, not clip; the line that
     would vanish is nFW's not-sold disclosure. */
  display: flex;
  flex-direction: column;
  /* Centred composition. This also keeps the status pill shrink-to-fit — a
     column flex parent stretches its children across the cross axis, which
     would smear the chip across the whole card. */
  align-items: center;
  text-align: center;
  padding: 26px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 100%);
}

.card h3 {
  margin: 0 0 6px;
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card-role {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.card p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--text-muted);
}

/* Paragraphs would otherwise be sized to their content by align-items: center
   and break lines unevenly between cards. */
.card > p { align-self: stretch; }

/* The chip opts out of the centred composition and sits top-left, where a
   status marker is looked for. align-self also keeps it shrink-to-fit: the
   column flex parent would otherwise stretch it across the whole card. */
.card > .status { align-self: flex-start; }

/* Two auto margins, one here and one on the CTA, split the square's free space
   evenly between them — that is what floats the mark to the middle of the card
   while still pinning the CTA to the floor. A single auto margin would not:
   flex-grow claims free space first, so anything growing above starves it. */
.card-logo {
  flex: none;
  width: clamp(88px, 9.5vw, 152px);
  height: clamp(88px, 9.5vw, 152px);
  margin-top: auto;
  margin-bottom: 16px;
}

/* Fixed gap above the CTA, because the auto margin below collapses to zero the
   moment the copy fills the card — which is exactly when the button would
   otherwise end up welded to the last line of nFW's disclosure. */
.card > p:last-of-type { margin-bottom: 16px; }

.card-cta {
  align-self: flex-end;
  margin-top: auto;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--planned);
}

/* Unused while nXDR is labelled In Development. Kept deliberately — this is
   the state it returns to when it ships, not a leftover to be tidied away. */
.status-live::before  { background: var(--live); }
.status-build::before { background: var(--wip); }
.status-home::before  { background: var(--orchid); }

/* nFW is not a product. It sits in the product grid at the user's explicit
   request (2026-09-21); the dashed border and flatter surface now carry the
   distinction the full-width layout used to, alongside the "not sold" label
   that stays the first thing in the card. Do not remove these as well. */
.card-home {
  background: rgba(255, 255, 255, 0.025);
  border-style: dashed;
}

.card p strong {
  color: var(--text);
  font-weight: 600;
}

/* Used by the product pages for the "this is not for sale" statement. Removed
   once when the home page dropped its only .note; restored 2026-09-21. */
.note {
  margin: 0;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.note strong { color: var(--text); font-weight: 600; }

/* ---------- dev diary ---------- */
/* Unused until the first post ships. Kept deliberately: the entry markup is in
   CLAUDE.md §7, and writing a post should be copy-paste, not a design job. */
.entries {
  margin: 0;
  padding: 0;
  list-style: none;
}

.entry {
  padding: 28px 0;
  border-top: 1px solid var(--border);
}

.entry:first-child {
  padding-top: 0;
  border-top: 0;
}

.entry-meta {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.entry h3 {
  margin: 0 0 10px;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  /* violet + underline kept for emphasis; the real link is "Read entry" below */
  color: var(--violet-lit);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
/* the title is also a link: it keeps the h3's violet + underline look */
.entry h3 a {
  color: inherit;
  text-decoration: none;
}

.entry p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* A screenshot inside a post. Width-capped by the figure, never by the image
   attributes, so a wide capture cannot push the page sideways. */
.shot {
  margin: 30px 0;
  padding: 0;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  /* stronger frame + shadow: the console captures are near-black and would
     otherwise bleed into the page background */
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.shot figcaption {
  margin-top: 10px;
  font-size: 0.89rem;
  line-height: 1.6;
  color: var(--text-dim);
}

/* ---------- principles ---------- */
.list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.list h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
}

.list p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.62;
  color: var(--text-muted);
}

/* ---------- contact ---------- */
.contact-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ---------- footer ---------- */
.footer {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 28px 32px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-dim);
}

.footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.footer a { text-decoration: none; }
.footer a:hover { color: var(--text); }

/* ---------- Japanese ----------
   Same layout, different typography. Japanese needs more leading, no negative
   tracking, and no synthetic light weight — system JA faces have no 300, so a
   300 renders as 400 in one browser and as a smeared fake-light in another. */
html[lang="ja"] body {
  font-family: var(--font-jp);
  line-break: strict;
}

html[lang="ja"] h1 {
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: 0.01em;
  font-size: clamp(2rem, 4.6vw, 3.3rem);
}

html[lang="ja"] .hero-sub,
html[lang="ja"] .section-lead,
html[lang="ja"] .card p,
html[lang="ja"] .note,
html[lang="ja"] .entry p,
html[lang="ja"] .shot figcaption,
html[lang="ja"] .list p {
  line-height: 1.9;
}

html[lang="ja"] .section h2 {
  letter-spacing: 0.01em;
  line-height: 1.4;
}

html[lang="ja"] .eyebrow,
html[lang="ja"] .card-role {
  font-family: var(--font-jp);
  letter-spacing: 0.16em;
}

html[lang="ja"] .brand { letter-spacing: 0.14em; }

/* the footer mark carries the OTHER script on each page, so it opts out */
.kana-mark:lang(en) {
  font-family: var(--font-sans);
  letter-spacing: 0.08em;
}

/* ---------- narrow widths ---------- */
@media (max-width: 860px) {
  body { padding: 10px; }
  .hero { padding: 16px 16px 80px; }
  .hero-body { padding-top: 40px; }
  .hero-body-text { padding-top: 116px; }
  .nav { gap: 16px; padding: 12px 14px; }
  .nav-spacer { display: none; }
  .nav-cta { width: 100%; }
  .section { padding: 64px 20px; }
  .footer { padding: 24px 20px; }
  .footer-links { margin-left: 0; }
  .kana { display: none; }   /* it would sit under the headline at this width */
}

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

/* ---------- single-page overrides ---------- */
/* This page has no product pages to link to, so the cards carry no CTA. The
   two auto margins that positioned the mark and the button then have nothing
   to balance against, and the mark would sink to the bottom of the card.
   Centre the stack instead. */
/* Top-aligned, not centred: centring lets each card's copy length move its
   chip, mark and title up or down, so three cards with two- and three-line
   descriptions end up out of line. From the top, chip, mark, title and role
   sit on the same lines in every card; only the text below them differs. */
.card { justify-content: flex-start; }
.card-logo { margin-top: 0; }
.card > p:last-of-type { margin-bottom: 0; }

/* A card may carry a button (nXDR's "Dev diary"). If it sat in the centred
   stack it would make that one card's content taller and shift its chip, mark
   and copy up out of line with the others. So every card reserves the same
   strip at the bottom, and the button is pinned into that strip — outside the
   stack. Cards with no button keep the empty strip, which is what keeps all
   three compositions identical. */
.card {
  position: relative;
  padding-bottom: 74px;
}
.card-cta {
  position: absolute;
  right: 22px;
  bottom: 20px;
  margin: 0;
}

/* the nav link for the section currently on screen (set by js/main.js) */
.nav-links a.is-current { color: var(--text); }

/* ── Dev diary: a readable column for long text ─────────────────── */
.prose {
  max-width: 760px;
  margin: 0 auto;
}
.prose p {
  margin: 0 0 18px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-muted);
}
.prose h2 {
  margin: 44px 0 14px;
}
/* The section already pads its top; a heading that opens it needs no more. */
.prose > h2:first-child { margin-top: 0; }
.back-link {
  display: inline-block;
  margin-top: 26px;
  font-size: 14px;
  color: var(--text-muted);
}
.shot-narrow {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.steps {
  margin: 0 0 22px;
  padding-left: 1.3em;
  display: grid;
  gap: 12px;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.steps strong { color: var(--text); }

/* ── Image zoom (js/main.js opens .zoom links in a lightbox) ─────── */
.zoom {
  display: block;
  cursor: zoom-in;
}
.lightbox {
  max-width: 96vw;
  max-height: 96vh;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: zoom-out;
}
.lightbox::backdrop {
  background: rgba(5, 2, 10, 0.88);
}
.lightbox img {
  display: block;
  /* a little under the dialog's own cap, so the border never forces scrollbars */
  max-width: calc(96vw - 2px);
  max-height: calc(96vh - 2px);
  width: auto;
  height: auto;
}

/* Diary entries: a visible way into each post, not only a hover state. */
.entry-more {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--violet-lit);
  text-decoration: none;
}
.entry-more:hover { text-decoration: underline; }

/* Disclaimer on attack write-ups: meant to be seen, not skimmed past, so it
   uses the brand violet with a heavy left rule rather than the quiet .note. */
.disclaimer {
  margin: 0 0 18px;
  padding: 20px 22px;
  border: 1px solid var(--violet-lit);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: rgba(123, 47, 247, 0.12);            /* fallback: old iOS Safari */
  background: color-mix(in srgb, var(--violet) 12%, transparent);
}
.disclaimer p {
  margin: 0 0 12px;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--text);
}
.disclaimer p:last-child { margin-bottom: 0; }
.disclaimer + :not(.disclaimer) { margin-top: 40px; }
.disclaimer .disclaimer-label {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--violet-lit);
}

/* Share button (diary posts only). Native share sheet on mobile; copy-link
   fallback on desktop — wired in js/main.js, no inline handler. */
.share {
  margin: 44px 0 0;
  text-align: center;
}
.share-btn {
  cursor: pointer;
}

/* ── Page change animation ──────────────────────────────────────────
   Cross-document view transitions: pure CSS, no script, so the CSP is
   untouched. Both pages must load this stylesheet to opt in — they do.
   Browsers without support just navigate normally. */
@view-transition {
  navigation: auto;
}
@keyframes page-out {
  to { opacity: 0; transform: translateY(-10px); }
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(14px); }
}
::view-transition-old(root) {
  animation: page-out 0.22s ease-in both;
}
::view-transition-new(root) {
  animation: page-in 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}