/* ========================================
   XuZhiShi Theme — Unified Design System
   Single source of truth for all CSS variables,
   reset, and shared components.
   ======================================== */

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* --- Design Tokens --- */
:root{
  --primary:#0071e3;
  --primary-light:#4da3ff;
  --primary-ultra-light:rgba(0,113,227,0.06);
  --green:#34c759;
  --green-light:#a8f0c0;
  --purple:#af52de;
  --orange:#ff9500;
  --pink:#ff2d55;
  --teal:#5ac8fa;
  --bg:#ffffff;
  --bg-secondary:#f5f5f7;
  --bg-tertiary:#fbfbfd;
  --card:rgba(255,255,255,0.8);
  --card-border:rgba(0,0,0,0.06);
  --glass:rgba(255,255,255,0.72);
  --glass-border:rgba(0,0,0,0.08);
  --text:#1d1d1f;
  --text-secondary:#6e6e73;
  --text-muted:#86868b;
  --shadow-sm:0 2px 12px rgba(0,0,0,0.04);
  --shadow-md:0 8px 30px rgba(0,0,0,0.06);
  --shadow-lg:0 20px 60px rgba(0,0,0,0.08);
  --shadow-glow:0 8px 40px rgba(0,113,227,0.12);
  --radius-sm:12px;
  --radius-md:20px;
  --radius-lg:32px;
  --font:'Inter','Noto Sans SC',system-ui,-apple-system,sans-serif;
  --nav-height:56px;
  --admin-bar-height:32px;
  --ease:cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
}

/* --- Base Typography --- */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-height) + 24px);font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
body{overflow-x:hidden;background:var(--bg)}

h2{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;letter-spacing:-0.03em;line-height:1.1}
h3{font-size:clamp(1.25rem,2.5vw,1.75rem);font-weight:600;line-height:1.3}

.section-label{font-size:0.75rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--primary);margin-bottom:1rem;display:block}

/* --- Ambient Orbs --- */
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ambient-orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:0.5;will-change:transform}
.ambient-orb.a1{width:700px;height:700px;background:rgba(0,113,227,0.06);top:-200px;right:-100px;animation:ambientFloat 20s ease-in-out infinite}
.ambient-orb.a2{width:500px;height:500px;background:rgba(52,199,89,0.05);bottom:-100px;left:-100px;animation:ambientFloat 25s ease-in-out infinite reverse}
.ambient-orb.a3{width:400px;height:400px;background:rgba(175,82,222,0.04);top:40%;left:60%;animation:ambientFloat 18s ease-in-out infinite 5s}
@keyframes ambientFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(50px,-30px) scale(1.05)}66%{transform:translate(-30px,50px) scale(0.95)}}

/* --- Shared Layout --- */
.section{padding:clamp(6rem,12vw,10rem) clamp(1.5rem,8vw,6rem);position:relative;z-index:1}
.section-center{text-align:center}
.section-header{max-width:700px;margin-bottom:4rem}
.section-center .section-header{margin-left:auto;margin-right:auto}
.section-header p{color:var(--text-secondary);font-size:1.125rem;line-height:1.7;margin-top:1rem;font-weight:400}
.container{max-width:1200px;margin:0 auto}

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:0.875rem 2rem;border-radius:100px;font-size:0.9375rem;font-weight:500;text-decoration:none;transition:all 0.4s var(--ease);cursor:pointer;border:none;gap:0.5rem}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 16px rgba(0,113,227,0.25)}
.btn-primary:hover{background:var(--primary-light);box-shadow:0 8px 32px rgba(0,113,227,0.35);transform:translateY(-2px) scale(1.02)}
.btn-secondary{background:var(--bg-secondary);color:var(--text);border:1px solid var(--card-border)}
.btn-secondary:hover{background:#fff;box-shadow:var(--shadow-md);transform:translateY(-2px)}

/* --- Reveal Animations --- */
.reveal{opacity:0;transform:translateY(50px);transition:opacity 0.9s var(--ease-out),transform 0.9s var(--ease-out)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* --- Reduced Motion --- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* --- Admin Bar Offset --- */
.admin-bar .nav{top:var(--admin-bar-height,32px)}
.admin-bar .nav.scrolled{top:calc(12px + var(--admin-bar-height,32px))}