/* ============================================================
   JAISOL — Synapse Light design system (shared)
   ============================================================ */
:root{
  --bg: oklch(99.5% 0.003 250);
  --bg-2: oklch(97% 0.005 250);
  --bg-3: oklch(94.5% 0.008 250);
  --ink: oklch(20% 0.02 250);
  --ink-2: oklch(38% 0.015 250);
  --ink-3: oklch(58% 0.012 250);
  --line: oklch(91% 0.008 250);
  --line-2: oklch(86% 0.010 250);

  /* Google palette */
  --g-blue: oklch(58% 0.18 252);    /* #1A73E8 */
  --g-blue-2: oklch(52% 0.20 252);
  --g-blue-3: oklch(95% 0.04 252);
  --g-blue-4: oklch(40% 0.18 252);
  --g-red: oklch(60% 0.22 28);
  --g-yellow: oklch(82% 0.16 90);
  --g-green: oklch(64% 0.16 145);
}

html,body{
  background: var(--bg); color: var(--ink);
  font-family:'Google Sans','Inter','Noto Sans JP',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* Link reset (content pages don't load Tailwind preflight) */
a{ text-decoration: none; color: inherit; }
ul,ol{ list-style: none; margin: 0; padding: 0; }
*{ box-sizing: border-box; }
.font-jp{ font-family:'Noto Sans JP',system-ui,sans-serif; }
.font-mono{ font-family:'JetBrains Mono', ui-monospace, monospace; }
.font-serif-jp{ font-family:'Noto Serif JP', serif; }
.h-display{ font-family:'Google Sans','Inter'; font-weight:500; letter-spacing:-0.03em; }
.h-display-light{ font-family:'Google Sans','Inter'; font-weight:400; letter-spacing:-0.04em; }
.ink-2{ color: var(--ink-2); } .ink-3{ color: var(--ink-3); }
.g-blue{ color: var(--g-blue); }
.num{ font-feature-settings:"tnum"; }

/* ---- Surfaces ---- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow: 0 1px 2px rgba(60,80,140,0.04), 0 8px 28px -8px rgba(60,80,140,0.08);
}
.card-flat{ background:#fff; border:1px solid var(--line); border-radius:12px; }
.card-tint{ background: var(--g-blue-3); border:1px solid oklch(88% 0.05 252); border-radius:16px; }

/* ---- Chips ---- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border:1px solid var(--line); border-radius:999px;
  background:#fff; font-size:12px; color: var(--ink-2);
}
.chip .dot{ width:6px; height:6px; border-radius:50%; background: var(--g-blue); }
.chip-blue{ background: var(--g-blue-3); border-color: oklch(85% 0.06 252); color: var(--g-blue-4); }
.chip-red{ background: oklch(95% 0.04 28); color: var(--g-red); border-color: oklch(85% 0.06 28); }
.chip-yellow{ background: oklch(95% 0.06 90); color: oklch(50% 0.15 90); border-color: oklch(85% 0.08 90); }
.chip-green{ background: oklch(95% 0.05 145); color: var(--g-green); border-color: oklch(85% 0.07 145); }

/* ---- Buttons ---- */
.btn-primary{
  background: var(--g-blue); color:#fff; border-radius:999px; padding:12px 22px; font-weight:500;
  box-shadow: 0 1px 2px rgba(26,115,232,0.25), 0 6px 16px -4px rgba(26,115,232,0.4);
  transition: all .15s; display:inline-flex; align-items:center; gap:8px;
}
.btn-primary:hover{ box-shadow: 0 1px 2px rgba(26,115,232,0.3), 0 12px 24px -4px rgba(26,115,232,0.5); transform: translateY(-1px); }
.btn-tonal{
  background: var(--g-blue-3); color: var(--g-blue-4); border-radius:999px; padding:12px 22px;
  font-weight:500; border:1px solid oklch(88% 0.05 252); display:inline-flex; align-items:center; gap:8px;
}
.btn-tonal:hover{ background: oklch(92% 0.05 252); }
.btn-ghost{
  background: transparent; color: var(--ink); border-radius:999px; padding:12px 22px;
  border:1px solid var(--line-2); font-weight:500; display:inline-flex; align-items:center; gap:8px;
}
.btn-ghost:hover{ border-color: var(--g-blue); color: var(--g-blue); }
.btn-sm{ padding:8px 14px; font-size:12px; }

/* ---- Animations ---- */
.blink{ animation: blink 1.6s steps(2) infinite; }
@keyframes blink{ 50%{opacity:.25} }
.marquee{ animation: marquee 40s linear infinite; }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes riseIn{ from{ transform: translateY(16px) } to{ transform: translateY(0) } }
.reveal{ animation: riseIn .6s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce){ .reveal{ animation:none; } }

/* Hero glow blobs (Tailwind not loaded on content pages) */
.blob{ position:absolute; pointer-events:none; border-radius:50%; }
.blob-tl{ top:-90px; left:-90px; width:440px; height:440px; }
.blob-tr{ top:30px; right:-40px; width:340px; height:340px; }

/* ---- Glow blobs ---- */
.glow-blue{ background: radial-gradient(circle at 50% 50%, oklch(58% 0.18 252 / 0.4), transparent 70%); filter: blur(40px); }
.glow-yellow{ background: radial-gradient(circle at 50% 50%, oklch(82% 0.16 90 / 0.5), transparent 70%); filter: blur(40px); }
.glow-red{ background: radial-gradient(circle at 50% 50%, oklch(60% 0.22 28 / 0.4), transparent 70%); filter: blur(40px); }
.glow-green{ background: radial-gradient(circle at 50% 50%, oklch(64% 0.16 145 / 0.4), transparent 70%); filter: blur(40px); }

/* ---- Dotted grid ---- */
.dot-grid{
  background-image: radial-gradient(circle at 1px 1px, oklch(80% 0.01 250) 1px, transparent 0);
  background-size: 24px 24px;
}

/* ============================================================
   Inner-page chrome helpers
   ============================================================ */

/* Inner hero (replaces real site's h-[300px] blue particle banner) */
.inner-hero{
  position:relative; overflow:hidden;
  border-bottom:0;
}
.inner-hero .hero-pad{ max-width:1280px; margin:0 auto; padding: 72px 24px 56px; position:relative; }
.inner-hero .kicker{
  font-family:'JetBrains Mono', monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:0.18em; color: var(--ink-3); margin-bottom:14px;
}
.inner-hero h1{
  font-family:'Google Sans','Inter'; font-weight:400; letter-spacing:-0.04em;
  font-size: clamp(40px, 6vw, 76px); line-height:0.96;
}
.inner-hero .sub{ font-family:'Noto Sans JP',sans-serif; color: var(--ink-2); font-size:15px; margin-top:18px; max-width:54ch; }

/* Breadcrumb bar */
.crumb{
  max-width:1280px;
  margin:-22px auto 0;
  padding:0 24px;
  position:relative;
  z-index:2;
  background:transparent;
  border:0;
  font-family:'JetBrains Mono', monospace; font-size:11px; color: var(--ink-3);
}
.crumb .wrap{
  width:fit-content;
  max-width:100%;
  margin:0;
  padding:8px 13px;
  display:flex;
  align-items:center;
  gap:0;
  border:1px solid oklch(88% 0.018 250 / 0.8);
  border-radius:999px;
  background:oklch(100% 0 0 / 0.68);
  backdrop-filter:blur(12px);
  box-shadow:0 8px 28px -18px rgba(30,60,120,0.35);
}
.crumb a{ color: var(--ink-3); } .crumb a:hover{ color: var(--g-blue); }
.crumb .sep{ opacity:.35; margin:0 8px; }
.crumb .cur{ color: var(--ink-2); }

/* Page content container */
.page-wrap{ max-width: 1040px; margin:0 auto; padding: 72px 24px 96px; }
.page-wrap.wide{ max-width: 1180px; }

/* Section heading: mono index + display title */
.sec-head{ margin-bottom: 32px; }
.sec-head .idx{
  font-family:'JetBrains Mono', monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:0.16em; color: var(--ink-3); margin-bottom:10px; display:flex; align-items:center; gap:10px;
}
.sec-head .idx::before{ content:""; width:22px; height:1px; background: var(--g-blue); display:inline-block; }
.sec-head h2{
  font-family:'Google Sans','Inter'; font-weight:400; letter-spacing:-0.03em;
  font-size: clamp(28px, 3.4vw, 42px); line-height:1.02;
}
.sec-head .en{ font-style:italic; color: var(--g-blue); font-weight:500; }

/* Prose */
.prose-jp{ font-family:'Noto Sans JP',sans-serif; color: var(--ink-2); line-height:1.95; font-size:15px; }
.prose-jp p + p{ margin-top: 1.1em; }
.prose-jp strong, .prose-jp b{ color: var(--ink); font-weight:700; }
.prose-jp a{ color: var(--g-blue); text-decoration: underline; text-underline-offset:3px; text-decoration-color: oklch(85% 0.06 252); }
.prose-jp a:hover{ text-decoration-color: var(--g-blue); }

/* Spec table (会社概要 / recruit) */
.spec{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
.spec th, .spec td{ text-align:left; vertical-align:top; padding:18px 22px; border-top:1px solid var(--line); }
.spec tr:first-child th, .spec tr:first-child td{ border-top:none; }
.spec th{
  background: var(--bg-2); font-family:'Noto Sans JP',sans-serif; font-weight:700; color: var(--ink-2);
  width: 28%; white-space:nowrap;
}
.spec td{ color: var(--ink); font-family:'Noto Sans JP',sans-serif; line-height:1.9; }
.spec-wrap{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff;
  box-shadow: 0 1px 2px rgba(60,80,140,0.04), 0 8px 28px -8px rgba(60,80,140,0.08); }
@media (max-width: 720px){
  .spec th{ width:auto; display:block; white-space:normal; }
  .spec td{ display:block; border-top:none; padding-top:0; }
  .spec th{ border-top:1px solid var(--line); }
}

/* Pill links inside content */
.doc-link{
  display:inline-flex; align-items:center; gap:8px; color: var(--g-blue); font-weight:600;
  text-decoration:underline; text-underline-offset:4px; text-decoration-color: oklch(85% 0.06 252);
}
.doc-link:hover{ text-decoration-color: var(--g-blue); }

/* Accordion (理念 / flow) */
.acc{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.acc summary{
  list-style:none; cursor:pointer; padding:18px 22px; background: var(--bg-2);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:'Noto Sans JP',sans-serif; font-weight:700; color: var(--ink);
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ color: var(--g-blue); }
.acc summary .chev{ transition: transform .3s; color: var(--ink-3); flex:none; }
.acc[open] summary .chev{ transform: rotate(180deg); }
.acc .body{ padding: 22px; }

/* Numbered process step */
.step-num{
  width:40px; height:40px; border-radius:999px; display:grid; place-items:center;
  background: var(--g-blue); color:#fff; font-family:'Google Sans'; font-weight:600; flex:none;
  box-shadow: 0 4px 12px -2px rgba(26,115,232,0.5);
}

/* Footer (dark, matches "research" tone) */
.site-footer{ background:#0b1220; color:#cbd5e1; }
.site-footer a{ color:#93a4bd; transition: color .15s; }
.site-footer a:hover{ color:#fff; }

/* Utility */
.divide-line > * + *{ border-top:1px solid var(--line); }