/* maySunAI — shared site stylesheet (used by every page) */

[data-theme="dark"] {
  --bg: #0f0f0f;
  --bg2: #1a1a1a;
  --card: #1e1e1e;
  --border: #2a2a2a;
  --accent: #60a5fa;
  --accent2: #34d399;
  --accent3: #f0b429;
  --text: #e0e0e0;
  --muted: #888;
  --theme-btn-bg: #2a2a2a;
  --theme-btn-color: #ccc;
}
[data-theme="light"] {
  --bg: #f4f4f5;
  --bg2: #ffffff;
  --card: #ffffff;
  --border: #e0e0e0;
  --accent: #2563eb;
  --accent2: #059669;
  --accent3: #b45309;
  --text: #1a1a1a;
  --muted: #666;
  --theme-btn-bg: #e4e4e7;
  --theme-btn-color: #444;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { max-width: 100%; }
body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; transition: background 0.25s, color 0.25s; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* NAV */
nav { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; transition: background 0.25s; gap: 10px; }
.nav-logo { font-weight: bold; font-size: 1.1em; color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* 2026-07-31: lang-switch + theme-toggle moved out of .nav-right (the hamburger drawer on
   mobile) into their own top-bar group so they stay reachable on a phone without opening
   the menu. DOM order is now logo -> .nav-utility -> hamburger -> .nav-right, which already
   satisfies the mobile requirement for free (flex default order). On desktop the order:10
   override below pushes it back to the visual right edge, after .nav-right, matching the
   original desktop layout. */
.nav-utility { display: flex; align-items: center; gap: 8px; }
@media (min-width: 641px) {
  .nav-utility { order: 10; }
}
.nav-links { display: flex; gap: 16px; font-size: 0.9em; flex-wrap: wrap; align-items: center; }
.nav-links a { color: var(--muted); }
.nav-links a.nav-current { color: var(--text); font-weight: 600; }
.nav-links a:hover { color: var(--text); text-decoration: none; }

/* HAMBURGER (mobile-only, see @media block below for visibility) */
.nav-hamburger { display: none; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 1.3em; line-height: 1; padding: 6px 10px; cursor: pointer; touch-action: manipulation; }
.nav-backdrop { display: none; }

/* NAV DROPDOWN */
.nav-dropdown { position: relative; }
.nav-dropdown > .nav-dropdown-label { color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; background: none; border: none; font: inherit; padding: 0; }
.nav-dropdown > .nav-dropdown-label:hover { color: var(--text); }
.nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; margin-top: 0; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 8px; min-width: 240px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 200; }
/* 2026-07-27修复：这里以前还有 :hover / :focus-within 两个触发器跟JS的 .open 点击开合并存。
   触屏设备上"先触发CSS的:hover模拟展开，再吃掉JS真正的click事件"是iOS Safari/Edge一个已知的
   老问题，会导致下拉菜单"有时候不好用"（需要点两次，或点了又马上关闭）。JS里初始化时已经
   有完整的点击展开/收起逻辑（initNavDropdowns），不需要再靠CSS:hover这条路，统一只用
   .open这一个开关，桌面鼠标用户改成"点一下展开"（原来是"划过去就展开"），换来触屏端稳定可用。 */
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--text); font-size: 0.95em; }
.nav-dropdown-menu a:hover { background: var(--bg2); text-decoration: none; color: var(--accent); }
.nav-dropdown-menu a small { display: block; color: var(--muted); font-size: 0.82em; font-weight: 400; margin-top: 2px; }
@media (max-width: 640px) {
  /* 2026-07-27再次修复：column堆叠仍然把全部链接摊开挤在头部，占地方且乱，
     iPhone上个别菜单项点了没反应（触屏:hover态跟JS click抢事件、点击热区太小）。
     改成汉堡按钮+左侧抽屉菜单：默认完全隐藏，点击汉堡从左侧滑出，点遮罩或链接自动收起。
     点击热区统一放大到 ≥44px（Apple HIG最小可点尺寸）+ touch-action:manipulation
     去掉移动端300ms点击延迟/双击缩放干扰，解决"点击没反应"。 */
  .nav-hamburger { display: inline-flex; align-items: center; justify-content: center; }

  .nav-right {
    position: fixed; top: 0; left: -300px; width: min(78vw, 300px); height: 100vh;
    background: var(--bg2); border-right: 1px solid var(--border);
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    gap: 0; padding: 64px 18px 24px; overflow-y: auto;
    transition: left 0.25s ease; z-index: 150;
  }
  .nav-right.open { left: 0; box-shadow: 8px 0 24px rgba(0,0,0,0.25); }

  /* z-index stays BELOW nav's (100): .nav-right is a descendant of <nav>, which
     creates its own stacking context (position:sticky + z-index:100), so .nav-right's
     z-index:150 only wins against other children of <nav> — against a body-level
     sibling like .nav-backdrop it's <nav>'s z-index (100) that gets compared. A
     backdrop z-index >= 100 would paint above the whole nav bar and swallow every
     tap inside the drawer, which is exactly the "iPhone上菜单点击没反应" bug this
     redesign is meant to fix. Keeping it under 100 dims the page behind the header
     without ever sitting on top of it. */
  .nav-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  }
  .nav-backdrop.open { opacity: 1; pointer-events: auto; }

  .nav-links { flex-direction: column; align-items: stretch; width: 100%; gap: 0; margin-bottom: 16px; }
  .nav-links a, .nav-dropdown > .nav-dropdown-label {
    display: flex; align-items: center; min-height: 44px; padding: 10px 4px;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    border-bottom: 1px solid var(--border);
  }
  .nav-dropdown { width: 100%; }
  .nav-dropdown-menu { display: none; position: static; box-shadow: none; margin-top: 0; border: none; padding-left: 14px; }
  .nav-dropdown.open .nav-dropdown-menu { display: block; }
  .nav-dropdown-menu a { min-height: 44px; padding: 10px 4px; border-bottom: 1px solid var(--border); }

  /* lang-switch/theme-toggle no longer live in this drawer (see .nav-utility above) --
     compact sizing here is for the top bar itself, where they now sit next to the logo
     and hamburger on a 375-390px iPhone screen. */
  .nav-utility { gap: 5px; }
  .nav-utility .lang-switch { padding: 2px; gap: 2px; }
  .nav-utility .lang-btn { padding: 3px 6px; font-size: 0.68em; }
  .nav-utility .theme-toggle { padding: 3px 7px; font-size: 0.68em; }
}

/* THEME TOGGLE */
.theme-toggle { background: var(--theme-btn-bg); color: var(--theme-btn-color); border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px; font-size: 0.82em; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* LANGUAGE SWITCH — order in DOM is ja / en / zh (see req: Chinese not first) */
.lang-switch { display: flex; gap: 4px; background: var(--theme-btn-bg); border: 1px solid var(--border); border-radius: 20px; padding: 3px; }
.lang-btn { background: transparent; color: var(--theme-btn-color); border: none; border-radius: 16px; padding: 4px 10px; font-size: 0.8em; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.lang-btn:hover { color: var(--accent); }
.lang-btn.active { background: var(--accent); color: #fff; }

/* HERO (home page) */
.hero { padding: 70px 24px 40px; text-align: center; max-width: 760px; margin: 0 auto; }
.hero .eyebrow { color: var(--muted); font-size: 0.9em; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; }
.hero h1 { font-size: clamp(2em, 5vw, 3em); font-weight: 800; line-height: 1.25; margin-bottom: 16px; }
.hero h1 .accent { color: var(--accent); }
.hero p { font-size: 1.08em; color: var(--muted); margin-bottom: 28px; }
.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.btn { padding: 12px 22px; border-radius: 8px; font-size: 0.95em; font-weight: 600; cursor: pointer; border: none; display: inline-block; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn:hover { opacity: 0.85; text-decoration: none; }

/* QUICK LINKS ROW */
.audience-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; font-size: 0.85em; }
.audience-pill { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); color: var(--muted); background: var(--bg2); }
.audience-pill:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

/* SECTION */
section { padding: 56px clamp(24px, 6vw, 140px); max-width: min(1200px, 94vw); margin: 0 auto; }
section h2 { font-size: 1.6em; font-weight: 700; margin-bottom: 8px; }
.section-sub { color: var(--muted); margin-bottom: 32px; font-size: 0.95em; }
section p.body-text { color: var(--text); margin-bottom: 14px; font-size: 0.98em; }
section p.body-text.muted { color: var(--muted); }

/* TIMELINE */
.timeline { list-style: none; border-left: 2px solid var(--border); padding-left: 20px; margin-top: 20px; }
.timeline li { position: relative; margin-bottom: 16px; font-size: 0.92em; color: var(--text); }
.timeline li::before { content: ""; position: absolute; left: -26px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.timeline .t-when { color: var(--accent); font-weight: 600; margin-right: 6px; }

/* PRODUCTS / PORTFOLIO GRID (home page) */
.portfolio-group { margin-bottom: 32px; }
.portfolio-group h3 { color: var(--muted); font-weight: 600; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.85em; }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.product-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; transition: border-color 0.2s, background 0.25s, transform 0.15s; box-shadow: 0 1px 4px rgba(0,0,0,0.06); display: block; color: inherit; }
.product-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.product-icon { font-size: 2.2em; margin-bottom: 12px; }
/* 卡片网格里icon+标题同一行（原来icon和h3是各自独立的block，各占一行）——
   用float+overflow:hidden让标题贴着icon旁边换行，clear:left让下面的描述文字恢复整行宽度 */
.product-card .product-icon { float: left; margin: 1px 10px 10px 0; font-size: 1.7em; }
.product-card h3 { overflow: hidden; font-size: 1.05em; margin-bottom: 6px; text-transform: none; letter-spacing: normal; color: var(--text); }
.product-card p { clear: left; color: var(--muted); font-size: 0.9em; line-height: 1.5; margin-bottom: 16px; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.75em; font-weight: 600; }
.badge-live { background: #064e3b; color: var(--accent2); }
.badge-review { background: #1e3a5f; color: var(--accent); }
.badge-dev { background: #4a3418; color: var(--accent3); }
[data-theme="light"] .badge-live { background: #d1fae5; color: #065f46; }
[data-theme="light"] .badge-review { background: #dbeafe; color: #1d4ed8; }
[data-theme="light"] .badge-dev { background: #fef3c7; color: #92400e; }
.product-more { display: inline-block; margin-top: 10px; font-size: 0.85em; color: var(--accent); }

/* PRODUCT DETAIL PAGE */
.back-link { display: block; padding: 20px clamp(24px, 6vw, 140px) 0; max-width: min(1200px, 94vw); margin: 0 auto; font-size: 0.9em; color: var(--muted); }
.product-hero { padding: 48px clamp(24px, 6vw, 140px) 24px; max-width: min(1200px, 94vw); margin: 0 auto; }
.product-hero .product-icon { font-size: 2.6em; margin-bottom: 10px; }
.product-hero h1 { font-size: clamp(1.7em, 4vw, 2.3em); font-weight: 800; margin-bottom: 10px; }
.product-hero .tagline { color: var(--muted); font-size: 1.05em; margin-bottom: 16px; }
.status-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.tech-list { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
.tech-chip { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 4px 12px; font-size: 0.82em; color: var(--muted); }

/* ABOUT — expertise grid */
.about-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.about-item { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; transition: background 0.25s; }
.about-item .num { font-size: 1.8em; font-weight: 800; color: var(--accent); }
.about-item p { color: var(--muted); font-size: 0.9em; margin-top: 4px; }

.expertise-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin-top: 20px; }
.expertise-item { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.expertise-item h4 { font-size: 1em; margin-bottom: 6px; color: var(--text); }
.expertise-item p { color: var(--muted); font-size: 0.9em; }
.skill-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.skill-tag { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 4px 12px; font-size: 0.85em; color: var(--text); }

/* CTA BOX (investors) */
.cta-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 28px; transition: background 0.25s; }
.cta-box h3 { font-size: 1.15em; margin-bottom: 10px; }
.cta-box p { color: var(--muted); margin-bottom: 16px; font-size: 0.95em; }
.cta-box .btn { margin-right: 10px; }

/* FEATURED STORY BLOCKS (home page) */
.story-section { padding: 32px 24px; max-width: 720px; margin: 0 auto; border-top: 1px solid var(--border); }
.story-eyebrow { color: var(--accent); font-size: 0.85em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.story-title { font-size: 1.35em; font-weight: 800; margin-bottom: 10px; }
.story-desc { color: var(--muted); margin-bottom: 14px; font-size: 0.96em; }
.story-points { list-style: none; margin-bottom: 14px; }
.story-points li { padding: 3px 0; font-size: 0.92em; color: var(--text); }
.story-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.story-stat { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 0.85em; color: var(--muted); }
.story-stat strong { display: block; color: var(--accent); font-size: 1.15em; }

/* TRUST / METRICS STRIP */
.trust-strip { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 40px 24px; }
.trust-grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; text-align: center; }
.trust-item strong { display: block; font-size: 1.3em; color: var(--accent); margin-bottom: 4px; }
.trust-item span { color: var(--muted); font-size: 0.88em; }

/* BOTTOM CTA */
.bottom-cta { text-align: center; padding: 60px 24px; max-width: 700px; margin: 0 auto; }
.bottom-cta h2 { font-size: 1.6em; margin-bottom: 20px; }

/* FOOTER — single contact entry lives here */
footer { border-top: 1px solid var(--border); padding: 28px 24px; text-align: center; color: var(--muted); font-size: 0.85em; }
footer .footer-links { margin-top: 8px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
footer .footer-links a { color: var(--muted); }
footer .footer-links a:hover { color: var(--accent); }
.divider { border: none; border-top: 1px solid var(--border); margin: 0; }