/* Chainoptic — Swiss industrial on coal. Contrast lock v5: professional .pr-panel pages. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+JP:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap");

:root {
  --co-coal: #0b0a0a;
  --co-coal-2: #141210;
  --co-ink: #efe6df;
  --co-muted: #c9b8ae;
  --co-ember: #e23a28;
  --co-ember-2: #f06a52;
  --color-text: #efe6df;
  --color-surface: #141210;
  --color-bg: #0b0a0a;
  --color-navy-text: #efe6df;
  --color-navy: #efe6df;
  --color-accent: #e23a28;
  --header-height: 76px;
}

html,
body {
  background: var(--co-coal) !important;
  color: var(--co-ink) !important;
  font-family: "IBM Plex Sans JP", "Syne", sans-serif !important;
  letter-spacing: 0.01em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, .hero-title, .heading-xl, .heading-top {
  font-family: Syne, "IBM Plex Sans JP", sans-serif !important;
  letter-spacing: -0.035em;
  line-height: 0.95 !important;
  text-wrap: balance;
}

.hero-title {
  font-weight: 800 !important;
  font-size: clamp(2.6rem, 8vw, 6.4rem) !important;
}

.heading-xl {
  font-size: clamp(1.8rem, 4.4vw, 3.4rem) !important;
}

.pillar-label,
.mega-group-title,
.mega-col-title,
.col-title,
.group-title,
.case-kind-label,
time {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

.site-header {
  background: color-mix(in srgb, var(--co-coal) 88%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--co-ember) 32%, transparent) !important;
  backdrop-filter: blur(10px);
}

.site-header .container.inner {
  max-width: 1280px;
}

.site-header a,
.nav button,
.nav a {
  color: var(--co-ink) !important;
}

.logo img {
  height: 28px !important;
  width: auto !important;
  filter: none !important;
}

.btn,
a.btn,
button.btn,
.header-cta,
.pillar-btn,
.banner-btn,
.news-more {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background: transparent !important;
  color: var(--co-ink) !important;
  border: 1px solid color-mix(in srgb, var(--co-ember) 70%, #efe6df) !important;
  border-radius: 2px !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--co-coal) 40%, transparent) !important;
  font-family: "IBM Plex Mono", "IBM Plex Sans JP", monospace !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  transition: color 280ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 180ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}

.btn::after,
a.btn::after,
button.btn::after,
.header-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--co-ember);
  transform: translateY(101%);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.btn:hover,
a.btn:hover,
button.btn:hover,
.header-cta:hover {
  color: #fff7f4 !important;
  filter: none !important;
  transform: translateY(-1px);
}

.btn:hover::after,
a.btn:hover::after,
button.btn:hover::after,
.header-cta:hover::after {
  transform: translateY(0);
}

.btn:active,
a.btn:active {
  transform: scale(0.98);
}

.btn:focus-visible,
a.btn:focus-visible,
.nav a:focus-visible,
.nav button:focus-visible {
  outline: 2px solid var(--co-ember-2);
  outline-offset: 3px;
}

.top-hero,
.section,
.surface,
.ai-section,
.jisseki-section,
.cases-section,
.knowledge-section,
.research-section,
.news-section,
.company-section {
  background: transparent !important;
}

.top-hero {
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(48px, 8vw, 96px) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--co-ember) 22%, transparent);
}

.hero-lead,
.mission-body,
.section-lead {
  max-width: 38rem;
  color: var(--co-muted) !important;
  line-height: 1.75 !important;
  font-size: 1.02rem !important;
}

.pillars,
.cases-grid,
.knowledge-grid,
.banners {
  gap: clamp(16px, 3vw, 28px) !important;
}

.pillar,
.banner,
.case-card,
.knowledge-grid li,
.news-row,
.company-table {
  background: var(--co-coal-2) !important;
  border: 1px solid color-mix(in srgb, #efe6df 8%, transparent) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #efe6df 6%, transparent) !important;
  border-radius: 4px !important;
}

.case-card:hover,
.knowledge-grid a:hover,
.news-row:hover {
  border-color: color-mix(in srgb, var(--co-ember) 45%, transparent) !important;
  transform: translateY(-2px);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.mega-panel {
  background: #100e0d !important;
  border-top: 1px solid color-mix(in srgb, var(--co-ember) 28%, transparent) !important;
}

.site-footer,
.site-subfooter {
  background: #090808 !important;
  color: var(--co-muted) !important;
  border-top: 1px solid color-mix(in srgb, var(--co-ember) 20%, transparent);
}

.site-footer a {
  color: var(--co-ink) !important;
}

.logo-wall img {
  filter: none !important;
  opacity: 1 !important;
  -webkit-filter: none !important;
}

html { scroll-behavior: smooth; }

.section-lead + *,
.mission-body {
  text-wrap: pretty;
}

.company-table th,
.company-table td,
.news-row time {
  font-variant-numeric: tabular-nums;
}

.site-footer .col-title,
.mega-col-title {
  color: color-mix(in srgb, var(--co-ember) 70%, var(--co-ink)) !important;
}

@media (max-width: 768px) {
  .hero-title { font-size: clamp(2.2rem, 12vw, 3.2rem) !important; }
  .top-hero { min-height: 100dvh; padding-inline: 16px !important; }
}

.company-logo img { width: min(300px, 100%) !important; height: auto !important; background:#0b0a0a; }
.pillar-visual img, .pillar img[src*="co-staff"] { filter: none !important; }

.mission-wave { min-height: 220px; width: 100%; }
#mission-wave-canvas { width: 100% !important; min-height: 220px; display: block; }

/* Studio inner pages: cream ink on leftover #fff / #fafafa was unreadable. */
.apnl,
.prose-body .apnl,
[style*="--pb:#fff"],
[style*="--pb:#FFF"],
[style*="--pb:#FFFFFF"],
[style*="--pb:#fafafa"],
[style*="--pb:#FAFAFA"] {
  --pb: #141210 !important;
}

.apnl,
.faq-section,
.wa-feat,
.blog-section,
.blog-spa,
.blog-cloud_platform,
.blog-firebase,
.blog-mcp,
.column-section,
.step-band,
.prose div.step-band,
.plan,
.faq-list li,
.wa-card,
.column-article-card,
.incident-cards li,
.takumi-feature-card,
.target-grid li,
.chip,
.items-table tbody td,
.items-table tbody th,
.kanten-rows td,
.kanten-rows th,
.prose .kanten-rows td,
.prose .kanten-rows th {
  background: #141210 !important;
}

.faq-q p,
.faq-a p,
.wa-h2,
.wa-lead,
.wa-ft-body,
.wa-pain-lead,
.wa-pain-note,
.items-head h2,
.items-note p,
.tfc-desc,
.prose h2,
.prose p,
.prose-body p,
.ablk h2,
.ablk p {
  color: var(--co-ink) !important;
}

.items-table tbody th,
.kanten-rows th,
.prose .kanten-rows th,
.prose h3,
.item-group h3 {
  color: var(--co-ember) !important;
}

.hero-band h1,
.hero-band .lead,
.section-crimson .heading-top,
.dark-band,
.dark-band h2,
.dark-band p {
  color: #fff7f4 !important;
}

.items-table th,
.items-table td,
.kanten-rows th,
.kanten-rows td,
.faq-list li,
.takumi-feature-card {
  border-color: color-mix(in srgb, #efe6df 12%, transparent) !important;
}

/* v5 — professional pages: .pr-panel uses inline --pbg #fff/#fafafa/#F2F2F2
   plus cream --color-navy-text. v4 only locked .apnl/.prose/.faq/.wa-feat. */
.pr-panel[style*="--pbg:#FFF"],
.pr-panel[style*="--pbg:#fff"],
.pr-panel[style*="--pbg:#FFFFFF"],
.pr-panel[style*="--pbg:#fafafa"],
.pr-panel[style*="--pbg:#FAFAFA"],
.pr-panel[style*="--pbg:#F2F2F2"],
.pr-panel[style*="--pbg:#f2f2f2"],
.pr-panel[style*="--pbg:transparent"],
.pr-panel[style*="--pbg: transparent"],
.pr-panel[style*="--pbgm:#FFF"],
.pr-panel[style*="--pbgm:#fff"],
.pr-panel[style*="--pbgm:#FFFFFF"],
.pr-panel[style*="--pbgm:#fafafa"],
.pr-panel[style*="--pbgm:#F2F2F2"] {
  --pbg: #141210 !important;
  --pbgm: #141210 !important;
  background: #141210 !important;
}

.pr-feat,
.pr-plan,
.pr-plan-body,
.pr-steps li,
.pr-services a,
.pr-table tbody td,
.pr-table tbody th.lab,
.pr-table1 tbody td,
.pr-blog,
.cta-section,
.sample-report,
.ablk,
[class*="prose-penetration"],
[class*="prose-"] .ablk {
  background: #141210 !important;
}

.t-h2,
.t-body,
.t-body-b,
.t-rich,
.t-note,
.t-note-tight,
.pr-feat-b,
.pr-sc-rich,
.pr-sc-rich p,
.pr-rich,
.pr-rich p,
.pr-plan-rich,
.pr-plan-rich p,
.pr-step-t,
.pr-step-p,
.pr-svc-desc,
.pr-svc-name,
.pr-blog-title,
.pr-blog-card,
.cta-lead,
.sample-report h2,
.prose-penetration_test,
.prose-penetration_test p,
.prose-penetration_test h2,
[class*="prose-"] p,
[class*="prose-"] h2,
.ablk,
.ablk li {
  color: var(--co-ink) !important;
}

.pr-feat-t,
.pr-sc-h,
.t-h3,
.t-rich-b,
.t-rich-b p {
  color: var(--co-ember) !important;
}

.pr-table tbody td,
.pr-table1 tbody td,
.pr-table tbody th.lab,
.pr-services a,
.pr-plan {
  border-color: color-mix(in srgb, #efe6df 12%, transparent) !important;
}

.pr-table thead th,
.pr-table1 thead th {
  background: var(--co-ember) !important;
  color: #fff7f4 !important;
}

.pr-panel[style*="D22550"] .t-h1,
.pr-panel[style*="D22550"] .t-lead,
.pr-panel[style*="D22550"] .t-h2w,
.pr-panel[style*="D22550"] .t-bodyw {
  color: #fff7f4 !important;
}