/* Yijian Technology — deep ocean, blue actions, restrained cyan highlights. */
:root {
  --brand-navy: #0b1b30;
  --brand-navy-raised: #122d49;
  --brand-blue: #1d4ed8;
  --brand-blue-hover: #1e40af;
  --brand-blue-on-dark: #2563eb;
  --brand-cyan: #67dde0;
  --brand-teal: #0e7490;
  --surface: #ffffff;
  --surface-cool: #f3f7fb;
  --surface-blue: #eaf1fb;
  --text-primary: #152b45;
  --text-secondary: #52647a;
  --text-on-dark: #f4f8ff;
  --text-muted-on-dark: #b6c9df;
  --border-light: #dce5ef;
  --border-on-dark: #30465f;
  --blue: var(--brand-blue);
  --blue-dark: var(--brand-blue-hover);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --secondary-text: var(--text-secondary);
  --line: var(--border-light);
  --pale: var(--surface-cool);
}

body { background: var(--surface); }
::selection { background: var(--brand-cyan); color: var(--brand-navy); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline-color: var(--brand-blue); }
.button.primary { background: var(--brand-blue); color: var(--surface); }
.button.primary:hover { background: var(--brand-blue-hover); box-shadow: 0 6px 18px #1d4ed824; }
.button.secondary { background: var(--surface); border-color: #b6c5d8; }
.button.secondary:hover { background: var(--surface-blue); border-color: var(--brand-blue); }

.site-header { background: var(--brand-navy); color: var(--text-on-dark); border-bottom-color: var(--border-on-dark); }
.site-header nav a { color: var(--text-muted-on-dark); }
.site-header nav a:hover { color: var(--brand-cyan); }
.site-header .button.primary { background: var(--brand-blue-on-dark); }
.site-header .button.primary:hover { background: var(--brand-blue); }
.site-header .menu-toggle > span { background: var(--text-on-dark); }
.site-header :focus-visible, .hero :focus-visible, footer :focus-visible, .download-brand :focus-visible { outline-color: var(--brand-cyan); }
.site-header .text-link:hover { color: var(--brand-cyan); }
.skip-link { background: var(--brand-cyan); color: var(--brand-navy); }

.hero { background: radial-gradient(ellipse at 85% 20%, #14334d 0, transparent 55%), var(--brand-navy); color: var(--text-on-dark); }
.hero-copy .eyebrow { color: var(--brand-cyan); }
.hero-copy .dot { background: var(--brand-cyan); }
.hero h1 .blue { color: var(--brand-cyan); }
.hero h1 .blue::after { background: #67dde040; height: 3px; }
.hero-lead, .hero-meta { color: var(--text-muted-on-dark); }
.hero-meta i { background: #617891; }
.hero-actions .button.primary { background: var(--brand-blue-on-dark); }
.hero-actions .button.primary:hover { background: var(--brand-blue); }
.hero-actions .text-link { color: var(--text-on-dark); }
.hero-actions .text-link:hover { color: var(--brand-cyan); }
.hero-visual { background: radial-gradient(ellipse at 65% 40%, #1c4c64 0, transparent 70%), var(--brand-navy-raised); border: 1px solid var(--border-on-dark); box-shadow: inset 0 1px 0 #ffffff08; }
.visual-grid { opacity: .4; background-image: linear-gradient(#67dde022 1px, transparent 1px), linear-gradient(90deg, #67dde022 1px, transparent 1px); }
.visual-topline, .visual-caption, .visual-caption small { color: var(--text-muted-on-dark); }
.ring { border-color: #67dde02b; }
.live-dot { background: var(--brand-cyan); }
.float-note { background: var(--surface); color: var(--text-primary); border-color: var(--border-light); box-shadow: 0 15px 32px #020e2140; }
.float-note div > span { color: var(--text-secondary); }
.check-mark { color: var(--brand-teal); background: #e3f4f5; }

/* Product illustration retains the App's recognizable blue interface. */
.phone { --blue: #1557e5; --blue-dark: #1042af; color: #132239; box-shadow: 15px 28px 45px #020e2159, 0 0 0 2px #59718c; }
.phone :focus-visible { outline-color: #1557e5; }

.value-strip { background: var(--surface-cool); }
.strip-inner > div > span { color: var(--brand-teal); }
.feature { background: var(--surface); border-color: var(--border-light); }
.feature-art, .report-art { background: var(--surface-blue); }
.art-label, .art-bottom, .feature-number, .illustration-note { color: var(--text-secondary); }
.art-equation { border-color: var(--border-light); }
.mini-bars { border-color: #c5d5e5; }
.mini-bars i { background: #99b8e9; }
.mini-bars i:nth-child(3n+2) { background: var(--brand-blue); }
.mini-bars i:nth-child(3n) { background: var(--brand-teal); }
.paper-title > span + span { background: var(--surface-blue); }
.modes-section { background: var(--surface-cool); }
.mode-board { border-color: var(--border-light); box-shadow: 0 12px 35px #17304e08; }
.mode-tabs { border-color: #b6c5d8; background: var(--surface-blue); }
.outline-tag { color: var(--text-secondary); border-color: #b6c5d8; }
.workflow > div { background: var(--surface-cool); border-color: var(--border-light); }
.workflow > div > span, .check-list li::before { color: var(--brand-teal); }

.download-brand { background: var(--brand-navy); color: var(--text-on-dark); }
.download-brand p, .download-hint { color: var(--text-muted-on-dark); }
.release-tag { background: #193950; color: #a7e8eb; }
.release-tag .dot { background: #a7e8eb; }
.download-options { background: var(--surface); }
.platform-icon { background: var(--surface-blue); color: var(--brand-blue); }
.apple-icon { background: var(--surface-cool); color: var(--text-primary); }
.status-tag { background: #edf1f6; color: var(--text-secondary); }
.platform-top > div > span, .platform-card > p, .platform-meta, .download-notice { color: var(--text-secondary); }
.support-section { background: var(--surface-cool); }
.faq details, .faq details:first-child { border-color: var(--border-light); }
.faq summary > span { color: var(--brand-teal); }
.about-mark { background: var(--brand-navy); border-color: var(--brand-navy-raised); }
.about-copy .eyebrow { color: var(--brand-teal); }

footer { background: var(--brand-navy); color: var(--text-on-dark); border-top-color: var(--border-on-dark); }
.footer-top .brand { opacity: 1; }
.footer-top > p, .footer-top > div, .footer-bottom { color: var(--text-muted-on-dark); }
.footer-bottom { border-top-color: var(--border-on-dark); }
.footer-top a:hover, .footer-top button:hover, .footer-bottom a:hover { color: var(--brand-cyan); }
dialog { background: var(--surface); border-color: var(--border-light); }
dialog::backdrop { background: #071525b3; }
.close-dialog { background: var(--surface-cool); }
.close-dialog:hover { background: var(--surface-blue); }
.toast { background: var(--brand-navy-raised); }

@media (max-width: 680px) {
  .site-header nav { background: var(--brand-navy-raised); border-color: var(--border-on-dark); box-shadow: 0 15px 30px #020e2133; }
  .site-header nav a:hover { background: #1a3a55; }
}