/* FIREマッチング — ダークLPテーマ（共有）
   方針：濃紺〜ほぼ黒のダーク・紺基調＋暖色アクセント1色（CTAのみ）・写真なし・幾何グリッド装飾。
   既存トークン（DESIGN.md）をダーク向けに再ポイント。 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root{
  /* base */
  --bg:#080b11;            /* ページ背景：ほぼ黒の紺 */
  --bg-2:#0c111a;          /* 帯・セクション */
  --surface:#111824;       /* カード面 */
  --surface-2:#161f2d;     /* 一段明るい面 */
  --ink:#eef3fa;           /* 本文（オフホワイト） */
  --muted:#8a97aa;         /* 補助 */
  --faint:#5a6678;         /* さらに薄い */
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  /* 紺（ブランド） */
  --primary:#1e3a5f; --primary-strong:#16304f; --primary-soft:#16243a;
  --primary-bright:#3f6ea3;   /* ダーク上で映える紺ハイライト */

  /* 暖色アクセント（変更なし） */
  --accent:#ee7b3c; --accent-strong:#d96a2e; --accent-soft:#2a1c12;
  --accent-bright:#ff9a5c;

  --radius:18px; --radius-sm:11px; --radius-lg:26px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --shadow:0 18px 50px rgba(0,0,0,.5);
  --glow:0 0 0 1px rgba(255,154,92,.0), 0 18px 60px rgba(238,123,60,.18);
  --font:"Inter","Noto Sans JP",-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;

  /* テーマ対応トークン（ライトで上書き） */
  --card:linear-gradient(180deg,var(--surface),#0f1622); /* カード面（暗いグラデ） */
  --chip:rgba(255,255,255,.02);        /* ごく薄い面（チップ等） */
  --overlay-weak:rgba(255,255,255,.04); /* 弱い白オーバーレイ→ライトでは黒透過に */
  --nav-bg:rgba(8,11,17,.72);          /* ナビ背景（半透明） */
  --field-bg:rgba(0,0,0,.22);          /* 入力欄の背景→ライトでは白 */
}

/* ── ライトテーマ（data-theme=light。auto は JS で light/dark に解決） ── */
:root[data-theme="light"]{
  --bg:#f5f8fc; --bg-2:#eef2f7; --surface:#ffffff; --surface-2:#f3f6fa;
  --ink:#16202c; --muted:#5a6776; --faint:#8794a3;
  --line:rgba(16,32,44,.10); --line-2:rgba(16,32,44,.16);
  --primary-soft:#eef3f9;
  --shadow-sm:0 1px 2px rgba(16,32,44,.06), 0 4px 14px rgba(16,32,44,.07);
  --shadow:0 18px 50px rgba(16,32,44,.14);
  --accent-soft:#fdf0e7;
  --card:#ffffff;
  --chip:rgba(16,32,44,.025);
  --overlay-weak:rgba(16,32,44,.05);
  --nav-bg:rgba(255,255,255,.82);
  --field-bg:#ffffff;
}
[data-theme="light"] body{
  background-image:
    radial-gradient(900px 520px at 78% -8%, rgba(63,110,163,.10), transparent 60%),
    radial-gradient(700px 480px at 8% 4%, rgba(30,58,95,.05), transparent 55%),
    linear-gradient(rgba(16,32,44,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,32,44,.04) 1px, transparent 1px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);
  line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* 幾何グリッド：細いドット＋うっすら線、紺のラジアルグロー */
  background-image:
    radial-gradient(900px 520px at 78% -8%, rgba(63,110,163,.20), transparent 60%),
    radial-gradient(700px 480px at 8% 4%, rgba(30,58,95,.30), transparent 55%),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:auto, auto, 32px 32px, 32px 32px;
  background-position:0 0, 0 0, -1px -1px, -1px -1px;
}
::selection{background:rgba(238,123,60,.28)}
a{color:inherit;text-decoration:none}

/* ── ユーティリティ ───────────────────────── */
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-bright)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.mono{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;letter-spacing:.02em}
.muted{color:var(--muted)}
.kicker-line{height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}

/* ── ナビ ───────────────────────── */
.nav{
  position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
  padding:14px 24px;background:var(--nav-bg);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav .home{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px;letter-spacing:.01em}
.nav .home .mark{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:14px;
  background:linear-gradient(150deg,var(--accent),var(--accent-strong));box-shadow:0 4px 14px rgba(238,123,60,.4)
}
.nav .lnk{color:var(--muted);font-size:13px;font-weight:600;padding:7px 12px;border-radius:9px;transition:.14s}
.nav .lnk:hover{color:var(--ink);background:var(--overlay-weak)}
.nav-right{display:flex;align-items:center;gap:10px}
.theme-switch{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line-2);border-radius:999px;background:var(--overlay-weak)}
.theme-switch button{border:none;background:transparent;cursor:pointer;font-size:13px;line-height:1;padding:5px 8px;border-radius:999px;color:var(--muted);transition:.14s}
.theme-switch button:hover{color:var(--ink)}
.theme-switch button[aria-pressed="true"]{background:var(--primary-bright);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
:root[data-theme="light"] .theme-switch button[aria-pressed="true"]{background:#cdd6e1;color:var(--ink);box-shadow:0 1px 2px rgba(16,32,44,.14)}

/* ── ボタン ───────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-size:15px;font-weight:700;border:none;cursor:pointer;
  border-radius:12px;padding:13px 20px;transition:transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s
}
.btn.cta{background:linear-gradient(150deg,var(--accent),var(--accent-strong));color:#1a1206;box-shadow:0 10px 30px rgba(238,123,60,.32)}
.btn.cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(238,123,60,.42)}
.btn.ghost{background:var(--overlay-weak);border:1px solid var(--line-2);color:var(--ink)}
.btn.ghost:hover{border-color:var(--primary-bright);background:rgba(63,110,163,.12)}
.btn .arr{transition:transform .14s}
.btn:hover .arr{transform:translateX(3px)}

/* ── カード ───────────────────────── */
.card{
  position:relative;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)
}

/* ── フッター ───────────────────────── */
.foot{margin-top:56px;padding:26px 0;border-top:1px solid var(--line);text-align:center}
.foot a{font-size:12px;color:var(--faint)}
.foot a:hover{color:var(--muted)}