/* ==========================================================
   Matrix Causal Tech - Static Resource Hub
   Style inspired by the provided screenshots (blue e-commerce style)
   ========================================================== */

:root{
  --primary:#1675FF;
  --primary-2:#22C1FF;
  --primary-dark:#0B3EA9;
  --nav-bg:#1A76FF;
  --nav-deep:#0F4FEB;
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#F3F6FB;
  --text:#0E1A2A;
  --muted:#6B7A90;
  --border:#E6ECF5;
  --shadow: 0 14px 35px rgba(9, 30, 66, .12);
  --shadow-soft: 0 10px 25px rgba(9, 30, 66, .10);
  --radius:14px;
  --radius-lg:18px;
  --container:1180px;
  --header-height:160px; /* will be corrected by JS */
  --promo-overlap: 56px; /* promo cards overlap hero */
}


*{box-sizing:border-box}
html,body{height:100%}

/* Ensure anchor jumps account for sticky header */
[id^="section-"], #top{
  scroll-margin-top: calc(var(--header-height) + 18px);
}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color:var(--text);
  background:var(--bg);
  padding-top: var(--header-height);
}

a{color:inherit; text-decoration:none}
button,input{font-family:inherit}
img{max-width:100%; display:block}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 18px;
}

.visually-hidden{
  position:absolute!important;
  height:1px; width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

/* ----------------------------------------------------------
   Top bar
---------------------------------------------------------- */
.site-shell{
  position:fixed;
  left:0; right:0; top:0;
  z-index:999;
  background:transparent;
}

.topbar{
  background: linear-gradient(90deg, #0E3DA8, #1675FF);
  color:#fff;
  font-size:13px;
}

.topbar .topbar-inner{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
}

.topbar .badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  letter-spacing:.2px;
}

.topbar .dot{
  width:8px; height:8px;
  border-radius:50%;
  background:#40D6FF;
  box-shadow: 0 0 0 4px rgba(64,214,255,.18);
}

.topbar a{
  color:#fff;
  opacity:.92;
}
.topbar a:hover{opacity:1; text-decoration:underline}

.topbar .topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
}
.topbar .divider{
  width:1px;
  height:12px;
  background: rgba(255,255,255,.35);
}

/* ----------------------------------------------------------
   Header main (logo + search + CTA)
---------------------------------------------------------- */
.header-main{
  background:#fff;
  border-bottom:1px solid var(--border);
}

.header-main .inner{
  display:grid;
  grid-template-columns: 280px 1fr minmax(340px, max-content);
  gap:18px;
  align-items:center;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
}

.brand img{
  width:140px;
  height:auto;
}

.brand .brand-mini{
  display:none;
  width:44px;
  height:44px;
}

/* Search */
.searchbar{
  position:relative;
  display:flex;
  align-items:center;
  border:1px solid var(--border);
  background:var(--surface-2);
  border-radius:999px;
  padding:6px;
  gap:10px;
  height:54px;
}

.searchbar .search-category{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:42px;
  border:0;
  background:#fff;
  padding:0 12px;
  border-radius:999px;
  font-weight:700;
  color:var(--primary-dark);
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(9, 30, 66, .08);
  white-space:nowrap;
}

.searchbar .search-category svg{
  width:14px; height:14px;
  opacity:.85;
}

.searchbar input{
  flex:1;
  border:0;
  background:transparent;
  outline:none;
  font-size:14px;
  height:42px;
  padding:0 8px;
  color:var(--text);
}

.searchbar .search-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:0;
  cursor:pointer;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  box-shadow: 0 12px 22px rgba(22,117,255,.25);
}

.searchbar .search-btn:hover{filter:brightness(.97)}
.searchbar .search-btn svg{width:18px; height:18px}

.search-category-menu{
  position:absolute;
  top: calc(100% + 10px);
  left:6px;
  width:220px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow-soft);
  padding:10px;
  display:none;
  z-index:9999;
}
.search-category-menu.open{display:block}

.search-category-menu button{
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  padding:10px 10px;
  border-radius:10px;
  cursor:pointer;
  color:var(--text);
  font-weight:650;
}
.search-category-menu button:hover{background:var(--surface-2)}
.search-category-menu button.active{
  background: rgba(22,117,255,.12);
  color:var(--primary-dark);
}

/* Suggest dropdown */
.search-suggest{
  position:absolute;
  top: calc(100% + 12px);
  left:0;
  right:0;
  margin:0 auto;
  max-width:100%;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:10px;
  display:none;
  z-index:9998;
}
.search-suggest.open{display:block}
.search-suggest .suggest-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px 6px;
}
.search-suggest .suggest-head strong{
  font-size:13px;
  color:var(--muted);
  font-weight:800;
}
.search-suggest .suggest-head span{
  font-size:12px;
  color:var(--muted);
}
.suggest-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:10px 10px;
  border-radius:14px;
  cursor:pointer;
}
.suggest-item:hover{background:var(--surface-2)}
.suggest-item .pill{
  flex:0 0 auto;
  font-size:12px;
  padding:5px 10px;
  border-radius:999px;
  background: rgba(22,117,255,.12);
  color:var(--primary-dark);
  font-weight:800;
}
.suggest-item .meta{
  min-width:0;
}
.suggest-item .meta .title{
  font-weight:850;
  font-size:14px;
  line-height:1.25;
}
.suggest-item .meta .desc{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
  line-height:1.45;
}
.suggest-empty{
  padding:14px 12px;
  color:var(--muted);
  font-size:13px;
}

/* Header CTA */
.header-cta{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  align-items:center;
}

.cta-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(22,117,255,.08);
  border:1px solid rgba(22,117,255,.16);
}

.cta-item:hover{background: rgba(22,117,255,.12)}
.cta-item .cta-icon{
  width:36px; height:36px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  box-shadow: 0 10px 20px rgba(9, 30, 66, .10);
  color:var(--primary);
}
.cta-item svg{width:18px; height:18px}
.cta-item strong{
  display:block;
  font-size:13px;
  font-weight:900;
  color:var(--primary-dark);
  line-height:1.15;
}
.cta-item small{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 190px;
}

.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:54px;
  padding:0 20px;
  min-width:120px;
  border-radius:999px;
  background: var(--primary);
  color:#fff;
  font-weight:900;
  white-space:nowrap;
  line-height:1;
  box-shadow: 0 14px 26px rgba(22,117,255,.25);
}
.cta-btn:hover{filter:brightness(.97)}

/* ----------------------------------------------------------
   Main nav (blue, sticky-like)
---------------------------------------------------------- */
.main-nav{
  background: var(--nav-bg);
  color:#fff;
  box-shadow: 0 10px 20px rgba(22,117,255,.18);
  position:relative;
}

.main-nav:before{
  content:"";
  position:absolute;
  left:-120px;
  top:0;
  height:100%;
  width:220px;
  background: linear-gradient(135deg, rgba(255,255,255,.0), rgba(255,255,255,.18));
  transform: skewX(-22deg);
  pointer-events:none;
}

.main-nav .nav-inner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 0;
}

.cat-btn{
  background: var(--nav-deep);
  border:0;
  color:#fff;
  padding:12px 16px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  white-space:nowrap;
  font-weight:900;
  box-shadow: 0 12px 22px rgba(8, 33, 104, .22);
}

.cat-btn svg{width:14px; height:14px; opacity:.95}

.cat-menu{
  position:absolute;
  top:100%;
  left: max(18px, calc((100vw - var(--container))/2 + 18px));
  margin-top:10px;
  width:260px;
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:10px;
  display:none;
  z-index:9999;
}
.cat-menu.open{display:block}
.cat-menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 10px;
  border-radius:12px;
  font-weight:750;
}
.cat-menu a:hover{background:var(--surface-2)}
.cat-menu span{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

/* Nav links */
.nav-links{
  list-style:none;
  display:flex;
  gap:18px;
  margin:0;
  padding:0;
  flex:1;
  overflow:auto hidden;
  scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{display:none}

.nav-links a{
  color:#fff;
  opacity:.92;
  font-weight:850;
  padding:10px 6px;
  border-radius:10px;
  white-space:nowrap;
}
.nav-links a:hover{opacity:1; text-decoration:underline}
.nav-links a.active{
  opacity:1;
  text-decoration:underline;
}

/* Icons */
.nav-icons{
  display:flex;
  gap:10px;
  align-items:center;
}

.icon-link{
  width:42px;
  height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
  color:#fff;
  position:relative;
}
.icon-link svg{width:18px; height:18px}
.icon-link:hover{background: rgba(255,255,255,.16)}
.icon-link .badge-count{
  position:absolute;
  top:-5px;
  right:-5px;
  width:18px;
  height:18px;
  border-radius:999px;
  background:#fff;
  color:var(--primary-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  box-shadow: 0 10px 18px rgba(9, 30, 66, .15);
}

/* Mobile nav button */
.mobile-menu-btn{
  display:none;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
}
.mobile-menu-btn svg{width:18px; height:18px}

/* Mobile menu panel */
.mobile-panel{
  display:none;
  background: var(--nav-bg);
  border-top:1px solid rgba(255,255,255,.15);
}
.mobile-panel.open{display:block}
.mobile-panel a{
  display:block;
  padding:14px 18px;
  color:#fff;
  font-weight:850;
  opacity:.95;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.mobile-panel a:hover{opacity:1}

/* ----------------------------------------------------------
   Hero
---------------------------------------------------------- */
.hero{
  position:relative;
  min-height: 440px;
  display:flex;
  align-items:center;
  padding:46px 0 calc(var(--promo-overlap) + 46px);
  background:#081733; /* fallback */
  overflow:hidden;
}

/* Hero background slider */
.hero-slider{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transform: scale(1.02);
  transition: opacity 900ms ease, transform 7s ease;
}

.hero-slide.active{
  opacity:1;
  transform: scale(1);
}

.hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(8,23,51,.92) 0%, rgba(8,23,51,.72) 45%, rgba(8,23,51,.40) 72%, rgba(8,23,51,.18) 100%),
    radial-gradient(1200px 600px at 70% 20%, rgba(34,193,255,.22), rgba(34,193,255,0) 55%),
    radial-gradient(900px 520px at 25% 30%, rgba(22,117,255,.24), rgba(22,117,255,0) 60%);
  pointer-events:none;
}
.hero:after{
  content:"";
  position:absolute;
  inset:-40px;
  z-index:1;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,.06), rgba(255,255,255,0) 40%),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,.06), rgba(255,255,255,0) 38%);
  pointer-events:none;
}


.hero .hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap:28px;
  align-items:center;
}

.hero .kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-weight:850;
  font-size:12px;
}

.hero h1{
  margin:14px 0 10px;
  font-size:44px;
  line-height:1.05;
  color:#fff;
  letter-spacing:.2px;
}

.hero p{
  margin:0;
  color: rgba(255,255,255,.88);
  line-height:1.7;
  font-size:15px;
  max-width:58ch;
}

.hero .actions{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  font-weight:900;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  line-height:1;
}
.btn svg{width:18px; height:18px; flex:0 0 auto; display:block}

.btn.primary{
  background: var(--primary);
  color:#fff;
  box-shadow: 0 18px 30px rgba(22,117,255,.28);
}
.btn.primary:hover{filter:brightness(.97)}
.btn.secondary{
  background: rgba(255,255,255,.10);
  color:#fff;
  border-color: rgba(255,255,255,.22);
}
.btn.secondary:hover{background: rgba(255,255,255,.14)}

.hero .hero-cards{
  position:relative;
  display:grid;
  gap:14px;
}

.hero-card{
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:16px;
  color:#fff;
  box-shadow: 0 20px 40px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}

.hero-card .tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(34,193,255,.18);
  border:1px solid rgba(34,193,255,.28);
  color:#E9FBFF;
}
.hero-card h3{
  margin:10px 0 6px;
  font-size:16px;
  line-height:1.3;
}
.hero-card p{
  margin:0;
  font-size:12px;
  color: rgba(255,255,255,.82);
}
.hero-card a{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  color:#fff;
  opacity:.95;
}
.hero-card a:hover{opacity:1; text-decoration:underline}

/* Hero slider controls */
/* Hero slider controls —— 竖直居中（替换原整段） */
.hero-controls{
  position:absolute;
  inset:0;                 /* 覆盖整个 hero */
  z-index:4;
  pointer-events:none;     /* 防止覆盖正文点击；按钮自身会开启 */
}

.hero-controls .container{ height:100%; }

.hero-controls-inner{
  position:relative;
  height:100%;
}

/* 左右箭头：垂直居中 */
.hero-arrow{
  pointer-events:auto;
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.hero-arrow:hover{ background: rgba(255,255,255,.16); }
.hero-arrow svg{ width:16px; height:16px; }
.hero-arrow.prev svg{ transform: rotate(180deg); }
.hero-arrow.prev{ left:10px; }
.hero-arrow.next{ right:10px; }

/* 圆点：默认放底部（避开三张叠加卡片区域） */
.hero-dots{
  pointer-events:auto;
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: calc(var(--promo-overlap) + 18px);
  display:flex;
  align-items:center;
  gap:8px;
}
.hero-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.20);
  cursor:pointer;
  padding:0;
}
.hero-dot.active{
  background:#fff;
  border-color:#fff;
}

/* 移动端稍微收敛一点 */
@media (max-width: 760px){
  .hero-arrow{ width:38px; height:38px; }
  .hero-arrow.prev{ left:6px; }
  .hero-arrow.next{ right:6px; }
  .hero-dots{ bottom: calc(var(--promo-overlap) + 10px); }
}

/* ----------------------------------------------------------
   Promo cards (3-up) —— 用下面这整段替换原来的同名段落
---------------------------------------------------------- */
.promo-wrap{
  position:relative;
  z-index:6;
  margin-top: calc(-1 * var(--promo-overlap));
  padding-bottom:18px;
}

.promo-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}

/* ✅ 三张入口卡片：轻微透明，但不产生上下分割感 */
.promo-card{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius-lg);
  padding:22px 22px;
  min-height:160px;
  color:#fff;
  box-shadow: var(--shadow-soft);

  /* 透明度强度（越接近100%越不透），推荐 96% */
  --glass: 75%;

  /* fallback（不支持 color-mix 的浏览器） */
  background-color: var(--accent, #ff4ddb);

  /* 高光 + 暗角（透明只在卡片内部“打光”，不会透出页面底色造成分割感） */
  background-image:
    radial-gradient(420px 220px at 80% 40%,
      rgba(255,255,255,.22),
      rgba(255,255,255,0) 62%
    ),
    linear-gradient(135deg,
      rgba(255,255,255,.06) 0%,
      rgba(0,0,0,.16) 100%
    );

  /* 玻璃边框与轻微毛玻璃（提升质感） */
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  isolation:isolate;
}

/* ✅ 支持 color-mix 的浏览器：让底色“只透一点点” */
@supports (background-color: color-mix(in srgb, #000 50%, transparent)){
  .promo-card{
    background-color: color-mix(in srgb, var(--accent, #ff4ddb) var(--glass), transparent);
  }
}

.promo-card:after{
  content:"";
  position:absolute;
  right:-40px;
  top:-40px;
  width:180px;
  height:180px;
  border-radius:50%;
  background: rgba(255,255,255,.18);
  filter: blur(0px);
}

.promo-card .small{
  font-size:12px;
  opacity:.92;
  font-weight:800;
  letter-spacing:.2px;
}

.promo-card .title{
  margin:10px 0 14px;
  font-size:22px;
  line-height:1.15;
  font-weight:950;
}

.promo-card .cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  background:#fff;
  color: #0E1A2A;
  font-weight:950;
  width:max-content;
  box-shadow: 0 12px 20px rgba(0,0,0,.18);
}
.promo-card .cta:hover{filter:brightness(.98)}

.promo-card .art{
  position:absolute;
  right:18px;
  bottom:16px;
  width:92px;
  height:92px;
  opacity:.95;
  transform: rotate(8deg);
}

/* ----------------------------------------------------------
   Feature strip (blue bar)
---------------------------------------------------------- */
.feature-strip{
  margin:18px 0 10px;
}

.feature-strip .strip{
  background: #0E46C9;
  border-radius: 18px;
  padding:22px 18px;
  color:#fff;
  box-shadow: var(--shadow-soft);
}

.feature-strip .items{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}

.feature{
  display:flex;
  align-items:center;
  gap:14px;
}

.feature .icon{
  width:54px;
  height:54px;
  border-radius:14px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
}
.feature svg{width:24px; height:24px; opacity:.95}

.feature h4{
  margin:0;
  font-size:16px;
  font-weight:950;
}
.feature p{
  margin:3px 0 0;
  font-size:12px;
  opacity:.88;
}

/* ----------------------------------------------------------
   Sections
---------------------------------------------------------- */
.section{
  padding:46px 0;
}

.section .section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.section h2{
  margin:0;
  font-size:30px;
  font-weight:950;
  color: var(--primary-dark);
  letter-spacing:.2px;
}

.section .section-sub{
  color:var(--muted);
  margin-top:8px;
  font-size:14px;
  line-height:1.6;
  max-width:72ch;
}

.section .more-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--primary);
  font-weight:900;
  white-space:nowrap;
}
.section .more-link:hover{text-decoration:underline}

.cards-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}

/* Blog cards: sidebar makes 4 columns too narrow, use 2 columns */
#section-blog .cards-grid{
  grid-template-columns: repeat(2, 1fr);
}

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 22px rgba(9,30,66,.07);
  overflow:hidden;
  transition: transform .15s ease, box-shadow .15s ease;
  min-height: 180px;
  display:flex;
  flex-direction:column;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 30px rgba(9,30,66,.10);
}

.card .thumb{
  height:96px;
  background:
    radial-gradient(260px 140px at 80% 20%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(22,117,255,.95), rgba(11,62,169,.85));
  position:relative;
}

.card .thumb.alt{
  background:
    radial-gradient(260px 140px at 80% 20%, rgba(255,255,255,.30), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(245,86,182,.95), rgba(140,38,110,.85));
}
.card .thumb.alt2{
  background:
    radial-gradient(260px 140px at 80% 20%, rgba(255,255,255,.30), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(251,196,56,.95), rgba(215,134,0,.85));
}
.card .thumb.alt3{
  background:
    radial-gradient(260px 140px at 80% 20%, rgba(255,255,255,.30), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(56,201,178,.95), rgba(5,120,106,.85));
}

.card .thumb .thumb-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

.card .thumb::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(135deg, rgba(8,23,51,.06), rgba(8,23,51,.24));
  pointer-events:none;
}

.card .thumb .thumb-icon{
  position:absolute;
  z-index:2;
  right:12px;
  bottom:10px;
  width:54px;
  height:54px;
  border-radius:16px;
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(10px);
}
.card .thumb svg{width:26px; height:26px; color:#fff; opacity:.96}

/* ===========================
   Card layout (统一底部对齐)
   =========================== */

.card .content{
  padding:14px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  min-height:0;
}

/* 标题：统一 2 行，避免高度不一致 */
.card .title{
  font-size:15px;
  line-height:1.35;
  font-weight:950;
  margin:0;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;

  /* 2 行高度锁定：1.35 * 2 = 2.7em */
  min-height:2.7em;
}

/* 描述：统一 2 行，避免高度不一致 */
.card .desc{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;

  /* 2 行高度锁定：1.55 * 2 = 3.1em */
  min-height:3.1em;
}

/* ✅ 底部区域：钉在卡片底部，并做底对齐 */
.card .card-action{
  display:flex;
  justify-content:space-between;
  gap:12px;

  margin-top:auto;          /* 关键：把底部区域推到底 */
  align-items:flex-end;     /* 关键：按钮与标签底部对齐 */
}

/* 标签区：允许换行，但不要挤压按钮 */
.card .card-action .meta-row{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:flex-end;

  /* 取消你之前可能加在 meta-row 上的 margin-top:auto */
  margin-top:0;
}

/* pill：不允许 pill 内部断行（避免挤压布局） */
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(22,117,255,.18);
  background: rgba(22,117,255,.08);
  color:var(--primary-dark);
  font-weight:850;
  white-space:nowrap;
}

.pill.gray{
  border-color: rgba(107,122,144,.18);
  background: rgba(107,122,144,.08);
  color: var(--muted);
  white-space:nowrap;
}

/* 查看按钮：固定高度 + 不收缩 + 不换行（保证每张卡一致） */
.card .btn-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  height:40px;              /* ✅ 固定高度，视觉更整齐 */
  padding:0 14px;

  border-radius:12px;
  background: var(--primary);
  color:#fff;
  font-weight:950;
  border:0;
  cursor:pointer;
  box-shadow: 0 14px 22px rgba(22,117,255,.20);

  flex:0 0 auto;            /* ✅ 不被压缩 */
  flex-shrink:0;
  white-space:nowrap;       /* ✅ “查看”永远一行 */
  line-height:1;
}

.card .btn-mini.secondary{
  background: rgba(22,117,255,.10);
  color: var(--primary-dark);
  border: 1px solid rgba(22,117,255,.18);
  box-shadow:none;
}

.card .btn-mini:hover{filter:brightness(.98)}
.card .btn-mini svg{width:16px; height:16px}


/* ==========================================================
   ✅ 代码/产品（外部售卖链接）卡片：统一两行展示（避免第1张4行）
   只作用于该栏目，不影响其它栏目
   ========================================================== */

/* desc 固定两行 */
#cards-code .card .desc{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

/* 如果你也希望 title 统一两行（可选，建议保留） */
#cards-code .card .title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

/* Two-column section (blog + sidebar) */
.blog-layout .blog-grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:20px;
  align-items:start;
}

.sidebar-widget{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(9,30,66,.06);
  overflow:hidden;
  margin-bottom:16px;
}

.sidebar-widget .widget-head{
  background: var(--primary);
  color:#fff;
  font-weight:950;
  padding:14px 16px;
  font-size:16px;
}

.sidebar-widget .widget-body{
  padding:14px 16px;
}

.sidebar-widget .widget-body input{
  width:100%;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  outline:none;
  background: var(--surface-2);
}
.sidebar-widget .widget-body button{
  margin-top:10px;
  width:100%;
  padding:12px 14px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  background: var(--primary);
  color:#fff;
  font-weight:950;
}

.sidebar-widget .list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.sidebar-widget .list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:12px;
  background: var(--surface-2);
  border:1px solid var(--border);
  font-weight:850;
}
.sidebar-widget .list a:hover{filter:brightness(.98)}
.sidebar-widget .list span{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}

/* Search results section */
.results-box{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 16px 30px rgba(9,30,66,.08);
  padding:18px;
}

.results-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.results-head h3{
  margin:0;
  font-size:18px;
  font-weight:950;
  color:var(--primary-dark);
}

.results-head p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
}

.results-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.select{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--surface-2);
  font-weight:850;
  color:var(--text);
}

.result-list{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.result-thumb{
  width:72px;
  height:72px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background: var(--surface-2);
  flex:0 0 auto;
}
.result-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


/* Latest updates: larger items for better readability */
#section-updates .result-item{
  padding:16px 16px;
  gap:16px;
  align-items:center;
}
#section-updates .result-thumb{
  width:92px;
  height:92px;
  border-radius:14px;
}
#section-updates .result-item .result-type{
  padding:7px 12px;
  font-size:12px;
}
#section-updates .result-item .result-main .r-title{
  font-size:15px;
  line-height:1.35;
}
#section-updates .result-item .result-main .r-desc{
  margin-top:6px;
  line-height:1.6;
}
#section-updates .result-item .result-main .r-meta{
  margin-top:10px;
  gap:10px;
}


.result-item{
  display:flex;
  gap:12px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 12px;
  align-items:flex-start;
  background: var(--surface);
}
.result-item:hover{background: var(--surface-2)}
.result-item .result-type{
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(22,117,255,.10);
  border:1px solid rgba(22,117,255,.16);
  color:var(--primary-dark);
  font-weight:900;
  font-size:12px;
}
.result-item .result-main{
  min-width:0;
}
.result-item .result-main .r-title{
  font-weight:950;
  margin:0;
  font-size:14px;
}
.result-item .result-main .r-desc{
  margin:4px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.result-item .result-main .r-meta{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* ----------------------------------------------------------
   Callout section
---------------------------------------------------------- */
.callout{
  background: radial-gradient(900px 260px at 20% 0%, rgba(22,117,255,.14), rgba(22,117,255,0) 60%),
              linear-gradient(180deg, #F7FAFF, #FFFFFF);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.callout .box{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:18px;
  align-items:center;
  background:#fff;
  border:1px solid var(--border);
  border-radius: 18px;
  padding:22px;
  box-shadow: 0 16px 30px rgba(9,30,66,.06);
}

.callout h3{
  margin:0;
  font-size:22px;
  color:var(--primary-dark);
  font-weight:950;
}
.callout p{
  margin:10px 0 0;
  color:var(--muted);
  line-height:1.7;
  font-size:14px;
}

.callout .contact-card{
  background: linear-gradient(135deg, rgba(22,117,255,.10), rgba(11,62,169,.04));
  border:1px solid rgba(22,117,255,.16);
  border-radius: 16px;
  padding:16px;
}

.contact-card .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-bottom:1px dashed rgba(107,122,144,.35);
}
.contact-card .row:last-child{border-bottom:0}
.contact-card strong{
  color:var(--primary-dark);
  font-weight:950;
  font-size:13px;
}
.contact-card span{
  color:var(--muted);
  font-size:13px;
  font-weight:850;
}

/* ----------------------------------------------------------
   Footer
---------------------------------------------------------- */
.footer{
  background:
    radial-gradient(circle at 10% 10%, rgba(22,117,255,.07), rgba(22,117,255,0) 40%),
    radial-gradient(circle at 90% 20%, rgba(34,193,255,.06), rgba(34,193,255,0) 45%),
    linear-gradient(180deg, #F7FAFF, #F2F6FD);
  border-top:1px solid var(--border);
}

.footer-top{
  padding:46px 0 26px;
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1.1fr 1fr;
  gap:18px;
}

.footer-col h4{
  margin:0 0 10px;
  font-weight:950;
  color:var(--primary-dark);
}

.footer-col p{
  margin:0 0 12px;
  color:var(--muted);
  line-height:1.7;
  font-size:13px;
}

.footer-col .f-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}
.footer-col .f-list a{
  color:var(--text);
  font-weight:850;
  opacity:.85;
}
.footer-col .f-list a:hover{
  opacity:1;
  text-decoration:underline;
}

.footer-col .f-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
  font-weight:800;
}
.footer-col .f-item svg{width:18px; height:18px; color:var(--primary); flex:0 0 auto}

.footer-btn{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  background: var(--primary);
  color:#fff;
  font-weight:950;
  box-shadow: 0 14px 22px rgba(22,117,255,.18);
}
.footer-btn:hover{filter:brightness(.97)}

.footer-bottom{
  border-top:1px solid rgba(230,236,245,.9);
  padding:14px 0;
  font-size:13px;
  color: var(--muted);
}

.footer-bottom .bottom-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

备案 a{
  color: var(--muted);
  font-weight:850;
}
备案 a:hover{text-decoration:underline}

/* ----------------------------------------------------------
   Floating button
---------------------------------------------------------- */
.back-to-top{
  position:fixed;
  right:18px;
  bottom:18px;
  width:54px;
  height:54px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  background: var(--primary);
  color:#fff;
  font-weight:950;
  box-shadow: 0 18px 30px rgba(22,117,255,.28);
  display:none;
  z-index:998;
}
.back-to-top.show{display:flex; align-items:center; justify-content:center}
.back-to-top:hover{filter:brightness(.97)}

/* ----------------------------------------------------------
   Responsive
---------------------------------------------------------- */
@media (max-width: 1100px){
  .header-main .inner{
    grid-template-columns: 240px 1fr minmax(320px, max-content);
  }
  .footer-grid{grid-template-columns: 1fr 1fr}
  .hero h1{font-size:40px}
}

@media (max-width: 920px){
  :root{ --promo-overlap: 22px; }

  .header-main .inner{
    grid-template-columns: 1fr;
  }
  .header-cta{justify-content:flex-start}
  .brand img{display:none}
  .brand .brand-mini{display:block}
  .promo-grid{grid-template-columns: 1fr}
  .feature-strip .items{grid-template-columns: 1fr 1fr}
  .hero .hero-inner{grid-template-columns: 1fr}
  .hero-card{display:none}
  .blog-layout .blog-grid{grid-template-columns:1fr}
  .cards-grid{grid-template-columns: repeat(2, 1fr)}
  .nav-links{display:none}
  .mobile-menu-btn{display:flex; align-items:center; justify-content:center}
}

@media (max-width: 560px){
  :root{ --promo-overlap: 14px; }
  #section-blog .cards-grid{ grid-template-columns: 1fr; }
  .result-thumb{ width:56px; height:56px; border-radius:10px; }

  .feature-strip .items{grid-template-columns: 1fr}
  .cards-grid{grid-template-columns: 1fr}
  .cta-item{display:none}
  .hero h1{font-size:34px}
}