/* ============================================================
   云创空间 official website — UI kit layout styles
   Consumes the design-system tokens from ../../styles.css
   ============================================================ */

/* ---------- shared layout ---------- */
.yc-section { padding: var(--section-y) 0; }
.yc-section--paper { background: var(--bg-section); }
.yc-grid { display: grid; gap: var(--space-6); }
.yc-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- brand lockup ---------- */
.yc-brand { display: inline-flex; align-items: center; gap: 10px; }
.yc-brand__mark {
  width: 36px; height: 36px; border-radius: 9px; background: var(--gold-700);
  color: #fff; display: grid; place-items: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 20px;
}
.yc-brand__wm { display: flex; flex-direction: column; line-height: 1.05; }
.yc-brand__cn { font-size: 18px; font-weight: 700; color: var(--ink-900); letter-spacing: .02em; }
.yc-brand__en {
  font-size: 10px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-500); margin-top: 2px;
}

/* ---------- nav ---------- */
.yc-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.yc-nav__inner { display: flex; align-items: center; gap: var(--space-6); height: var(--nav-h); }
.yc-nav__links { display: flex; gap: var(--space-6); margin-left: auto; }
.yc-nav__link {
  font-size: 15px; font-weight: 500; color: var(--ink-700); position: relative;
  padding: 6px 0;
}
.yc-nav__link:hover { color: var(--gold-700); }
.yc-nav__link.is-active { color: var(--gold-700); }
.yc-nav__link.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--gold-500); border-radius: 2px;
}
.yc-nav__cta { margin-left: var(--space-4); }
.yc-nav__burger {
  display: none; margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--ink-900); padding: 6px;
}
.yc-nav__burger i { width: 24px; height: 24px; }
.yc-nav__drawer {
  display: none; flex-direction: column; padding: var(--space-4) var(--gutter-mobile);
  border-top: 1px solid var(--hairline); background: var(--white); gap: 2px;
}
.yc-nav__drawer-link { padding: 12px 4px; font-size: 16px; font-weight: 500; color: var(--ink-900); border-bottom: 1px solid var(--hairline); }

/* ---------- hero ---------- */
.yc-hero { padding: var(--space-24) 0 var(--space-20); background:
  radial-gradient(120% 120% at 85% 0%, var(--gold-050) 0%, transparent 55%), var(--white); }
.yc-hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-16); align-items: center; }
.yc-hero__title {
  font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-display);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: var(--space-4) 0 var(--space-5);
}
.yc-hero__lead { font-size: var(--fs-lead); color: var(--text-muted); line-height: var(--lh-normal); max-width: 30em; }
.yc-hero__actions { display: flex; gap: var(--space-4); margin-top: var(--space-8); flex-wrap: wrap; }
.yc-hero__stats { display: flex; gap: var(--space-10); margin: var(--space-12) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--hairline); }
.yc-hero__stats dt { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--gold-700); }
.yc-hero__stats dd { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }

/* hero side panel — abstract, calm (no flashy gradient) */
.yc-hero__panel { display: grid; place-items: center; }
.yc-hero__card {
  width: 100%; max-width: 360px; aspect-ratio: 4/3; background: var(--white);
  border: 1px solid var(--hairline); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); padding: var(--space-8); display: flex; flex-direction: column;
}
.yc-hero__card-dot { width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--gold-100); }
.yc-hero__card-rows { display: flex; flex-direction: column; gap: 12px; margin-top: var(--space-8); flex: 1; }
.yc-hero__card-rows span { height: 12px; border-radius: 6px; background: var(--paper); }
.yc-hero__card-foot { display: flex; align-items: center; gap: 8px; color: var(--gold-700); font-size: 14px; font-weight: 600; }
.yc-hero__card-foot i { width: 18px; height: 18px; }

/* ---------- feature (services) cards ---------- */
.yc-feature__title { font-size: var(--fs-h3); margin: var(--space-5) 0 var(--space-2); }
.yc-feature__desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-normal); margin: 0; }

/* ---------- products ---------- */
.yc-product { display: flex; flex-direction: column; }
.yc-product__top { display: flex; align-items: center; justify-content: space-between; }
.yc-product__title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-h3); margin: var(--space-5) 0 var(--space-2); }
.yc-product__ext { width: 18px; height: 18px; color: var(--ink-400); }
.yc-product__desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-normal); margin: 0 0 var(--space-5); flex: 1; }
.yc-product__link { font-size: 14px; font-weight: 600; color: var(--gold-700); }
.yc-product__link--muted { color: var(--ink-500); }
.yc-product--feature { outline: 1px solid var(--gold-100); }
.yc-product--feature:hover .yc-product__ext { color: var(--gold-700); }

/* ---------- about ---------- */
.yc-about { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.yc-about__p { font-size: var(--fs-body); color: var(--text-body); line-height: var(--lh-relaxed); margin-top: var(--space-5); }
.yc-about__values { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.yc-value { display: flex; gap: var(--space-4); background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-5); }
.yc-value__icon { width: 24px; height: 24px; color: var(--gold-700); flex: 0 0 auto; }
.yc-value__t { font-size: var(--fs-h4); margin: 0 0 4px; }
.yc-value__d { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; line-height: var(--lh-normal); }

/* ---------- contact ---------- */
.yc-contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.yc-contact__list { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: flex; flex-direction: column; gap: var(--space-5); }
.yc-contact__list li { display: flex; align-items: center; gap: var(--space-4); }
.yc-contact__list i { width: 18px; height: 18px; }
.yc-contact__k { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.yc-contact__list a, .yc-contact__list div > span:last-child { font-size: 15px; color: var(--ink-900); font-weight: 500; }
.yc-contact__form { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); }
.yc-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.yc-contact__done { text-align: center; padding: var(--space-8) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.yc-contact__done h3 { font-size: var(--fs-h3); }
.yc-contact__done p { color: var(--text-muted); margin-bottom: var(--space-4); }

/* ---------- footer ---------- */
.yc-footer { background: var(--ink-900); color: rgba(255,255,255,.72); padding: var(--space-16) 0 var(--space-8); }
.yc-footer__top { display: grid; grid-template-columns: 1.3fr 2fr; gap: var(--space-16); padding-bottom: var(--space-12); border-bottom: 1px solid rgba(255,255,255,.1); }
.yc-footer .yc-brand__cn { color: #fff; }
.yc-footer .yc-brand__en { color: rgba(255,255,255,.5); }
.yc-footer__tagline { font-size: 14px; line-height: var(--lh-normal); margin-top: var(--space-5); max-width: 30em; }
.yc-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.yc-footer__col { display: flex; flex-direction: column; gap: var(--space-3); }
.yc-footer__col h5 { color: #fff; font-size: 14px; margin: 0 0 var(--space-2); }
.yc-footer__col a { color: rgba(255,255,255,.66); font-size: 14px; }
.yc-footer__col a:hover { color: var(--gold-500); }
.yc-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-8); font-size: 13px; }
.yc-footer__filings { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.yc-footer__filings a { color: rgba(255,255,255,.55); display: inline-flex; align-items: center; gap: 6px; }
.yc-footer__filings a:hover { color: rgba(255,255,255,.85); }
.yc-footer__gongan-icon { width: 14px; height: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .yc-hero__inner, .yc-about, .yc-contact { grid-template-columns: 1fr; gap: var(--space-10); }
  .yc-hero__panel { order: -1; }
  .yc-grid--3 { grid-template-columns: 1fr 1fr; }
  .yc-footer__top { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 768px) {
  .yc-nav__links, .yc-nav__cta { display: none; }
  .yc-nav__burger { display: block; }
  .yc-nav__drawer { display: flex; }
  .yc-section { padding: var(--section-y-mobile) 0; }
  .yc-hero { padding: var(--space-16) 0; }
  .yc-hero__title { font-size: 38px; }
  .yc-grid--3, .yc-about__values, .yc-contact__row { grid-template-columns: 1fr; }
  .yc-hero__stats { gap: var(--space-6); flex-wrap: wrap; }
  .yc-footer__cols { grid-template-columns: 1fr 1fr; }
}