:root{
  --primary-color: #f97316; /* 橙色 */
  --secondary-color: #fb923c; /* 渐变辅色 */
  --accent-color: #ffffff; /* 需要的强调色可设置成白 */
  --dark-color:#111827;
}

body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;}

/* Navbar scroll effect */
#navbar{transition:all .25s ease;background:transparent;}
#navbar.scrolled{background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.08)}
.brand-icon{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff}
.brand-icon--footer{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color))}

.footer-link{color:rgba(255,255,255,.65);text-decoration:none}
.footer-link:hover{color:#fff;text-decoration:underline}

.gradient-text{
  background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-section{min-height:100vh;background:linear-gradient(180deg,#f8fafc 0%, #ffffff 70%);overflow:hidden}
.hero-padding{padding-top:5rem}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.10;z-index:0}
.hero-section .container{position:relative;z-index:1}

.hero-card{border-radius:20px;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.08)}
.stat-tile{border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:14px;background:#fff}
.chart-wrap{height:260px}

.scroll-hint i{animation:bounce 2s infinite}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-6px)}}

.feature-card{border:1px solid rgba(0,0,0,.06);border-radius:16px;background:#fff;transition:all .25s ease}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(0,0,0,.10)}
.feature-icon{width:56px;height:56px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(249,115,22,.12);color:var(--primary-color);font-size:22px}

.img-panel{height:280px;border-radius:22px;background:linear-gradient(135deg, rgba(249,115,22,.20), rgba(251,146,60,.14));box-shadow:0 16px 40px rgba(0,0,0,.08)}
.img-panel--alt{background:linear-gradient(135deg, rgba(249,115,22,.18), rgba(251,146,60,.12))}

.metric{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:20px}
.metric-value{font-size:40px;font-weight:800;line-height:1}
.metric-label{opacity:.9;margin-top:8px}

.case-card{border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.06);box-shadow:0 10px 24px rgba(0,0,0,.06)}
.case-icon{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px}

.pricing-card{border:1px solid rgba(0,0,0,.08);border-radius:18px;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.05)}
.pricing-card--featured{transform:translateY(-6px);box-shadow:0 18px 40px rgba(249,115,22,.18)}

.contact-card,.contact-form{border:1px solid rgba(0,0,0,.06);border-radius:18px;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.05)}
.contact-icon{width:44px;height:44px;border-radius:14px;background:rgba(249,115,22,.12);color:var(--primary-color);display:flex;align-items:center;justify-content:center}

/* === Theme bridge: Tailwind blue -> orange (for templates using bg-blue/text-blue classes) === */
.bg-blue-600{background-color:var(--primary-color)!important}
.bg-blue-400{background-color:#fdba74!important}
.bg-blue-700{background-color:#ea580c!important}
.bg-blue-800{background-color:#c2410c!important}
.bg-blue-500{background-color:#fb923c!important}
.bg-blue-200{background-color:rgba(249,115,22,.18)!important}
.text-blue-600{color:var(--primary-color)!important}
.text-blue-400{color:#fdba74!important}
.text-blue-500{color:#fb923c!important}
.text-blue-700{color:#c2410c!important}
.text-blue-800{color:#9a3412!important}
.text-blue-900{color:#7c2d12!important}
.border-blue-600{border-color:var(--primary-color)!important}
.border-blue-700{border-color:#c2410c!important}
.border-blue-500{border-color:#fb923c!important}
.border-blue-400{border-color:#fdba74!important}
.bg-blue-50{background-color:rgba(249,115,22,.08)!important}
.bg-blue-100{background-color:rgba(249,115,22,.14)!important}

/* gradients */
.from-blue-600{--tw-gradient-from:var(--primary-color) var(--tw-gradient-from-position)!important;--tw-gradient-to:rgba(249,115,22,0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)!important}
.to-blue-400{--tw-gradient-to:#fdba74 var(--tw-gradient-to-position)!important}
.to-blue-500{--tw-gradient-to:#fb923c var(--tw-gradient-to-position)!important}

/* hover variants (escaped colons) */
.hover\:bg-blue-600:hover{background-color:var(--primary-color)!important}
.hover\:bg-blue-700:hover{background-color:#ea580c!important}
.hover\:bg-blue-500:hover{background-color:#fb923c!important}
.hover\:bg-blue-50:hover{background-color:rgba(249,115,22,.08)!important}
.hover\:text-blue-600:hover{color:var(--primary-color)!important}
.hover\:text-blue-500:hover{color:#fb923c!important}
.hover\:text-blue-400:hover{color:#fdba74!important}
.hover\:text-blue-800:hover{color:#9a3412!important}

/* shadow color variants like shadow-blue-500/20 (slash must be escaped) */
.shadow-blue-500\/20{--tw-shadow-color:rgba(249,115,22,.20)!important;--tw-shadow:var(--tw-shadow-colored)!important}
.shadow-blue-500\/30{--tw-shadow-color:rgba(249,115,22,.30)!important;--tw-shadow:var(--tw-shadow-colored)!important}
.hover\:shadow-blue-500\/30:hover{--tw-shadow-color:rgba(249,115,22,.30)!important;--tw-shadow:var(--tw-shadow-colored)!important}

/* focus ring/border variants */
.focus\:ring-blue-500:focus{--tw-ring-color:rgba(249,115,22,.45)!important}
.focus\:border-blue-500:focus{border-color:var(--primary-color)!important}
.focus\:ring-blue-500\/20:focus{--tw-ring-color:rgba(249,115,22,.20)!important}

/* Corporate-orange: approximate blue raster logo -> orange */
.navbar .site-logo-img{
  filter:hue-rotate(170deg) saturate(240%) brightness(1.05);
}