:root {
  --blue: #007aff;
  --ink: #222;
  --muted: #647084;
  --line: #e6edf6;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  color: var(--ink);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f9fbff;
}

a { color: var(--blue); }

.site-nav {
  align-items: center;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  display: flex;
  height: 60px;
  justify-content: space-between;
  left: 0;
  padding: 0 2rem;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}

.site-nav a { color: #333; font-weight: 600; text-decoration: none; }
.site-nav a:hover, .site-nav a.active { color: var(--blue); }
.brand { font-size: 1.05rem; }
.nav-links { display: flex; gap: 2rem; }

.site-footer {
  background: rgba(255, 255, 255, .94);
  border-top: 1px solid #eee;
  bottom: 0;
  color: #666;
  font-size: .85rem;
  left: 0;
  padding: 1rem;
  position: fixed;
  right: 0;
  text-align: center;
  z-index: 10;
}

.site-footer a { color: var(--blue); margin: 0 5px; text-decoration: none; }
.footer-links { font-weight: 500; margin-bottom: 5px; }
.separator { color: #ccc; margin: 0 8px; }

.home-page, .team-page { overflow-y: scroll; scroll-behavior: smooth; scroll-snap-type: y mandatory; }
.home-page main, .team-page main { scroll-snap-type: y mandatory; }
.home-section, .team-section {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  overflow: hidden;
  padding: 80px 2rem 100px;
  scroll-snap-align: start;
  text-align: center;
}

.home-section h1, .team-section h1 { margin: 0 0 1rem; }
.home-section h2, .team-section h2 { margin: 0 0 1rem; }
.home-hero { background: linear-gradient(120deg, #4facfe, #00c6fb); color: #fff; }
#yumeri { background: #fff; }
#services { background: #f0f7ff; }
#latest { background: #fff; }
.desc { font-size: 1.1rem; line-height: 1.8; margin: 0; max-width: 800px; opacity: .9; }

.services { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; margin-top: 2rem; }
.service { background: #fff; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,.05); padding: 2rem; transition: transform .25s; width: 260px; }
.service:hover, .member-card:hover { transform: translateY(-5px); }
.service h3 { margin-top: 0; }
.service p { line-height: 1.7; margin-bottom: 0; }
.posts-list { margin-top: 1rem; max-width: 700px; text-align: left; width: 100%; }
.post-item { border-bottom: 1px solid #eee; padding: 1rem 0; }
.post-title { display: block; font-weight: 700; text-decoration: none; }
.post-time { color: #888; display: block; font-size: .9rem; margin-top: .35rem; }

.team-hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }
.team-hero h1 { text-shadow: 0 2px 10px rgba(0,0,0,.2); }
#dev-dept { background: #fff; }
#pr-dept { background: #f4f9ff; }
.team-join { background: #222; color: #fff; }
.section-lead { color: #666; margin: 0 0 1rem; }
.team-grid { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; max-width: 1200px; padding: 1rem; width: 100%; }
.member-card { background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.05); color: #222; display: flex; flex: 0 0 240px; flex-direction: column; padding: 2rem 1.5rem; transition: transform .25s; }
.avatar { border: 3px solid #f0f7ff; border-radius: 50%; height: 80px; margin: 0 auto 1rem; object-fit: cover; width: 80px; }
.member-name { font-size: 1.25rem; font-weight: 700; }
.member-role { background: rgba(0,122,255,.1); border-radius: 12px; color: var(--blue); font-size: .85rem; font-weight: 600; margin: .25rem auto 1rem; padding: 2px 8px; }
.member-bio { color: #666; font-size: .9rem; line-height: 1.5; }
.btn, .cta { border-radius: 999px; display: inline-flex; font-weight: 700; justify-content: center; padding: .9rem 1.4rem; text-decoration: none; transition: transform .2s; }
.btn { background: var(--blue); color: #fff; margin-top: 2rem; }
.btn:hover, .cta:hover { transform: translateY(-2px); }

.products-shell { margin: 0 auto; max-width: 1100px; padding: 120px 2rem 130px; }
.products-intro { margin-bottom: 3rem; text-align: center; }
.products-intro h1 { font-size: 2.8rem; margin: 0 0 1rem; }
.products-intro p { color: #5b6475; font-size: 1.05rem; line-height: 1.8; margin: 0 auto; max-width: 760px; }
.products-panel { background: rgba(255,255,255,.96); border: 1px solid rgba(0,122,255,.08); border-radius: 18px; box-shadow: 0 20px 60px rgba(40,81,161,.12); overflow: hidden; }
.tabs { background: rgba(0,122,255,.04); border-bottom: 1px solid rgba(0,122,255,.08); display: flex; flex-wrap: wrap; gap: 1rem; padding: 1.5rem; }
.tab-btn { background: #fff; border: 0; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,.05); color: #4d5b78; cursor: pointer; font-size: 1rem; font-weight: 700; padding: .9rem 1.4rem; }
.tab-btn:hover, .tab-btn.active { background: var(--blue); color: #fff; }
.tab-content { display: none; padding: 2rem; }
.tab-content.active { display: block; }
.product-header { margin-bottom: 2rem; }
.product-title h2 { font-size: 2rem; margin: .6rem 0; }
.product-title p { color: #62708a; line-height: 1.8; margin: 0; max-width: 650px; }
.badge { background: rgba(0,122,255,.12); border-radius: 999px; color: var(--blue); display: inline-flex; font-size: .9rem; font-weight: 700; padding: .45rem .9rem; }
.detail-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 2rem; }
.detail-card { background: #f8fbff; border: 1px solid #e4eefb; border-radius: 12px; padding: 1.25rem; }
.detail-card h3 { color: #1f2d3d; font-size: 1.05rem; margin: 0 0 .75rem; }
.detail-card p, .detail-card li { color: #5b6475; line-height: 1.7; margin: 0; }
.detail-card ul { margin: 0; padding-left: 1.2rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.cta.primary { background: var(--blue); color: #fff; }
.cta.secondary { background: rgba(0,122,255,.08); color: var(--blue); }

.blog-content { background: #fff; line-height: 1.8; margin: 0 auto; max-width: 800px; min-height: 100vh; padding: 110px 2rem 130px; }
.back-link { text-decoration: none; }
.blog-content h1 { color: var(--blue); line-height: 1.35; margin: 2rem 0 .5rem; }
.blog-date { color: #888; font-size: .9rem; margin: 0 0 2rem; }
.article-body h2 { margin-top: 2rem; }
.not-found { min-height: 100vh; padding: 180px 2rem 150px; text-align: center; }
.not-found h1 { font-size: 4rem; margin: 0; }

@media (max-width: 768px) {
  .site-nav { justify-content: center; padding: 0 1rem; }
  .brand { display: none; }
  .nav-links { gap: 1.25rem; }
  .site-footer { font-size: .78rem; }
  .home-section, .team-section { padding: 80px 1rem 105px; }
  .team-grid { flex-wrap: nowrap; gap: 1.5rem; justify-content: flex-start; overflow-x: auto; padding: 1rem 2rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .team-grid::-webkit-scrollbar { display: none; }
  .member-card { flex-basis: min(80vw, 300px); scroll-snap-align: center; transform: none !important; }
  .products-shell { padding: 100px 1rem 130px; }
  .products-intro h1 { font-size: 2.1rem; }
  .tab-content { padding: 1.25rem; }
  .blog-content { padding-left: 1rem; padding-right: 1rem; }
}