/* ═══════════════════════════════════════════════════════════════
   宅运 ZaiYun — Design System v2
   Cinematic Dark Luxury · Bilingual · Video Hero
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Serif+SC:wght@400;600;700&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
img, video, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }

/* ── Tokens ── */
:root {
  --c-bg:          #0a0a0f;
  --c-surface:     #111827;
  --c-surface-alt: #1a1f2e;
  --c-border:      rgba(201,168,76,0.12);
  --c-border-hover:rgba(201,168,76,0.3);
  --c-gold:        #c9a84c;
  --c-gold-dim:    #a08535;
  --c-gold-glow:   rgba(201,168,76,0.15);
  --c-teal:        #10b981;
  --c-red:         #ef4444;
  --c-text:        #e5e7eb;
  --c-text-muted:  #9ca3af;
  --c-text-dim:    #6b7280;
  --f-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-serif: 'Noto Serif SC', 'Songti SC', serif;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-lg: 1.125rem;
  --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 2rem; --fs-hero: clamp(2.5rem,6vw,4.5rem);
  --sp-xs:.25rem;--sp-sm:.5rem;--sp-md:1rem;--sp-lg:1.5rem;--sp-xl:2rem;--sp-2xl:3rem;--sp-3xl:4rem;--sp-4xl:6rem;
  --max-w: 1200px; --nav-h: 64px;
  --radius: 12px; --radius-sm: 8px; --radius-lg: 16px;
  --glass-bg: rgba(17,24,39,0.75);
  --glass-blur: blur(16px);
  --glass-border: 1px solid var(--c-border);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 30px var(--c-gold-glow);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --t-fast: .2s; --t-med: .35s; --t-slow: .6s;
}

body { font-family:var(--f-sans); font-size:var(--fs-base); line-height:1.7; color:var(--c-text); background:var(--c-bg); overflow-x:hidden; }
h1,h2,h3,h4,h5 { font-family:var(--f-serif); font-weight:700; line-height:1.25; color:#fff; }
h1 { font-size:var(--fs-hero); letter-spacing:-.02em; }
h2 { font-size:var(--fs-3xl); } h3 { font-size:var(--fs-2xl); } h4 { font-size:var(--fs-xl); }

.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--sp-lg); }
.section { padding:var(--sp-4xl) 0; }
.section-dark { background:var(--c-surface); }
.section-header { text-align:center; margin-bottom:var(--sp-3xl); }
.section-header h2 { margin-bottom:var(--sp-md); }
.section-header p { color:var(--c-text-muted); max-width:600px; margin:0 auto; font-size:var(--fs-lg); }
.section-label { display:inline-block; font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.15em; color:var(--c-gold); margin-bottom:var(--sp-sm); }

/* ═══════ Nav ═══════ */
.nav { position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:1000; transition:background var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
.nav.scrolled { background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:0 1px 0 var(--c-border); }
.nav-inner { max-width:var(--max-w); margin:0 auto; padding:0 var(--sp-lg); height:100%; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { font-family:var(--f-serif); font-size:var(--fs-xl); font-weight:700; color:var(--c-gold); display:flex; align-items:center; gap:var(--sp-sm); }
.brand-mark { width:30px; height:30px; color:var(--c-gold); flex-shrink:0; }
.nav-logo-en { font-family:var(--f-sans); font-size:var(--fs-sm); opacity:.6; margin-left:4px; }
.nav-links { display:flex; gap:var(--sp-xl); align-items:center; }
.nav-link { font-size:var(--fs-sm); font-weight:500; color:var(--c-text-muted); transition:color var(--t-fast); position:relative; }
.nav-link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--c-gold); transition:width var(--t-med) var(--ease-out); }
.nav-link:hover, .nav-link.active { color:var(--c-gold); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }

/* Language toggle */
.nav-lang-btn { font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em; color:var(--c-gold); border:1px solid var(--c-gold-dim); border-radius:999px; padding:4px 14px; transition:all var(--t-fast); }
.nav-lang-btn:hover { background:var(--c-gold); color:#0a0a0f; }

/* Hamburger */
.nav-hamburger { display:none; flex-direction:column; gap:5px; width:24px; padding:4px 0; }
.nav-hamburger span { display:block; height:2px; background:var(--c-text); border-radius:2px; transition:transform var(--t-fast), opacity var(--t-fast); }
.nav-hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

@media (max-width:768px) {
  .nav-hamburger { display:flex; }
  .nav-links { position:fixed; top:var(--nav-h); left:0; right:0; background:var(--glass-bg); backdrop-filter:var(--glass-blur); flex-direction:column; padding:var(--sp-xl); gap:var(--sp-lg); transform:translateY(-120%); transition:transform var(--t-med) var(--ease-out); border-bottom:1px solid var(--c-border); }
  .nav-links.open { transform:translateY(0); }
}

/* ═══════ Cinematic Hero ═══════ */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }

.hero-video-wrap { position:absolute; inset:0; z-index:0; }
.hero-video { width:100%; height:100%; object-fit:cover; opacity:.4; }
.hero-particles { position:absolute; inset:0; width:100%; height:100%; }

/* Film grain overlay */
.hero-overlay { position:absolute; inset:0; pointer-events:none; }
.hero-overlay-grain { z-index:1; opacity:.04; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-overlay-gradient { z-index:2; background:linear-gradient(180deg, rgba(10,10,15,.2) 0%, rgba(10,10,15,.6) 50%, var(--c-bg) 100%); }
.hero-overlay-vignette { z-index:2; background:radial-gradient(ellipse at center, transparent 40%, rgba(10,10,15,.7) 100%); }

.hero-content { position:relative; z-index:3; max-width:860px; padding:0 var(--sp-lg); }
.hero-badge { display:inline-flex; align-items:center; gap:var(--sp-sm); font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--c-gold); border:1px solid var(--c-gold-dim); border-radius:999px; padding:var(--sp-xs) var(--sp-md); margin-bottom:var(--sp-xl); }
.hero-badge::before { content:''; width:8px; height:8px; border:1px solid currentColor; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(201,168,76,.12); flex-shrink:0; }
.hero-title { margin-bottom:var(--sp-lg); }
.hero-title em { font-style:normal; color:var(--c-gold); text-shadow:0 0 40px rgba(201,168,76,.3); }
.hero-line { display:block; }
.hero-line-1 { font-size:clamp(1.5rem,4vw,2.8rem); font-weight:400; color:var(--c-text-muted); letter-spacing:.1em; margin-bottom:var(--sp-sm); }
.hero-line-2 { font-size:var(--fs-hero); }
.hero-sub { font-size:var(--fs-lg); color:var(--c-text-muted); margin-bottom:var(--sp-2xl); line-height:1.8; }
.hero-actions { display:flex; gap:var(--sp-md); justify-content:center; flex-wrap:wrap; }

/* Glow button */
.btn { display:inline-flex; align-items:center; gap:var(--sp-sm); font-size:var(--fs-sm); font-weight:600; padding:14px 32px; border-radius:var(--radius); transition:all var(--t-med) var(--ease-out); }
.btn-product::before { content:''; width:16px; height:16px; border:1.5px solid currentColor; border-radius:50%; background:linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat, linear-gradient(90deg,currentColor,currentColor) center/10px 1.5px no-repeat; opacity:.82; flex-shrink:0; }
.btn-video::before { content:''; width:16px; height:16px; border:1.5px solid currentColor; border-radius:4px; background:linear-gradient(90deg,currentColor,currentColor) 50% 50%/0 0 no-repeat; clip-path:polygon(0 0,100% 0,100% 100%,0 100%); opacity:.82; flex-shrink:0; }
.btn-video::after { content:''; width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid currentColor; margin-left:-25px; margin-right:9px; opacity:.82; pointer-events:none; }
.btn-primary { background:linear-gradient(135deg,var(--c-gold),var(--c-gold-dim)); color:#0a0a0f; box-shadow:0 4px 20px rgba(201,168,76,.3); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(201,168,76,.45); }
.btn-glow { animation:btn-pulse 3s ease-in-out infinite; }
@keyframes btn-pulse { 0%,100%{box-shadow:0 4px 20px rgba(201,168,76,.3)} 50%{box-shadow:0 4px 40px rgba(201,168,76,.55)} }
.btn-outline { border:1px solid var(--c-border-hover); color:var(--c-text); }
.btn-outline:hover { background:var(--c-gold-glow); border-color:var(--c-gold); color:var(--c-gold); }
.btn-cinematic { backdrop-filter:blur(8px); background:rgba(255,255,255,.04); }

/* Scroll indicator */
.hero-scroll-indicator { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); z-index:3; text-align:center; }
.hero-scroll-indicator span { display:block; font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--c-text-dim); margin-bottom:var(--sp-sm); }
.hero-scroll-line { width:1px; height:40px; background:linear-gradient(to bottom,var(--c-gold),transparent); margin:0 auto; animation:scroll-line 2s ease-in-out infinite; }
@keyframes scroll-line { 0%{opacity:1;transform:scaleY(1)} 50%{opacity:.4;transform:scaleY(.5)} 100%{opacity:1;transform:scaleY(1)} }

/* ═══════ Feature Cards ═══════ */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-xl); }
@media (max-width:768px) { .features-grid { grid-template-columns:1fr; } }
.feature-card { background:var(--c-surface); border:var(--glass-border); border-radius:var(--radius-lg); padding:var(--sp-2xl); text-align:center; transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med); }
.feature-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-glow); border-color:var(--c-border-hover); }
.feature-icon-wrap { width:64px; height:64px; margin:0 auto var(--sp-lg); display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(201,168,76,.06); border:1px solid rgba(201,168,76,.15); }
.feature-icon, .media-icon { width:32px; height:32px; color:var(--c-gold); stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.feature-card h3 { font-size:var(--fs-xl); margin-bottom:var(--sp-md); }
.feature-card p { color:var(--c-text-muted); font-size:var(--fs-sm); line-height:1.7; }

/* ═══════ Tool Teaser ═══════ */
.tool-teaser { max-width:600px; margin:0 auto; text-align:center; }
.tool-teaser-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:320px; margin:0 auto var(--sp-xl); }
.tool-cell { background:var(--c-surface-alt); border:1px solid var(--c-border); border-radius:var(--radius-sm); padding:16px 8px; font-size:.8rem; color:var(--c-text-muted); text-align:center; transition:border-color var(--t-fast); }
.tool-cell:hover { border-color:var(--c-border-hover); }
.tool-cell-center { background:rgba(201,168,76,.06); border-color:var(--c-gold-dim); color:var(--c-gold); font-size:1.2rem; }
.grid-mark { display:inline-block; width:22px; height:22px; border:1.5px solid currentColor; border-radius:50%; background:linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat, linear-gradient(90deg,currentColor,currentColor) center/14px 1.5px no-repeat; opacity:.8; }
.marker { display:block; font-size:1.1rem; font-weight:700; margin-top:4px; }
.marker-master { color:var(--c-teal); }
.marker-kitchen { color:var(--c-red); }
.marker-door { color:#3b82f6; }
.tool-teaser-status { font-size:var(--fs-sm); color:var(--c-gold); margin-bottom:var(--sp-md); padding:8px 16px; border:1px dashed var(--c-gold-dim); border-radius:var(--radius); display:inline-flex; align-items:center; gap:8px; }
.tool-teaser-status::before { content:''; width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.7; }
.tool-teaser-hint { color:var(--c-text-muted); font-size:.85rem; margin-bottom:var(--sp-lg); }

/* ═══════ Cards ═══════ */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--sp-xl); }
@media (max-width:480px) { .card-grid { grid-template-columns:1fr; } }
.card { background:var(--c-surface); border:var(--glass-border); border-radius:var(--radius); overflow:hidden; transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med), border-color var(--t-med); }
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:var(--c-border-hover); }
.card-media { position:relative; aspect-ratio:16/9; background:var(--c-surface-alt); overflow:hidden; }
.card-body { padding:var(--sp-lg); }
.card-body h4 { margin-bottom:var(--sp-sm); font-size:var(--fs-lg); }
.card-body p { color:var(--c-text-muted); font-size:var(--fs-sm); line-height:1.6; }
.card-tag { display:inline-block; font-size:var(--fs-xs); font-weight:600; padding:2px 10px; border-radius:999px; background:var(--c-gold-glow); color:var(--c-gold); margin-bottom:var(--sp-sm); }

/* Video cards */
.video-card .card-media::after { content:'▶'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2rem; color:rgba(255,255,255,.85); background:rgba(0,0,0,.3); opacity:0; transition:opacity var(--t-fast); }
.video-card:hover .card-media::after { opacity:1; }
.card-media .media-icon { width:48px; height:48px; color:rgba(255,255,255,.8); opacity:.86; }
.ep-badge { position:absolute; top:var(--sp-sm); left:var(--sp-sm); font-size:var(--fs-xs); font-weight:700; padding:4px 12px; border-radius:var(--radius-sm); background:var(--c-gold); color:#0a0a0f; z-index:2; }

/* Case cards */
.case-card { background:var(--c-surface-alt); border:var(--glass-border); border-radius:var(--radius); padding:var(--sp-lg); transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med), border-color var(--t-med); }
.case-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-glow); border-color:var(--c-border-hover); }
.case-card-header { display:flex; align-items:flex-start; gap:var(--sp-md); margin-bottom:var(--sp-md); }
.case-id { font-family:var(--f-serif); font-size:var(--fs-2xl); font-weight:700; color:var(--c-gold); flex-shrink:0; line-height:1; }
.case-card h4 { font-size:var(--fs-base); line-height:1.4; }
.case-diagnosis { color:var(--c-text-muted); font-size:var(--fs-sm); line-height:1.7; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.case-source { font-size:var(--fs-xs); color:var(--c-text-dim); margin-top:var(--sp-md); font-style:italic; }

/* ═══════ CTA ═══════ */
.cta-banner { background:linear-gradient(135deg,var(--c-surface),var(--c-surface-alt)); border:var(--glass-border); border-radius:var(--radius-lg); padding:var(--sp-3xl) var(--sp-2xl); text-align:center; }
.cta-banner h2 { margin-bottom:var(--sp-md); }
.cta-banner p { color:var(--c-text-muted); margin-bottom:var(--sp-xl); max-width:500px; margin-left:auto; margin-right:auto; }

/* ═══════ Tool Page ═══════ */
.tool-wrapper { padding-top:var(--nav-h); height:100vh; display:flex; flex-direction:column; }
.tool-bar { display:flex; align-items:center; justify-content:space-between; padding:var(--sp-sm) var(--sp-lg); background:var(--c-surface); border-bottom:1px solid var(--c-border); flex-shrink:0; }
.tool-bar-title { font-family:var(--f-serif); font-size:var(--fs-sm); color:var(--c-text-muted); display:inline-flex; align-items:center; gap:8px; }
.tool-bar-title::before { content:''; width:14px; height:14px; border:1.5px solid var(--c-gold); border-radius:50%; background:linear-gradient(var(--c-gold),var(--c-gold)) center/1px 9px no-repeat, linear-gradient(90deg,var(--c-gold),var(--c-gold)) center/9px 1px no-repeat; opacity:.8; flex-shrink:0; }
.tool-bar a { font-size:var(--fs-sm); color:var(--c-gold); }
.tool-bar a:hover { text-decoration:underline; }
.tool-frame { flex:1; border:none; width:100%; }

/* ═══════ About ═══════ */
.about-hero { padding-top:calc(var(--nav-h) + var(--sp-4xl)); padding-bottom:var(--sp-3xl); text-align:center; }
.about-content { max-width:900px; margin:0 auto; padding:0 var(--sp-lg); }
.about-content h3 { margin-top:var(--sp-3xl); margin-bottom:var(--sp-lg); color:var(--c-gold); }
.about-content p { margin-bottom:var(--sp-lg); line-height:1.9; color:var(--c-text-muted); }
.about-content blockquote { border-left:3px solid var(--c-gold); padding-left:var(--sp-lg); margin:var(--sp-xl) 0; font-family:var(--f-serif); font-size:var(--fs-lg); color:var(--c-text); line-height:1.9; }

/* ═══════ Footer ═══════ */
.footer { border-top:1px solid var(--c-border); padding:var(--sp-2xl) 0; text-align:center; color:var(--c-text-dim); font-size:var(--fs-sm); }
.footer p { margin-bottom:var(--sp-sm); }
.footer a { color:var(--c-gold); }
.footer a:hover { text-decoration:underline; }
.footer-links { display:flex; justify-content:center; gap:var(--sp-lg); margin-bottom:var(--sp-md); flex-wrap:wrap; }

/* ═══════ Animations ═══════ */
.fade-in { opacity:0; transform:translateY(24px); transition:opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.fade-in.visible { opacity:1; transform:translateY(0); }
.stagger > * { transition-delay:calc(var(--i,0) * 80ms); }

/* ═══════ Utilities ═══════ */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }