/* shared-styles.css – Shen Lab inner pages */
:root {
  --bg:        #F8F7F4;
  --white:     #FFFFFF;
  --navy:      #0C1F3F;
  --navy-mid:  #1A3A6B;
  --teal:      #0B7A75;
  --teal-lt:   #E6F4F3;
  --amber:     #A0522D;
  --text:      #1A1A1A;
  --muted:     #636977;
  --border:    #E0DED8;
  --shadow-sm: 0 1px 3px rgba(12,31,63,.06), 0 1px 2px rgba(12,31,63,.04);
  --shadow:    0 4px 16px rgba(12,31,63,.08), 0 1px 4px rgba(12,31,63,.04);
  --shadow-lg: 0 12px 40px rgba(12,31,63,.12);
  --r:         2px;
  --font-display: Georgia, Palatino, 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, Menlo, Consolas, 'Courier New', monospace;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.6; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

.container { max-width:1240px; margin:0 auto; padding:0 3rem; }

nav { position:fixed; inset:0 0 auto; z-index:200; background:rgba(255,255,255,.92); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.nav-inner { max-width:1240px; margin:0 auto; padding:0 3rem; height:64px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; flex-direction:column; gap:0; }
.nav-logo-main { font-family:var(--font-display); font-size:1.25rem; font-weight:700; color:var(--navy); letter-spacing:.02em; line-height:1; }
.nav-logo-sub { font-family:var(--font-mono); font-size:.58rem; color:var(--teal); letter-spacing:.18em; text-transform:uppercase; }
.nav-links { display:flex; gap:2.5rem; list-style:none; align-items:center; }
.nav-links a { font-size:.875rem; font-weight:500; color:var(--muted); letter-spacing:.03em; transition:color .25s; position:relative; padding-bottom:2px; }
.nav-links a::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:1.5px; background:var(--teal); transform:scaleX(0); transition:transform .3s cubic-bezier(.4,0,.2,1); }
.nav-links a:hover { color:var(--navy); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-links a.active { color:var(--navy); font-weight:600; }
.nav-links a.active::after { transform:scaleX(1); }
.nav-cta { padding:.5rem 1.25rem; background:var(--navy); color:#fff !important; font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; border-radius:var(--r); transition:background .25s; }
.nav-cta:hover { background:var(--teal) !important; }
.nav-cta::after { display:none; }

/* Page header */
.page-header { padding-top:64px; background:var(--white); border-bottom:1px solid var(--border); }
.page-header-inner { max-width:1240px; margin:0 auto; padding:4rem 3rem 3.5rem; display:grid; grid-template-columns:1fr auto; align-items:end; gap:2rem; }
.ph-left {}
.ph-eyebrow { font-family:var(--font-mono); font-size:.68rem; color:var(--teal); letter-spacing:.2em; text-transform:uppercase; margin-bottom:.75rem; display:flex; align-items:center; gap:.6rem; }
.ph-eyebrow::before { content:''; display:inline-block; width:24px; height:1px; background:var(--teal); }
h1.ph-title { font-family:var(--font-display); font-size:clamp(2.8rem,5.5vw,5rem); font-weight:700; color:var(--navy); line-height:1.0; letter-spacing:-.02em; margin-bottom:.75rem; }
h1.ph-title em { font-style:italic; color:var(--teal); }
.ph-desc { font-size:1rem; color:var(--muted); max-width:580px; line-height:1.7; }
.ph-right { padding-bottom:.5rem; }
.ph-badge { font-family:var(--font-mono); font-size:.6rem; padding:.4rem 1rem; border:1px solid var(--border); color:var(--muted); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }

/* Breadcrumb */
.breadcrumb { background:var(--bg); border-bottom:1px solid var(--border); }
.breadcrumb-inner { max-width:1240px; margin:0 auto; padding:.75rem 3rem; font-family:var(--font-mono); font-size:.62rem; color:var(--muted); letter-spacing:.06em; display:flex; gap:.5rem; align-items:center; }
.breadcrumb-inner a { color:var(--teal); }
.breadcrumb-inner span { color:var(--border); }

/* Section */
.sec { padding:5rem 0; }
.sec-alt { background:var(--white); }
.label { font-family:var(--font-mono); font-size:.68rem; color:var(--teal); letter-spacing:.2em; text-transform:uppercase; margin-bottom:.75rem; display:flex; align-items:center; gap:.6rem; }
.label::before { content:''; display:inline-block; width:24px; height:1px; background:var(--teal); }
h2.sec-title { font-family:var(--font-display); font-size:clamp(2rem,3.5vw,3rem); font-weight:700; color:var(--navy); line-height:1.1; letter-spacing:-.01em; margin-bottom:1rem; }
h2.sec-title em { font-style:italic; color:var(--teal); }

/* Buttons */
.btn { display:inline-block; padding:.75rem 1.75rem; font-family:var(--font-body); font-size:.875rem; font-weight:600; letter-spacing:.04em; border-radius:var(--r); transition:all .25s; cursor:pointer; }
.btn-primary { background:var(--navy); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover { background:var(--teal); box-shadow:var(--shadow); }
.btn-outline { background:transparent; color:var(--navy); border:1.5px solid var(--border); }
.btn-outline:hover { border-color:var(--navy); background:var(--navy); color:#fff; }
.btn-teal { background:var(--teal); color:#fff; }
.btn-teal:hover { background:var(--navy); }

/* Tag pill */
.tag { font-family:var(--font-mono); font-size:.6rem; padding:.25rem .6rem; background:var(--bg); border:1px solid var(--border); color:var(--muted); border-radius:var(--r); }

/* Footer */
footer { background:var(--navy); color:rgba(255,255,255,.8); padding:4rem 0 0; }
.footer-inner { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand-name { font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:#fff; margin-bottom:.75rem; }
.footer-brand p { font-size:.83rem; color:rgba(255,255,255,.5); line-height:1.7; margin-bottom:.3rem; }
.footer-col h5 { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:1rem; }
.footer-col a { display:block; font-size:.83rem; color:rgba(255,255,255,.6); margin-bottom:.5rem; transition:color .2s; }
.footer-col a:hover { color:#fff; }
.footer-bottom { padding:1.25rem 0; display:flex; justify-content:space-between; align-items:center; }
.footer-bottom p { font-family:var(--font-mono); font-size:.6rem; color:rgba(255,255,255,.3); letter-spacing:.06em; }

@media (max-width:1100px) { .container,.nav-inner,.page-header-inner,.breadcrumb-inner { padding-left:2rem; padding-right:2rem; } }
@media (max-width:700px) { .footer-inner { grid-template-columns:1fr 1fr; } .page-header-inner { grid-template-columns:1fr; } }
