:root {
  --jc-ink: #102033;
  --jc-ink-2: #17334f;
  --jc-muted: #627086;
  --jc-line: rgba(17, 51, 84, .13);
  --jc-teal: #0f766e;
  --jc-green: #22c55e;
  --jc-cyan: #06b6d4;
  --jc-blue: #2563eb;
  --jc-violet: #7c3aed;
  --jc-orange: #f97316;
  --jc-red: #dc2626;
  --jc-soft: #ecfeff;
  --jc-paper: rgba(255,255,255,.88);
  --jc-shadow: 0 1.5rem 3.4rem rgba(16,32,51,.11);
  --jc-radius: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  color: var(--jc-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% -8%, rgba(34,197,94,.25), transparent 30rem),
    radial-gradient(circle at 88% 0%, rgba(6,182,212,.22), transparent 28rem),
    radial-gradient(circle at 50% 105%, rgba(124,58,237,.16), transparent 32rem),
    linear-gradient(135deg, #f8fafc 0%, #ffffff 42%, #eff6ff 100%);
  overflow-x: hidden;
}
a { color: var(--jc-teal); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--jc-blue); }
.content-wrap { max-width: 1180px; }
.content-narrow { max-width: 920px; }

.site-header { backdrop-filter: blur(18px); }
.jc-navbar {
  background: rgba(255,255,255,.76);
  border-bottom: 1px solid var(--jc-line);
  box-shadow: 0 .75rem 2.2rem rgba(16,32,51,.05);
}
.navbar-toggler { border: 0; box-shadow: none !important; }
.nav-link { font-weight: 750; color: var(--jc-ink-2); }
.nav-link.active, .nav-link:hover { color: var(--jc-teal); }
.dropdown-menu {
  border: 1px solid var(--jc-line);
  border-radius: 18px;
  padding: .55rem;
  box-shadow: var(--jc-shadow);
}
.dropdown-item { border-radius: 12px; padding: .58rem .75rem; font-weight: 650; }
.dropdown-item:hover { background: #ecfeff; color: var(--jc-teal); }

.brand-orb {
  width: 46px; height: 46px; border-radius: 15px;
  display: inline-grid; place-items: center;
  color: white; font-weight: 900; letter-spacing: -.04em;
  background: conic-gradient(from 210deg, var(--jc-teal), var(--jc-green), var(--jc-cyan), var(--jc-blue), var(--jc-teal));
  box-shadow: 0 .9rem 2rem rgba(15,118,110,.26), inset 0 0 0 1px rgba(255,255,255,.32);
  position: relative; isolation: isolate;
}
.brand-orb::after {
  content: ""; position: absolute; inset: 6px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.45); opacity: .75;
}
.brand-orb span { position: relative; z-index: 1; }
.brand-orb--small { width: 38px; height: 38px; border-radius: 12px; font-size: .85rem; }
.brand-copy { line-height: 1; display: inline-flex; flex-direction: column; letter-spacing: -.02em; color: var(--jc-ink); }
.brand-copy strong { font-size: 1rem; }
.brand-copy em { font-size: .78rem; color: var(--jc-muted); font-style: normal; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }

.btn-jc {
  border: 0; border-radius: 999px; color: #fff !important;
  font-weight: 850; letter-spacing: -.01em;
  background: linear-gradient(135deg, var(--jc-teal), var(--jc-blue));
  box-shadow: 0 .85rem 2rem rgba(37,99,235,.2);
}
.btn-jc:hover { transform: translateY(-1px); filter: saturate(1.1) brightness(1.03); }
.btn-ghost {
  border: 1px solid rgba(15,118,110,.22); border-radius: 999px; font-weight: 800;
  background: rgba(255,255,255,.72); color: var(--jc-ink-2);
}
.btn-ghost:hover { background: #fff; border-color: rgba(37,99,235,.3); color: var(--jc-blue); }

.hero {
  position: relative; overflow: hidden; padding: clamp(4rem, 8vw, 7rem) 0 4rem;
}
.hero::before {
  content: ""; position: absolute; width: 70rem; height: 70rem; left: 45%; top: -45rem;
  background: radial-gradient(circle, rgba(34,197,94,.26), transparent 54%), radial-gradient(circle at 30% 70%, rgba(37,99,235,.18), transparent 38%);
  filter: blur(4px); pointer-events: none;
}
.hero-kicker, .section-eyebrow {
  display: inline-flex; gap: .55rem; align-items: center;
  color: var(--jc-teal); font-size: .78rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .09em;
}
.hero-kicker::before, .section-eyebrow::before {
  content: ""; width: .75rem; height: .75rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--jc-green), var(--jc-cyan));
  box-shadow: 0 0 0 .3rem rgba(34,197,94,.12);
}
.hero-title {
  font-size: clamp(2.7rem, 7vw, 6.6rem);
  line-height: .95; letter-spacing: -.07em;
  font-weight: 950;
  margin-bottom: 1.25rem;
}
.hero-title .gradient-text, .gradient-text {
  background: linear-gradient(135deg, var(--jc-teal), var(--jc-blue), var(--jc-violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { font-size: clamp(1.1rem, 2vw, 1.38rem); color: var(--jc-muted); line-height: 1.55; max-width: 780px; }
.hero-grid {
  display: grid; grid-template-columns: 1.04fr .96fr; gap: 2rem; align-items: center; position: relative; z-index: 1;
}
@media (max-width: 991.98px) { .hero-grid { grid-template-columns: 1fr; } .hero { padding-top: 3rem; } }

.signal-board {
  position: relative; min-height: 430px; border-radius: 34px; padding: 1.2rem;
  background: linear-gradient(135deg, rgba(255,255,255,.74), rgba(236,254,255,.86));
  border: 1px solid var(--jc-line); box-shadow: var(--jc-shadow); overflow: hidden;
}
.signal-board::before {
  content: ""; position: absolute; inset: -2px;
  background: radial-gradient(circle at 20% 12%, rgba(34,197,94,.24), transparent 26%), radial-gradient(circle at 82% 30%, rgba(37,99,235,.2), transparent 28%);
  pointer-events: none;
}
.orbit {
  position: absolute; inset: 2.4rem; border: 1px dashed rgba(15,118,110,.25); border-radius: 50%;
  animation: slowspin 36s linear infinite;
}
.orbit:nth-child(2) { inset: 5.2rem; animation-duration: 48s; animation-direction: reverse; border-color: rgba(37,99,235,.2); }
@keyframes slowspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit { animation: none; } html { scroll-behavior: auto; } }
.node {
  position: absolute; width: 118px; min-height: 92px; border-radius: 24px; display: grid; place-items: center; text-align: center;
  padding: .8rem; font-weight: 900; line-height: 1.08; color: var(--jc-ink);
  background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 .9rem 2rem rgba(16,32,51,.12);
}
.node i { display: block; color: var(--jc-teal); font-size: 1.35rem; margin-bottom: .35rem; }
.node--excel { left: 6%; top: 11%; }
.node--jde { right: 8%; top: 15%; }
.node--identity { left: 13%; bottom: 14%; }
.node--ai { right: 13%; bottom: 12%; }
.node--center {
  width: 172px; min-height: 148px; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #ffffff, #ecfeff);
}
.node--center strong { font-size: 1.22rem; display: block; }
@media (max-width: 500px) {
  .signal-board { min-height: 470px; }
  .node { width: 104px; font-size: .86rem; }
  .node--center { width: 148px; }
}

.stat-strip { margin-top: 2.2rem; }
.stat-card, .glass-card, .article-card, .product-card, .callout, .step-card {
  background: var(--jc-paper); border: 1px solid var(--jc-line); border-radius: var(--jc-radius); box-shadow: var(--jc-shadow);
}
.stat-card { padding: 1.1rem 1.2rem; height: 100%; }
.stat-number { font-size: 1.9rem; line-height: 1; font-weight: 950; letter-spacing: -.05em; color: var(--jc-teal); }
.stat-label { color: var(--jc-muted); font-weight: 650; }

.section-pad { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section-title { font-weight: 950; letter-spacing: -.045em; line-height: 1.02; }
.section-lead { color: var(--jc-muted); font-size: 1.08rem; line-height: 1.65; }

.article-card { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; height: 100%; text-decoration: none; color: inherit; transition: .18s ease; }
.article-card:hover { transform: translateY(-4px); color: inherit; border-color: rgba(15,118,110,.28); }
.article-card .icon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(15,118,110,.12), rgba(37,99,235,.12)); color: var(--jc-teal); font-size: 1.3rem; }
.article-card h3 { font-size: 1.08rem; font-weight: 900; letter-spacing: -.02em; margin: 0; }
.article-card p { color: var(--jc-muted); margin: 0; line-height: 1.55; }
.card-link { font-weight: 900; color: var(--jc-teal); margin-top: auto; }

.product-card { padding: 1.1rem; height: 100%; position: relative; overflow: hidden; }
.product-card::after { content: ""; position: absolute; width: 8rem; height: 8rem; right: -4rem; top: -4rem; border-radius: 50%; background: rgba(34,197,94,.12); }
.product-card h3 { font-size: 1.05rem; font-weight: 900; margin-bottom: .35rem; }
.product-card p { color: var(--jc-muted); font-size: .94rem; line-height: 1.55; }
.product-card a { font-weight: 900; }

.article-hero { padding: clamp(3.2rem, 6vw, 5.5rem) 0 2.4rem; position: relative; overflow: hidden; }
.article-hero::before { content:""; position:absolute; inset:-10rem -8rem auto 50%; height:28rem; border-radius:50%; background:radial-gradient(circle, rgba(6,182,212,.24), transparent 63%); }
.article-shell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; }
.article-main { min-width: 0; }
.article-body {
  background: rgba(255,255,255,.86); border: 1px solid var(--jc-line); border-radius: 30px;
  box-shadow: var(--jc-shadow); padding: clamp(1.25rem, 3vw, 2.4rem);
}
.article-body h2 { font-weight: 950; letter-spacing: -.035em; margin: 2rem 0 .8rem; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-weight: 900; letter-spacing: -.025em; margin: 1.5rem 0 .65rem; }
.article-body p, .article-body li { color: #334155; line-height: 1.72; font-size: 1.025rem; }
.article-body strong { color: var(--jc-ink); }
.article-body blockquote {
  margin: 1.6rem 0; padding: 1rem 1.2rem; border-left: 5px solid var(--jc-teal);
  background: linear-gradient(135deg, rgba(236,254,255,.7), rgba(240,253,244,.68)); border-radius: 0 18px 18px 0;
  color: var(--jc-ink-2); font-size: 1.12rem; font-weight: 800; line-height: 1.48;
}
.article-body .lead-paragraph { font-size: 1.18rem; color: var(--jc-ink-2); }
.article-sidebar { position: sticky; top: 92px; }
@media (max-width: 991.98px) { .article-shell { grid-template-columns: 1fr; } .article-sidebar { position: static; } }

.toc-card { padding: 1.1rem; }
.toc-card .toc-title { font-weight: 950; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--jc-teal); margin-bottom: .75rem; }
.toc-card a { display:block; padding:.45rem 0; color: var(--jc-muted); text-decoration: none; font-weight: 700; border-bottom: 1px solid rgba(17,51,84,.08); }
.toc-card a:hover { color: var(--jc-teal); }

.callout { padding: 1.25rem; margin: 1.6rem 0; }
.callout--dark { background: linear-gradient(135deg, #102033, #164e63); color: white; }
.callout--dark p, .callout--dark li { color: rgba(255,255,255,.82); }
.callout--dark a { color: #a7f3d0; }
.callout-title { font-weight: 950; letter-spacing: -.025em; margin-bottom: .45rem; }

.check-list { list-style: none; padding-left: 0; margin: 0; }
.check-list li { position: relative; padding-left: 1.75rem; margin-bottom: .7rem; }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: .05rem; width: 1.15rem; height: 1.15rem; display: grid; place-items: center;
  border-radius: 50%; background: rgba(34,197,94,.16); color: var(--jc-teal); font-weight: 900; font-size: .75rem;
}

.step-card { padding: 1.2rem; height: 100%; }
.step-num { width: 2.2rem; height: 2.2rem; border-radius: 50%; display:grid; place-items:center; font-weight:950; color:white; background:linear-gradient(135deg,var(--jc-teal),var(--jc-blue)); margin-bottom:.7rem; }
.step-card h3 { font-size: 1rem; font-weight: 950; }
.step-card p { color: var(--jc-muted); margin: 0; line-height: 1.55; }

.cta-band {
  background: radial-gradient(circle at 12% 20%, rgba(34,197,94,.22), transparent 22rem), linear-gradient(135deg, #0f172a, #164e63 65%, #0f766e);
  color: white; border-radius: 34px; padding: clamp(1.5rem, 4vw, 3rem); position: relative; overflow: hidden;
}
.cta-band h2 { font-weight: 950; letter-spacing: -.04em; }
.cta-band p { color: rgba(255,255,255,.82); }
.cta-band .btn-ghost { background: rgba(255,255,255,.12); color: white; border-color: rgba(255,255,255,.25); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.2); }

.site-footer { border-top: 1px solid var(--jc-line); background: rgba(255,255,255,.78); margin-top: 4rem; }
.footer-title { font-weight: 950; margin-bottom: .65rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .45rem; }
.footer-links a { color: var(--jc-muted); text-decoration: none; font-weight: 700; }
.footer-links a:hover { color: var(--jc-teal); }
.footer-bottom { border-top: 1px solid var(--jc-line); color: var(--jc-muted); font-size: .85rem; }
.footer-brand { text-decoration: none; }

.badge-soft { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .65rem; border-radius:999px; background:rgba(15,118,110,.10); color:var(--jc-teal); font-weight:850; font-size:.78rem; }
.kbd-pill { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; border:1px solid rgba(17,51,84,.14); background:#fff; border-radius:999px; padding:.15rem .5rem; font-size:.82rem; }

.split-panel { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 767.98px) { .split-panel { grid-template-columns: 1fr; } }