/* idcc.center marketing site. Same palette as the app: 藍 indigo, 朱 vermilion accent. No JavaScript. */
:root {
  --ai: #1d3557;
  --ai-deep: #0f1b2d;
  --ai-2: #2b4c7e;
  --shu: #c0392b;
  --shu-2: #a93226;
  --ink: #1c1f24;
  --muted: #5b6370;
  --line: #e2e5ea;
  --paper: #fafaf7;
  --band: #f1f3f6;
  --card: #fff;
  --ok: #2e7d4f;
  --r: 12px;
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.8; font-size: 16px; }
a { color: var(--ai-2); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 780px; }
.center { text-align: center; justify-content: center; }
h1, h2, h3 { line-height: 1.4; letter-spacing: .01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .75rem; }
h3 { font-size: 1.08rem; margin: 0 0 .35rem; }
.lead { font-size: 1.06rem; color: #39404a; max-width: 68ch; margin: 0 0 1.75rem; }
.small { font-size: .85rem; color: var(--muted); margin: .2rem 0; }
.note { font-size: .9rem; color: var(--muted); margin-top: 1.25rem; }
section { padding: 4.5rem 0; }
.band { background: var(--band); }

/* header */
.top { position: sticky; top: 0; z-index: 10; background: rgba(15, 27, 45, .96); backdrop-filter: blur(6px); color: #fff; }
.bar { display: flex; align-items: center; gap: 1.25rem; min-height: 64px; flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem; }
.logo { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; }
.logo .mark { width: 36px; height: 36px; border-radius: 9px; background: #fff; color: var(--ai); display: grid; place-items: center; font: 700 1.3rem Georgia, serif; box-shadow: inset 0 -3px 0 var(--shu); }
.logo strong { display: block; font-size: 1.1rem; letter-spacing: .08em; }
.logo small { display: block; font-size: .68rem; opacity: .75; line-height: 1.2; }
.nav { display: flex; gap: .15rem; flex: 1; flex-wrap: wrap; }
.nav a { color: #cfd9e8; text-decoration: none; padding: .3rem .65rem; border-radius: 6px; font-size: .9rem; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.tools { display: flex; align-items: center; gap: .5rem; }
.lang { color: #cfd9e8; font-size: .88rem; text-decoration: none; padding: .3rem .5rem; }
.lang:hover { color: #fff; text-decoration: underline; }
@media (max-width: 900px) { .nav { display: none; } .bar { justify-content: space-between; } }
@media (max-width: 520px) { .tools .ghost { display: none; } .logo small { display: none; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem 1.1rem; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; line-height: 1.3; transition: background .15s, border-color .15s; }
.btn:hover { border-color: var(--ai-2); }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #f4a261; outline-offset: 2px; }
.btn.primary { background: var(--shu); border-color: var(--shu); color: #fff; }
.btn.primary:hover { background: var(--shu-2); border-color: var(--shu-2); }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn.outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn.outline:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.btn.lg { padding: .8rem 1.5rem; font-size: 1.02rem; }
.cta { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.5rem 0; }

/* hero */
.hero { color: #fff; padding: 6rem 0 5rem;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(192, 57, 43, .28), transparent 60%),
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(160deg, var(--ai-deep), var(--ai) 70%); }
.eyebrow { display: inline-block; font-size: .85rem; letter-spacing: .08em; color: #f6c7c1; border: 1px solid rgba(246, 199, 193, .4); padding: .2rem .7rem; border-radius: 999px; margin: 0 0 1.25rem; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); margin: 0 0 1.25rem; line-height: 1.3; font-weight: 800; word-break: keep-all; overflow-wrap: anywhere; }
.hero .lead { color: #d6deea; font-size: 1.12rem; }
.trust { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; color: #c8d3e3; font-size: .92rem; }
.trust li::before { content: "✓"; color: #7fd1a0; font-weight: 700; margin-right: .45rem; }

/* cards and grids */
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; }
.card p { margin: 0; color: #444b55; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; align-items: start; }

/* curriculum */
.tracks { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.track { display: grid; grid-template-columns: 3rem 1fr auto; gap: 1rem; align-items: start; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--belt, #ccc); border-radius: var(--r); padding: 1.1rem 1.25rem; }
.track .num { font: 700 1.25rem/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--muted); }
.track p { margin: 0; color: #444b55; }
.track .meta { font-size: .85rem; color: var(--muted); margin-top: .35rem; }
.track .tags { display: flex; flex-direction: column; gap: .35rem; align-items: flex-end; }
@media (max-width: 640px) { .track { grid-template-columns: 2.2rem 1fr; } .track .tags { grid-column: 2; flex-direction: row; align-items: center; flex-wrap: wrap; } }
.belt-white { --belt: #d5d9df; } .belt-yellow { --belt: #e9c46a; } .belt-green { --belt: #2e7d4f; }
.belt-blue { --belt: #2b6cb0; } .belt-brown { --belt: #8d5a3b; } .belt-black { --belt: #1c1f24; }
.tag { display: inline-block; font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; background: #eef1f5; color: var(--muted); }
.tag.ready { background: #e3f3e9; color: var(--ok); }
.tag.partial { background: #fff4dc; color: #8a6200; }
.tag.free { background: #fdecea; color: var(--shu-2); }

/* dark band */
.dark { background: var(--ai-deep); color: #fff; }
.dark .lead { color: #c8d3e3; }
.checks { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.checks li { padding: .3rem 0 .3rem 1.7rem; position: relative; }
.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.dark .checks li::before { color: #7fd1a0; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1rem; align-items: stretch; }
.plan { display: flex; flex-direction: column; }
.plan ul { padding-left: 1.1rem; margin: 1rem 0 1.25rem; font-size: .92rem; color: #444b55; flex: 1; }
.plan .btn { margin-top: auto; }
.plan.featured { border: 2px solid var(--ai-2); box-shadow: 0 10px 30px rgba(29, 53, 87, .12); }
.price { font-size: 1.9rem; font-weight: 800; color: var(--ai); margin: .4rem 0 .1rem !important; line-height: 1.2; }
.price span { font-size: .85rem; font-weight: 500; color: var(--muted); margin-left: .15rem; }
.price.sm { font-size: 1.25rem; }

/* faq */
details { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: .9rem 1.2rem; margin: .6rem 0; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: .6rem 0 0; color: #444b55; }

/* contact */
.contact { background: linear-gradient(160deg, var(--ai), var(--ai-deep)); color: #fff; }
.contact .lead { color: #d6deea; margin-left: auto; margin-right: auto; }
.contact .small { color: #aab6c8; }

/* legal */
.legal { width: 100%; border-collapse: collapse; background: #fff; }
.legal th, .legal td { border: 1px solid var(--line); padding: .8rem 1rem; text-align: left; vertical-align: top; }
.legal th { width: 30%; background: var(--band); font-weight: 600; }
@media (max-width: 600px) { .legal th, .legal td { display: block; width: 100%; } }

/* footer */
.foot { background: var(--ai-deep); color: #aab6c8; padding: 2rem 0; font-size: .9rem; }
.foot a { color: #dfe7f3; }
.foot p { margin: .2rem 0; }

/* ------------------------------------------------------------------ motion (CSS only; the site's CSP forbids scripts)
   Everything below runs only for visitors who haven't asked for reduced motion, and content
   is fully visible without it (reveals are progressive enhancement behind @supports). */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before, .hero::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
/* scanning line that sweeps down the threat grid */
.hero::before { left: 0; right: 0; top: 0; height: 140px; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(127, 209, 160, .10) 70%, rgba(127, 209, 160, .35) 100%);
  border-bottom: 1px solid rgba(127, 209, 160, .45); }
/* slow-breathing vermilion glow */
.hero::after { width: 620px; height: 620px; right: -160px; top: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 57, 43, .35), transparent 65%); filter: blur(10px); }
.hero h1 .accent { color: #ffb4a8; }

@media (prefers-reduced-motion: no-preference) {
  .hero { animation: grid-drift 40s linear infinite; }
  .hero::before { animation: scan 7s cubic-bezier(.45, 0, .55, 1) infinite 1.2s; }
  .hero::after { animation: breathe 9s ease-in-out infinite; }
  .hero .eyebrow, .hero h1, .hero .lead, .hero .cta, .hero .trust { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero h1 { animation-delay: .08s; } .hero .lead { animation-delay: .18s; }
  .hero .cta { animation-delay: .28s; } .hero .trust { animation-delay: .4s; }
  .eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #7fd1a0;
    margin-right: .5rem; vertical-align: .1em; animation: live 2s ease-in-out infinite; }

  /* button shine sweep */
  .btn.primary { position: relative; overflow: hidden; }
  .btn.primary::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transition: transform .6s; }
  .btn.primary:hover::after { transform: translateX(120%) skewX(-20deg); }
  .btn { transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
  .btn:hover { transform: translateY(-1px); }
  .btn.primary:hover { box-shadow: 0 6px 18px rgba(192, 57, 43, .35); }

  /* cards lift; tracks glow in their belt colour */
  .card, .track { transition: transform .2s, box-shadow .2s, border-color .2s; }
  .card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(29, 53, 87, .10); }
  .track:hover { transform: translateX(4px); box-shadow: -6px 0 18px -8px var(--belt); }
  details[open] p { animation: rise .35s ease both; }

  /* scroll reveals where the browser supports scroll-driven animations */
  @supports (animation-timeline: view()) {
    .grid3 > *, .grid2 > *, .plans > *, .tracks > li, .split > *, details {
      animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes grid-drift { to { background-position: 0 0, 0 320px, 320px 0, 0 0; } }
@keyframes scan { 0% { transform: translateY(-140px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: .9; } 100% { transform: translateY(var(--scan-end, 760px)); opacity: 0; } }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .75; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes reveal { from { opacity: 0; transform: translateY(24px); } }
@keyframes live { 50% { opacity: .25; } }

/* privacy policy and other long legal pages */
.legal-doc { max-width: 1000px; }
.legal-doc h1 { font-size: 2rem; }
.legal-doc h2 { font-size: 1.25rem; margin: 2.25rem 0 .6rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.legal-doc .meta { color: var(--muted); font-size: .9rem; }
.legal-doc ul ul { margin: .3rem 0; }
.legal-doc li { margin: .25rem 0; }
.table-wrap { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.table-wrap table { border-collapse: collapse; width: 100%; min-width: 820px; font-size: .9rem; }
.table-wrap th, .table-wrap td { padding: .7rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table-wrap th { background: var(--band); font-weight: 600; white-space: nowrap; }
.table-wrap tr:last-child td { border-bottom: 0; }