@font-face { font-family: InterVariable; src: url("assets/InterVariable.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
:root { --brand-25: #f8faff; --brand-50: #eef4ff; --brand-100: #e4eeff; --brand-200: #caddff; --brand-300: #9fc0ff; --brand-400: #6e96ff; --brand-500: #336ffc; --brand-600: #2563eb; --brand-700: #1d4ed8; --brand-800: #1e40af; --brand-900: #1e3a8a; --brand-950: #172554; --ai-50: #f5f3ff; --ai-100: #ede9fe; --ai-200: #ddd6fe; --ai-300: #c4b5fd; --ai-400: #947afc; --ai-500: #6b5cf6; --ai-600: #5b3df5; --ai-700: #432eff; --neutral-0: #fff; --neutral-25: #fdfdfd; --neutral-50: #fafafa; --neutral-100: #f5f7fa; --neutral-200: #e9eefa; --neutral-300: #d6dde8; --neutral-400: #9aa4b2; --neutral-500: #6b7280; --neutral-600: #565e6d; --neutral-700: #3d3d3d; --neutral-800: #2f2f2f; --neutral-900: #17181b; --neutral-950: #000b17; --success-50: #ecfdf3; --success-100: #d1fadf; --success-500: #12b76a; --success-600: #039855; --warning-50: #fffaeb; --warning-100: #fef0c7; --warning-500: #f79009; --info-50: #eff8ff; --info-100: #d1e9ff; --info-500: #2e90fa; --bg-canvas: var(--neutral-100); --bg-primary: var(--neutral-0); --bg-secondary: var(--neutral-50); --bg-brand-subtle: var(--brand-25); --bg-ai-subtle: var(--ai-50); --text-primary: var(--neutral-900); --text-secondary: var(--neutral-600); --text-tertiary: var(--neutral-500); --text-brand: var(--brand-600); --text-ai: var(--ai-700); --border-subtle: var(--neutral-200); --border-default: var(--neutral-300); --border-strong: #c7cfde; --action-primary: var(--brand-600); --action-primary-hover: var(--brand-700); --action-primary-pressed: var(--brand-800); --focus-ring: var(--brand-100); --radius-control: 10px; --radius-sm: 6px; --radius-md: 8px; --radius-card: 14px; --radius-dialog: 16px; --radius-marketing: 20px; --radius-xl: 24px; --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05); --shadow-card: 0 4px 15px rgba(194, 210, 231, .25); --shadow-card-hover: 0 4px 10px rgba(194, 208, 220, .38); --shadow-marketing: 0 4px 10px rgba(146, 210, 255, .32); --shadow-floating: 0 4px 17px rgba(30, 58, 96, .17); --shadow-modal: 0 12px 32px -4px rgba(16, 24, 40, .16); --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-emphasized: cubic-bezier(.16, 1, .3, 1); --page: min(1200px, calc(100vw - 128px)); }
html { color-scheme: light; }
body { color: var(--text-primary); background: var(--bg-primary); font-family: InterVariable, Inter, "Microsoft YaHei", "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif; font-size: 14px; line-height: 22px; }
::selection { color: var(--neutral-0); background: var(--brand-600); }
:where(a, button):focus-visible { outline: 4px solid var(--focus-ring); outline-offset: 3px; }
.site-header { border-bottom: 1px solid var(--border-subtle); background: rgba(255, 255, 255, 0.94); box-shadow: var(--shadow-xs); backdrop-filter: blur(10px); }
.brand-logo { width: 186px; height: 28px; }
.main-nav { gap: 32px; color: var(--neutral-700); font-size: 14px; line-height: 20px; }
.main-nav a { transition: color 120ms var(--ease-standard); }
.main-nav a:hover { color: var(--brand-600); }
.main-nav a.active::after, .main-nav a:first-child::after { background: var(--brand-500); }
.language { min-height: 40px; padding: 0px 16px; border-color: var(--border-default); border-radius: var(--radius-control); box-shadow: var(--shadow-xs); transition: background 120ms var(--ease-standard), border-color 120ms var(--ease-standard); }
.language:hover { border-color: var(--brand-200); background: var(--brand-25); }
.button { min-height: 44px; padding: 0px 18px; border-radius: var(--radius-control); background: var(--action-primary); box-shadow: var(--shadow-xs); font-size: 14px; line-height: 20px; transition: background 120ms var(--ease-standard), border-color 120ms var(--ease-standard), box-shadow 180ms var(--ease-standard), transform 180ms var(--ease-emphasized); }
.button:hover { background: var(--action-primary-hover); box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.button:active { background: var(--action-primary-pressed); box-shadow: var(--shadow-xs); transform: none; }
.button.secondary { border-color: var(--border-default); color: var(--text-primary); background: var(--neutral-0); box-shadow: var(--shadow-xs); }
.button.secondary:hover { border-color: var(--brand-200); background: var(--brand-25); box-shadow: var(--shadow-xs); }
.button.secondary:active { border-color: var(--brand-300); background: var(--brand-50); }
.button.light:hover { color: var(--brand-800); background: var(--brand-50); }
.button.ghost-light:hover { border-color: rgba(255, 255, 255, 0.36); background: rgba(255, 255, 255, 0.12); }
.hero, .page-hero { background-color: var(--brand-25); }
.hero::before, .page-hero::before { background: var(--ai-100); opacity: 0.22; }
.hero::after, .page-hero::after { background: var(--info-100); opacity: 0.22; }
.hero-inner { grid-template-columns: 5fr 7fr; }
.hero-copy { max-width: 560px; }
h1, .page-hero h1 { max-width: 600px; font-size: 48px; line-height: 60px; letter-spacing: -0.01em; }
.hero-gradient, .gradient-text { color: var(--brand-700); background: none; -webkit-text-fill-color: currentcolor; }
.hero-lead { margin-top: 24px; color: var(--text-secondary); font-size: 16px; line-height: 26px; }
.hero-actions { margin-top: 32px; }
.eyebrow, .kicker { color: var(--text-brand); font-size: 12px; line-height: 18px; letter-spacing: 0.04em; }
.eyebrow::before { background: var(--brand-500); }
.kicker-dot { background: var(--ai-500); box-shadow: 0 0 0 4px var(--ai-100); }
.float-card, .float-note { border-color: rgba(255, 255, 255, 0.92); border-radius: var(--radius-card); background: rgba(255, 255, 255, 0.88); box-shadow: var(--shadow-floating); backdrop-filter: blur(10px); }
.float-icon, .float-note i { border-radius: var(--radius-control); }
.section { padding: 96px 0px; }
.section.soft { background: var(--bg-brand-subtle); }
.section.cool { background: linear-gradient(135deg, var(--brand-50), var(--ai-50)); }
.section.dark, .section.blue, .method-section { color: rgb(255, 255, 255); background: var(--neutral-950); }
.method-section::before { background: none; }
.section-head { margin-bottom: 48px; }
h2 { font-size: 40px; line-height: 52px; letter-spacing: -0.01em; }
h3 { font-size: 20px; line-height: 30px; letter-spacing: 0px; }
.section-head p, .section-head.left p { margin-top: 16px; color: var(--text-secondary); font-size: 16px; line-height: 26px; }
.diagnosis-shell, .product-visual, .screen-card, .product-frame { border-radius: var(--radius-marketing); box-shadow: var(--shadow-marketing); }
.diagnosis-tabs { background: var(--brand-25); }
.tab-button { border-radius: var(--radius-control); transition: color 120ms var(--ease-standard), background 120ms var(--ease-standard), border-color 120ms var(--ease-standard), box-shadow 180ms var(--ease-standard); }
.tab-button:hover { color: var(--brand-700); background: var(--brand-50); }
.tab-button.is-active { border-color: var(--brand-200); box-shadow: var(--shadow-xs); }
.tab-index { border-radius: var(--radius-md, 8px); }
.insight-card, .product-badge, .evidence-badge { border-radius: var(--radius-card); box-shadow: var(--shadow-floating); backdrop-filter: blur(10px); }
.journey { border-radius: var(--radius-marketing) var(--radius-marketing) 0 0; box-shadow: var(--shadow-floating); backdrop-filter: blur(10px); }
.workflow-section { background: linear-gradient(180deg, var(--brand-50), var(--brand-25)); }
.workflow-orb { opacity: 0.24; }
.step-card, .method-card, .audience-card, .feature-card, .outcome-card, .principle, .application-card, .stage-card, .summary-card, .project-details, .moment-card { border-color: var(--border-subtle); border-radius: var(--radius-marketing); box-shadow: var(--shadow-card); transition: transform 180ms var(--ease-emphasized), box-shadow 180ms var(--ease-standard), border-color 120ms var(--ease-standard); }
.step-card:hover, .audience-card:hover, .feature-card:hover, .stage-card:hover, .moment-card:hover { border-color: var(--brand-200); box-shadow: var(--shadow-marketing); transform: translateY(-4px); }
.stage-card:hover { transform: translateX(4px); }
.method-card { border-color: rgba(255, 255, 255, 0.12); background: rgb(16, 24, 40); box-shadow: none; backdrop-filter: none; }
.method-card::before { background: var(--brand-400); }
.method-card:nth-child(2)::before { background: var(--ai-400); }
.method-card:nth-child(3)::before { background: var(--info-500); }
.method-card:nth-child(4)::before { background: var(--success-500); }
.method-links a { min-height: 40px; border-radius: var(--radius-control); transition: background 120ms var(--ease-standard), border-color 120ms var(--ease-standard); }
.method-links a:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.1); }
.benefit { border-color: var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.evidence-section { background: linear-gradient(135deg, var(--brand-50), var(--ai-50)); }
.screen-card { transform: rotate(0.75deg); }
.radar-card { border-radius: var(--radius-dialog); box-shadow: var(--shadow-floating); transform: rotate(-1.5deg); }
.audience-content p { color: rgba(255, 255, 255, 0.7); }
.inline-cta { padding: 24px 0px; background: var(--neutral-0); }
.inline-cta-inner { padding: 64px; border: 1px solid var(--brand-100); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--brand-50), var(--ai-50)); }
.inline-cta-inner p { font-size: 16px; line-height: 26px; }
.cta-panel { border-radius: var(--radius-xl); background: var(--neutral-950); }
.cta-panel::after { background: var(--brand-500); opacity: 0.18; }
.footer { color: rgba(255, 255, 255, 0.7); background: var(--neutral-950); }
.footer-main { padding-top: 64px; }
.footer .logo { border-radius: var(--radius-sm, 6px); box-shadow: var(--shadow-xs); }
.footer-col strong { font-size: 12px; line-height: 18px; }
.footer-col a, .footer-brand p, .footer-brand > a:not(.logo) { font-size: 12px; line-height: 18px; }
.footer a { transition: color 120ms var(--ease-standard); }
.footer-bottom { border-color: rgba(255, 255, 255, 0.08); }
.quick-rail a { border-radius: var(--radius-card); box-shadow: var(--shadow-floating); backdrop-filter: blur(10px); transition: color 120ms var(--ease-standard), background 120ms var(--ease-standard), transform 180ms var(--ease-emphasized); }
.reveal { transform: translateY(16px); transition: opacity 240ms var(--ease-emphasized), transform 240ms var(--ease-emphasized); }
@media (max-width: 1050px) {
  :root { --page: min(1200px, calc(100vw - 64px)); }
  .hero-inner { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --page: calc(100vw - 40px); }
  .brand-logo { width: 148px; height: auto; }
  h1, .page-hero h1 { font-size: 40px; line-height: 52px; }
  h2 { font-size: 32px; line-height: 44px; }
  .hero-lead { font-size: 16px; line-height: 26px; }
  .section { padding: 72px 0px; }
  .inline-cta { padding: 20px 0px; }
  .inline-cta-inner { padding: 48px 24px; }
  .footer-main { padding-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}