/* iOS 26-ish (concept) — 极致玻璃拟态 + 双主题 + 更强动效 */
:root{
  --bg0:#0b0f17;
  --bg1:#0f1624;
  --card: rgba(255,255,255,.055);
  --card2: rgba(255,255,255,.085);
  --stroke: rgba(255,255,255,.16);
  --stroke2: rgba(255,255,255,.22);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --faint: rgba(255,255,255,.52);
  --accent:#7aa7ff;
  --accent2:#a78bfa;
  --accent3:#34d399;
  --ok:#34d399;
  --warn:#fbbf24;
  --shadow: 0 18px 70px rgba(0,0,0,.48);
  --shadow2: 0 14px 40px rgba(0,0,0,.28);
  --shadow3: 0 10px 26px rgba(0,0,0,.18);
  --blur: 22px;
  --radius: 26px;
  --radius2: 18px;
  --max: 1160px;
  --font: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* Emoji/flag fallback: some systems won't render flag emoji unless explicitly listed */
  --emoji-font: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --spring: cubic-bezier(.16, 1.15, .2, 1);
  --spring2: cubic-bezier(.12, 1.25, .22, 1);
  --navH: 78px;
  /* Motion light source (set by JS) */
  --mx: 50%;
  --my: 20%;
}

/* Light mode tokens (optional) */
[data-theme="light"]{
  /* 亮色对齐暗色模板思路：更“雾”、更有层次，避免纯白刺眼 */
  --bg0:#eef3ff;
  --bg1:#f8fbff;
  --card: rgba(255,255,255,.86);
  --card2: rgba(255,255,255,.96);
  --stroke: rgba(15,23,42,.18);
  --stroke2: rgba(15,23,42,.24);
  --text: rgba(2,6,23,.92);
  --muted: rgba(2,6,23,.70);
  --faint: rgba(2,6,23,.55);
  --shadow: 0 18px 70px rgba(2,6,23,.14);
  --shadow2: 0 14px 40px rgba(2,6,23,.12);
  --shadow3: 0 10px 26px rgba(2,6,23,.10);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  padding-top: var(--navH);
  background:
    radial-gradient(1000px 600px at 15% 8%, rgba(122,167,255,.35), transparent 60%),
    radial-gradient(900px 600px at 85% 12%, rgba(167,139,250,.28), transparent 60%),
    radial-gradient(900px 700px at 50% 85%, rgba(52,211,153,.12), transparent 65%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

/* iOS-like depth: moving light + noise overlay */
body::before{
  content:"";
  position: fixed;
  inset:-60px;
  pointer-events:none;
  background:
    radial-gradient(900px 600px at 20% 15%, rgba(122,167,255,.18), transparent 60%),
    radial-gradient(860px 560px at 85% 18%, rgba(167,139,250,.16), transparent 62%),
    radial-gradient(780px 620px at 50% 88%, rgba(52,211,153,.10), transparent 66%);
  filter: blur(18px) saturate(1.08);
  opacity: .95;
  animation: aurora-float 18s var(--spring) infinite alternate;
  z-index: -2;
}
body::after{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.08), transparent 35%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
  opacity: .20;
  z-index: -1;
}

/* iOS26 "extreme" dynamic homepage (light) */
@keyframes aurora-hue{
  0%{ filter: blur(26px) saturate(1.55) hue-rotate(0deg); }
  100%{ filter: blur(26px) saturate(1.55) hue-rotate(18deg); }
}
@keyframes aurora-grain{
  0%{ transform: translate3d(0,0,0); opacity: .28; }
  100%{ transform: translate3d(-2%, -2%, 0); opacity: .40; }
}

/* Stronger, only on homepage + light theme */
[data-theme="light"] body.page-home{
  /* Default Light background: 清爽海洋（更干净、更 iOS） */
  background:
    radial-gradient(1100px 720px at 14% 10%, rgba(0,180,255,.18), transparent 62%),
    radial-gradient(980px 680px at 86% 14%, rgba(52,211,153,.13), transparent 64%),
    radial-gradient(980px 760px at 50% 90%, rgba(99,102,241,.08), transparent 70%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 56%, var(--bg0));
}
[data-theme="light"] body.page-home::before{
  background:
    radial-gradient(1100px 720px at 12% 12%, rgba(0,180,255,.44), transparent 62%),
    radial-gradient(980px 680px at 86% 16%, rgba(52,211,153,.32), transparent 64%),
    radial-gradient(980px 760px at 50% 88%, rgba(99,102,241,.18), transparent 70%);
  opacity: 1;
  animation:
    aurora-float 9s var(--spring) infinite alternate,
    aurora-hue 14s linear infinite alternate;
}

[data-theme="light"] body.page-home::after{
  /* moving highlight + noise (refraction) */
  background:
    radial-gradient(520px 320px at var(--mx) var(--my), rgba(255,255,255,.26), transparent 62%),
    radial-gradient(900px 520px at 30% 0%, rgba(255,255,255,.10), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: auto, auto, 260px 260px;
  background-repeat: no-repeat, no-repeat, repeat;
  mix-blend-mode: soft-light;
  opacity: .34;
  animation: aurora-grain 6s steps(2) infinite;
}

/* Glass refraction + noise on homepage */
[data-theme="light"] body.page-home .glass{
  position: relative;
  overflow: hidden;
}
[data-theme="light"] body.page-home .glass::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background: radial-gradient(520px 220px at var(--mx) var(--my), rgba(255,255,255,.22), transparent 58%);
  opacity: .55;
  mix-blend-mode: overlay;
}
[data-theme="light"] body.page-home .glass::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: .055;
  mix-blend-mode: overlay;
}

/* Micro-interactions (homepage light) */
[data-theme="light"] body.page-home .btn:hover{
  box-shadow: 0 24px 80px rgba(0,180,255,.16), var(--shadow3);
}
[data-theme="light"] body.page-home .card.glass:hover{
  box-shadow: 0 34px 120px rgba(0,180,255,.14), var(--shadow3);
}

/* WhatsApp Float */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.wa-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #25D366;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.25);
  cursor: pointer;
  border: 1px solid rgba(37, 211, 102, 0.2);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wa-btn svg { width: 30px; height: 30px; }
.wa-btn:hover { transform: scale(1.1); }
.wa-float.active .wa-btn { transform: rotate(15deg) scale(0.9); }
.wa-dot {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 10px;
  height: 10px;
  background: #ff4d4f;
  border-radius: 50%;
  border: 2px solid var(--bg1);
  animation: wa-pulse 2s infinite;
}
@keyframes wa-pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 77, 79, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 77, 79, 0); }
}
.wa-pop {
  width: 280px;
  border-radius: 18px;
  margin-bottom: 16px;
  padding: 16px;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-color: rgba(37, 211, 102, 0.2);
}
.wa-float.active .wa-pop {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.wa-pop-h { font-weight: 700; margin-bottom: 8px; color: var(--text); }
.wa-pop-b { font-size: 13px; color: var(--faint); margin-bottom: 14px; line-height: 1.5; }
.wa-pop-btn {
  display: block;
  background: #25D366;
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}
.wa-pop-btn:hover { opacity: 0.9; }

@media (max-width: 920px){
  .wa-float { right: 16px; bottom: 16px; }
  .wa-pop { width: 240px; }
}

@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation: none !important; }
  [data-theme="light"] body.page-home::before,
  [data-theme="light"] body.page-home::after{ animation: none !important; }
}

/* iOS26 "extreme" dynamic homepage (dark) — 默认：清爽海洋 */
@keyframes nebula-hue{
  0%{ filter: blur(28px) saturate(1.45) hue-rotate(0deg); }
  100%{ filter: blur(28px) saturate(1.45) hue-rotate(-16deg); }
}
@keyframes nebula-drift{
  0%{ transform: translate3d(-10px,-6px,0) scale(1.02); }
  100%{ transform: translate3d(14px,10px,0) scale(1.06); }
}

/* Default dark: ocean */
[data-theme="dark"] body.page-home{
  background:
    /* brighter dark ocean (not too dark) */
    radial-gradient(1200px 760px at 12% 10%, rgba(0,180,255,.30), transparent 62%),
    radial-gradient(1100px 720px at 88% 12%, rgba(52,211,153,.22), transparent 64%),
    radial-gradient(980px 860px at 48% 92%, rgba(99,102,241,.16), transparent 70%),
    linear-gradient(180deg, #071327, #06101f 52%, #071327);
}

[data-theme="dark"] body.page-home::before{
  background:
    radial-gradient(1100px 760px at 10% 14%, rgba(0,180,255,.22), transparent 62%),
    radial-gradient(1060px 740px at 90% 18%, rgba(52,211,153,.18), transparent 64%),
    radial-gradient(980px 860px at 55% 92%, rgba(99,102,241,.14), transparent 70%);
  opacity: 1;
  filter: blur(24px) saturate(1.32);
  animation:
    ocean-drift 10s var(--spring) infinite alternate,
    ocean-hue 16s linear infinite alternate;
}

[data-theme="dark"] body.page-home::after{
  background:
    radial-gradient(560px 360px at var(--mx) var(--my), rgba(255,255,255,.10), transparent 64%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  background-size: auto, 320px 320px;
  background-repeat: no-repeat, repeat;
  mix-blend-mode: overlay;
  opacity: .26;
}

[data-theme="dark"] body.page-home .glass{
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] body.page-home .glass::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background: radial-gradient(520px 220px at var(--mx) var(--my), rgba(0,180,255,.12), transparent 60%);
  opacity: .60;
  mix-blend-mode: screen;
}

/* Preview backgrounds via URL param: html[data-bg="..."] */
@keyframes ocean-hue{
  0%{ filter: blur(28px) saturate(1.35) hue-rotate(0deg); }
  100%{ filter: blur(28px) saturate(1.35) hue-rotate(10deg); }
}
@keyframes ocean-drift{
  0%{ transform: translate3d(-12px,-10px,0) scale(1.03); }
  100%{ transform: translate3d(16px,12px,0) scale(1.07); }
}

/* Dark preview: nebula (紫蓝星云) */
html[data-bg="nebula"][data-theme="dark"] body.page-home{
  background:
    radial-gradient(1200px 760px at 14% 10%, rgba(88,120,255,.28), transparent 62%),
    radial-gradient(1100px 720px at 86% 12%, rgba(180,120,255,.22), transparent 64%),
    radial-gradient(1000px 820px at 50% 92%, rgba(50,240,214,.10), transparent 70%),
    linear-gradient(180deg, #070a12, #0b1020 55%, #070a12);
}
html[data-bg="nebula"][data-theme="dark"] body.page-home::before{
  background:
    radial-gradient(1100px 760px at 12% 14%, rgba(88,120,255,.22), transparent 62%),
    radial-gradient(1060px 740px at 88% 18%, rgba(180,120,255,.18), transparent 64%),
    radial-gradient(980px 860px at 55% 92%, rgba(88,255,226,.10), transparent 70%);
  opacity: 1;
  filter: blur(26px) saturate(1.25);
  animation:
    nebula-drift 10s var(--spring) infinite alternate,
    nebula-hue 16s linear infinite alternate;
}
html[data-bg="nebula"][data-theme="dark"] body.page-home::after{
  background:
    radial-gradient(560px 360px at var(--mx) var(--my), rgba(255,255,255,.12), transparent 64%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='white' opacity='.38'%3E%3Ccircle cx='18' cy='22' r='1'/%3E%3Ccircle cx='92' cy='38' r='1'/%3E%3Ccircle cx='146' cy='54' r='1'/%3E%3Ccircle cx='64' cy='92' r='1'/%3E%3Ccircle cx='122' cy='118' r='1'/%3E%3Ccircle cx='36' cy='144' r='1'/%3E%3C/g%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E");
  background-size: auto, 320px 320px;
  background-repeat: no-repeat, repeat;
  mix-blend-mode: overlay;
  opacity: .22;
}
html[data-bg="nebula"][data-theme="dark"] body.page-home .glass::before{
  background: radial-gradient(520px 220px at var(--mx) var(--my), rgba(122,167,255,.16), transparent 60%);
  opacity: .55;
}

/* Full-bleed helper */
.full-bleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
@keyframes aurora-float{
  0%{ transform: translate3d(-10px,-8px,0) scale(1); }
  100%{ transform: translate3d(12px,10px,0) scale(1.02); }
}

/* Banner overlay bilingual fields: for Chinese (zh/zh-tw) show t-zh; otherwise show t-en */
[data-lang="zh"] .t-en, [data-lang="zh-tw"] .t-en{ display:none !important; }
[data-lang="zh"] .t-zh, [data-lang="zh-tw"] .t-zh{ display:inline !important; }
[data-lang]:not([data-lang="zh"]):not([data-lang="zh-tw"]) .t-zh{ display:none !important; }
[data-lang]:not([data-lang="zh"]):not([data-lang="zh-tw"]) .t-en{ display:inline !important; }

/* Language menu */
.lang-menu{
  position: fixed !important;
  top: 0;
  left: 0;
  bottom: auto !important;
  right: auto !important;
  width: min(420px, calc(100vw - 24px));
  border-radius: 18px;
  padding: 16px;
  z-index: 100000 !important;
  display: none;
  max-height: min(70vh, 500px);
  overflow-y: auto;
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
}
.lang-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.lang-item{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 12px;
  text-align:left;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor:pointer;
  font-size: 14px;
  transition: transform .25s var(--spring2), background .2s ease, border-color .2s ease;
}
.lang-item:hover{
  transform: translateY(-1.5px);
  background: rgba(255,255,255,.08);
  border-color: var(--stroke2);
}
.lang-item.active{
  background: rgba(122,167,255,.08);
  border-color: rgba(122,167,255,.55);
  box-shadow: 0 10px 30px rgba(122,167,255,.12);
}
.lang-flag-svg{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.lang-label{ 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  font-weight: 500;
}
.lang-caret{ margin-left: 6px; opacity: .65; font-size: 12px; }

/* Language button in topbar */
#langBtn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  white-space: nowrap;
  border-radius: 999px;
}
/* We render flag icons via inline SVG in JS (avoid emoji dependency) */
#langBtn::before { content: none; }

a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font-family:inherit; }

.container{
  width: calc(100% - 56px);
  margin: 0 auto;
  max-width: 1440px;
}

.row{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
}

.glass{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow3);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  position: relative;
}
.glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(900px 260px at 25% 0%, rgba(255,255,255,.14), transparent 45%);
  opacity: .75;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(calc(var(--blur) - 6px));
  -webkit-backdrop-filter: blur(calc(var(--blur) - 6px));
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor:pointer;
  transition: transform .35s var(--spring2), background .2s ease, border-color .2s ease, box-shadow .2s ease;
  user-select:none;
}
.btn:hover{ transform: translateY(-2px) scale(1.01); background: rgba(255,255,255,.09); border-color: var(--stroke2); box-shadow: var(--shadow3); }
.btn:active{ transform: translateY(0px) scale(.99); }
.btn.primary{
  border-color: rgba(122,167,255,.45);
  background: linear-gradient(135deg, rgba(122,167,255,.22), rgba(167,139,250,.16));
}
.btn.primary:hover{ border-color: rgba(122,167,255,.62); background: linear-gradient(135deg, rgba(122,167,255,.30), rgba(167,139,250,.22)); }
.btn.ghost{ background: transparent; }

.btn:focus-visible, .input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid rgba(122,167,255,.55);
  outline-offset: 2px;
}

.kbd{
  font-size:12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  color: var(--muted);
}

/* Top nav */
.topbar{
  position: fixed;
  left: 0;
  right: 0;
  top:0;
  z-index: 1000;
  padding: 14px 0;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0));
}
[data-theme="light"] .topbar{
  /* 亮色滚动时顶部“白雾”太厚：topbar 本身保持透明，让 nav.glass 负责玻璃效果 */
  background: transparent;
}
.topbar.scrolled{
  /* Slightly tighter when scrolled (JS also recalculates --navH) */
  padding: 10px 0;
}

/* Transparent overlay until scrolling */
.topbar .nav.glass{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* 亮色：iOS26 透明玻璃（可见背景，但保证可读） */
[data-theme="light"] .topbar .nav.glass{
  /* IMPORTANT: do NOT use var(--card/--card2) here (too opaque in light theme) */
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 18px 60px rgba(2,6,23,.10);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
[data-theme="light"] .topbar .nav.glass::before{
  opacity: .35;
}
.topbar.scrolled .nav.glass{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    var(--card2);
  border-color: var(--stroke);
  box-shadow: var(--shadow3);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
[data-theme="light"] .topbar.scrolled .nav.glass{
  /* Keep it glassy even when scrolled (avoid solid white bar) */
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 18px 60px rgba(2,6,23,.10);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 999px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding-left: 6px;
}
.brand-logo{
  height: 34px;
  width: auto;
  max-width: 180px;
  display: block;
  object-fit: contain;
}
.footerx-logo-img{
  height: 34px;
  width: auto;
  max-width: 220px;
  display: block;
  object-fit: contain;
  margin-bottom: 14px;
}
.logo{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(135deg, rgba(122,167,255,.9), rgba(167,139,250,.85));
  box-shadow: 0 10px 24px rgba(122,167,255,.20);
  border: 1px solid rgba(255,255,255,.25);
}
.brand-title{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.brand-title strong{ font-size:14px; letter-spacing:.2px; }
.brand-title span{ font-size:12px; color: var(--muted); }

.navlinks{
  display:flex;
  align-items:center;
  gap: 6px;
}
.navlinks a{
  font-size: 13px;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 999px;
  transition: background .12s ease, color .12s ease;
}
.navlinks a:hover{
  background: rgba(255,255,255,.06);
  color: var(--text);
}

/* Nav dropdown (Mi-like) */
.nav-dropdown{ position: relative; }
.nav-dropdown .dropdown-panel{
  position:absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(820px, calc(100vw - 32px));
  border-radius: 22px;
  padding: 14px;
  display:none;
  z-index: 80;
}
.nav-dropdown:hover .dropdown-panel,
.nav-dropdown:focus-within .dropdown-panel{
  display:block;
}
/* Touch / mobile: click-to-toggle */
.nav-dropdown.open .dropdown-panel{
  display:block;
}
[data-theme="light"] .nav-dropdown .dropdown-panel.glass{
  /* Dropdown should match light topbar glass (avoid opaque white) */
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 18px 60px rgba(2,6,23,.10);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
[data-theme="light"] .nav-dropdown .dropdown-panel.glass::before{
  opacity: .35;
}
.dropdown-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 2px 2px 10px;
}
.dropdown-title{
  font-weight: 750;
  letter-spacing: -.02em;
}
.dropdown-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.dropdown-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  transition: transform .35s var(--spring2), background .2s ease, border-color .2s ease;
}
.dropdown-item:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  border-color: var(--stroke2);
}
.dropdown-item .dot{
  width: 8px; height: 8px; border-radius: 99px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 4px rgba(122,167,255,.12);
}

.nav-cta{
  display:flex;
  align-items:center;
  gap: 8px;
}

.menuBtn{ display:none; }

/* Mobile sheet */
.sheet{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display:none;
  z-index: 60;
}
[data-theme="light"] .sheet{ background: rgba(15,23,42,.22); }
.sheet.open{ display:block; }
.sheet-panel{
  position:absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 20px));
  border-radius: 26px;
  padding: 12px;
}
.sheet-links{
  display:flex;
  flex-direction:column;
  gap: 6px;
  padding: 6px;
}
.sheet-links a{
  padding: 12px 12px;
  border-radius: 16px;
  color: var(--muted);
  border: 1px solid transparent;
}
.sheet-links a:hover{
  background: rgba(255,255,255,.06);
  border-color: var(--stroke);
  color: var(--text);
}
.sheet-actions{
  display:flex;
  gap: 10px;
  padding: 10px 6px 6px;
}
.sheet-sub{
  margin: 2px 0 10px;
  padding: 4px 10px 10px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}
.sheet-sub a{
  font-size: 13px;
  color: var(--faint);
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.03);
}
.sheet-sub a:hover{
  color: var(--text);
  border-color: var(--stroke);
  background: rgba(255,255,255,.05);
}

/* Hero */
.hero{
  margin-top: calc(-1 * var(--navH));
  padding: calc(34px + var(--navH)) 0 10px;
}

/* Aodengke-like hero slider */
.hero-aod{
  /* full screen hero */
  padding: 0;
}
/* Full-screen AOD hero should start behind the fixed topbar:
   body has padding-top: var(--navH), so we counter it with negative margin.
   This restores true 100vh full-bleed hero and makes light topbar translucency visible. */
.hero.hero-aod{
  margin-top: calc(-1 * var(--navH));
  padding: 0;
}
.carousel.aod{
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  /* 去掉默认 carousel 的底部外边距，避免“全部分类”上方露出一条彩色背景 */
  margin-bottom: 0;
}
.carousel.aod .carousel-slide{
  /* Fill viewport */
  height: 100vh;
}
.carousel.aod .carousel-slide::after{
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.14) 60%, rgba(0,0,0,.05));
}
[data-theme="light"] .carousel.aod .carousel-slide::after{
  /* Light mode should NOT wash out the photo; use subtle dark scrim for readability */
  background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,.10) 60%, rgba(0,0,0,0));
}
.carousel.aod .carousel-arrow{
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.22);
}
[data-theme="light"] .carousel.aod .carousel-arrow{
  background: rgba(255,255,255,.42);
  border-color: rgba(15,23,42,.14);
}
.carousel.aod .carousel-dots{ bottom: 18px; }
.aod-overlay{
  position:absolute;
  inset: 0;
  z-index: 2;
  padding: 0;
}
.aod-overlay-inner{
  position: absolute !important;
  /* Reset all edges to avoid inheriting unwanted top/left from parent or other rules */
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  
  /* Default: Bottom Left */
  left: var(--aod-x, 56px) !important;
  bottom: var(--aod-y, 56px) !important;
  
  max-width: var(--aod-w, 620px);
  padding: 18px;
  border-radius: calc(var(--radius) + 6px);
  z-index: 10;
}

/* Anchor positioning overrides */
[data-aod-anchor="lb"] .aod-overlay-inner{
  left: var(--aod-x, 56px) !important;
  bottom: var(--aod-y, 56px) !important;
}
[data-aod-anchor="lt"] .aod-overlay-inner{
  left: var(--aod-x, 56px) !important;
  top: calc(var(--aod-y, 56px) + var(--navH) + 18px) !important;
  bottom: auto !important;
}
[data-aod-anchor="rb"] .aod-overlay-inner{
  right: var(--aod-x, 56px) !important;
  bottom: var(--aod-y, 56px) !important;
  left: auto !important;
}
[data-aod-anchor="rt"] .aod-overlay-inner{
  right: var(--aod-x, 56px) !important;
  top: calc(var(--aod-y, 56px) + var(--navH) + 18px) !important;
  bottom: auto !important;
  left: auto !important;
}

/* Opacity control: affect panel background intensity (not the whole text) */
.aod-overlay-inner.glass{
  background:
    linear-gradient(180deg,
      rgba(255,255,255, calc(.10 * var(--aod-panel-opacity, .9))),
      rgba(255,255,255, calc(.02 * var(--aod-panel-opacity, .9)))
    ),
    rgba(255,255,255, calc(.06 * var(--aod-panel-opacity, .9)));
}
[data-theme="light"] .aod-overlay-inner.glass{
  background:
    linear-gradient(180deg,
      rgba(255,255,255, calc(.92 * var(--aod-panel-opacity, .9))),
      rgba(255,255,255, calc(.68 * var(--aod-panel-opacity, .9)))
    );
}
.aod-title{
  margin-top: 12px;
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.02;
}
.aod-sub{
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
  max-width: 60ch;
}
[data-theme="light"] .aod-sub{ color: rgba(15,23,42,.72); }
@media (max-width: 920px){
  .carousel.aod .carousel-slide{ height: 100vh; }
  .aod-overlay-inner{
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 12px !important;
    max-width: none;
    width: auto;
  }
}

/* Company block (Template 8) */
.aod-company{
  border-radius: calc(var(--radius) + 10px);
  padding: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.aod-company-left, .aod-company-right{
  border-radius: calc(var(--radius) + 6px);
  padding: 14px;
}
.aod-stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.stat{
  border-radius: 18px;
  padding: 12px;
}
.stat .k{ font-size: 12px; color: var(--muted); }
.stat .v{ font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
.aod-certs{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.cert-card{
  border-radius: 18px;
  padding: 14px;
  min-height: 110px;
  display:grid;
  place-items:center;
}
.cert-ph{
  width: 100%;
  height: 100%;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background:
    radial-gradient(180px 110px at 30% 25%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(220px 140px at 70% 30%, rgba(122,167,255,.18), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  display:grid;
  place-items:center;
  font-weight: 850;
  letter-spacing: .12em;
  color: var(--text);
  opacity: .92;
}
@media (max-width: 920px){
  .aod-company{ grid-template-columns: 1fr; }
  .aod-stats{ grid-template-columns: 1fr; }
}

/* About section (Template 8) - like reference screenshot */
.about8{
  padding: 18px 0;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: start;
}
.about8-title{
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.03em;
}
.about8-sub{
  margin-top: 6px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #e11d2e;
}
.about8-lead{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.8;
  max-width: 46ch;
}
.about8-card{
  margin-top: 16px;
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.34));
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(2,6,23,.10);
  overflow: hidden;
  backdrop-filter: blur(calc(var(--blur) + 8px));
  -webkit-backdrop-filter: blur(calc(var(--blur) + 8px));
}
.about8-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(560px 220px at var(--mx) var(--my), rgba(255,255,255,.34), transparent 60%);
  opacity: .85;
}
.about8-bar{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: #e11d2e;
}
.about8-card-body{
  padding: 18px 18px 18px 22px;
  color: rgba(15,23,42,.86);
  line-height: 1.9;
  font-weight: 600;
  font-size: 14px;
}
.about8-actions{ margin-top: 14px; }
.about8-right{ display:flex; flex-direction:column; gap: 14px; }
.about8-quote-title{
  font-weight: 900;
  letter-spacing: -.02em;
  text-align: right;
}
.about8-quote-desc{
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.8;
  text-align: right;
}
.about8-photo{
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  box-shadow: 0 16px 50px rgba(2,6,23,.12);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='750'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23c7d2fe'/%3E%3Cstop offset='1' stop-color='%23bbf7d0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='750' fill='url(%23g)'/%3E%3Cpath d='M0 560 C220 420 380 520 560 430 C760 330 880 420 1200 300 L1200 750 L0 750 Z' fill='%23ffffff' opacity='.30'/%3E%3C/svg%3E"),
    radial-gradient(760px 420px at 35% 30%, rgba(122,167,255,.25), transparent 60%),
    radial-gradient(760px 420px at 75% 30%, rgba(52,211,153,.16), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  background-size: cover;
  background-position: center;
}
@media (max-width: 920px){
  .about8{ grid-template-columns: 1fr; }
  .about8-quote-title, .about8-quote-desc{ text-align: left; }
}
.hero-brand{ padding-top: 20px; }
.hero-full{ padding-bottom: 0; }
.hero-full-wrap{
  position: relative;
  border-radius: calc(var(--radius) + 10px);
  overflow: hidden;
  box-shadow: var(--shadow2);
}
.hero-full-media .carousel{
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid var(--stroke);
  margin: 0;
}
.hero-full-media .carousel-slide{
  height: clamp(420px, 78vh, 820px);
}
.hero-full-overlay{
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: min(640px, calc(100% - 32px));
  border-radius: calc(var(--radius) + 2px);
  padding: 18px;
}
@media (max-width: 920px){
  .hero-full-overlay{ left: 12px; bottom: 12px; width: calc(100% - 24px); }
  .hero-full-media .carousel-slide{ height: clamp(340px, 66vh, 620px); }
}
.hero-wide{
  border-radius: calc(var(--radius) + 10px);
  padding: 18px;
  overflow:hidden;
}
.hero-wide-inner{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 18px;
  align-items: stretch;
}
.hero-media{ position: relative; }
.hero-carousel .carousel{ margin-bottom: 0; }
.hero-carousel .carousel-slide{ height: clamp(360px, 72vh, 680px); }
@media (max-width: 920px){
  .hero-wide-inner{ grid-template-columns: 1fr; }
  .hero-carousel .carousel-slide{ height: clamp(300px, 62vh, 520px); }
}
.hero-copy{
  padding: 6px 8px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-title{
  margin: 14px 0 10px;
  font-size: clamp(34px, 4.2vw, 56px);
  letter-spacing: -.04em;
  line-height: 1.03;
}
.hero-lead{
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  max-width: 54ch;
}
.hero-kpis{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.kpi{
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  padding: 10px 12px;
}
.kpi .k{ font-size: 12px; color: var(--muted); }
.kpi .v{ font-size: 14px; color: var(--text); font-weight: 650; letter-spacing: -.01em; margin-top: 4px; }

/* Brand tiles */
.tiles{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Brand story */
.story{
  border-radius: calc(var(--radius) + 8px);
  padding: 18px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items: stretch;
  overflow:hidden;
}
.story-media{
  border-radius: calc(var(--radius) + 6px);
  overflow:hidden;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
}
.story-img{
  height: 100%;
  min-height: 320px;
  background:
    radial-gradient(460px 260px at 20% 20%, rgba(122,167,255,.28), transparent 62%),
    radial-gradient(520px 320px at 75% 40%, rgba(167,139,250,.22), transparent 66%),
    radial-gradient(520px 360px at 50% 90%, rgba(52,211,153,.14), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  filter: saturate(1.08);
}
.story-copy{ padding: 10px 8px; display:flex; flex-direction:column; justify-content:center; }
@media (max-width: 920px){
  .story{ grid-template-columns: 1fr; }
  .story-img{ min-height: 240px; }
}

/* Mi-style blocks */
.mi-block{ padding: 22px 0; }
.mi-block#contact{ padding-bottom: 0; }
[data-theme="light"] body.page-home .mi-block{
  /* 从“全部分类”起到页脚使用更干净的灰白底，覆盖首页动态渐变背景 */
  background: linear-gradient(180deg, #f7f7f9, #f2f3f6);
}
[data-theme="light"] body.page-home .footerx{
  background: linear-gradient(180deg, #f2f3f6, #f7f7f9);
  margin-top: 0;
}
.mi-hero-overlay{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    rgba(0,0,0,.18);
}
[data-theme="light"] .mi-hero-overlay{
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
}
.mi-products{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
}
.mi-feature{
  border-radius: calc(var(--radius) + 6px);
  overflow:hidden;
  position: relative;
  min-height: 360px;
  padding: 0;
}
.mi-feature-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(560px 360px at 20% 20%, rgba(122,167,255,.30), transparent 64%),
    radial-gradient(620px 380px at 80% 30%, rgba(167,139,250,.24), transparent 68%),
    radial-gradient(600px 420px at 50% 90%, rgba(52,211,153,.12), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  filter: saturate(1.06);
}
.mi-feature-body{
  position: relative;
  padding: 18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height: 360px;
}
.mi-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.mi-item{
  border-radius: calc(var(--radius) + 2px);
  overflow:hidden;
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.mi-item-thumb{
  width:100%;
  aspect-ratio: 4/3;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background:
    radial-gradient(140px 90px at 20% 25%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(180px 120px at 70% 30%, rgba(122,167,255,.22), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  background-size: cover;
  background-position: center;
}
.mi-item-title{
  font-weight: 750;
  letter-spacing: -.02em;
}
.mi-item-sub{ font-size: 13px; color: var(--muted); }

.mi-cats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.mi-cat{
  border-radius: calc(var(--radius) + 2px);
  padding: 14px;
  display:flex;
  align-items:center;
  gap: 12px;
}
.mi-cat-icon{
  width: 38px; height: 38px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(135deg, rgba(122,167,255,.32), rgba(167,139,250,.22));
}
.mi-cat-name{ font-weight: 650; color: var(--text); }

@media (max-width: 920px){
  .mi-products{ grid-template-columns: 1fr; }
  .mi-grid{ grid-template-columns: 1fr; }
  .mi-cats{ grid-template-columns: repeat(2, 1fr); }
}
.tile{
  position: relative;
  border-radius: calc(var(--radius) + 2px);
  overflow:hidden;
  padding: 0;
  min-height: 168px;
  transition: transform .55s var(--spring2), box-shadow .25s ease;
}
.tile:hover{ transform: translateY(-3px); box-shadow: var(--shadow2); }
.tile-bg{
  position:absolute;
  inset:0;
  filter: saturate(1.06);
}
.tile-bg.bg1{
  background:
    radial-gradient(380px 220px at 20% 20%, rgba(122,167,255,.35), transparent 60%),
    radial-gradient(440px 260px at 70% 30%, rgba(167,139,250,.28), transparent 66%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.tile-bg.bg2{
  background:
    radial-gradient(360px 220px at 18% 30%, rgba(52,211,153,.22), transparent 62%),
    radial-gradient(460px 260px at 75% 25%, rgba(122,167,255,.25), transparent 68%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.tile-bg.bg3{
  background:
    radial-gradient(380px 240px at 30% 20%, rgba(251,191,36,.16), transparent 64%),
    radial-gradient(460px 260px at 70% 35%, rgba(167,139,250,.20), transparent 68%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.tile-body{
  position: relative;
  padding: 16px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap: 8px;
  min-height: 168px;
}
.tile-title{
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.02em;
  color: var(--text);
}
.tile-sub{
  font-size: 13px;
  color: var(--muted);
  max-width: 42ch;
}
@media (max-width: 920px){
  .tiles{ grid-template-columns: 1fr; }
  .tile{ min-height: 150px; }
  .tile-body{ min-height: 150px; }
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: stretch;
}
.hero-card{
  border-radius: calc(var(--radius) + 6px);
  padding: 26px;
  position: relative;
  overflow:hidden;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:-80px;
  background:
    radial-gradient(220px 160px at 20% 15%, rgba(122,167,255,.22), transparent 60%),
    radial-gradient(260px 190px at 70% 20%, rgba(167,139,250,.18), transparent 65%),
    radial-gradient(300px 240px at 50% 90%, rgba(52,211,153,.08), transparent 70%);
  pointer-events:none;
}
.hero-inner{ position: relative; }

/* Carousel */
.carousel{
  position: relative;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow2);
  margin-bottom: 14px;
}
.carousel-track{
  display:flex;
  transition: transform .55s var(--spring);
  will-change: transform;
}
.carousel-slide{
  min-width: 100%;
  height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.carousel-fallback{
  background:
    radial-gradient(220px 160px at 20% 15%, rgba(122,167,255,.28), transparent 60%),
    radial-gradient(260px 190px at 70% 20%, rgba(167,139,250,.22), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.carousel-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.42));
}
[data-theme="light"] .carousel-slide::after{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(15,23,42,.14));
}
.carousel-overlay{
  position:absolute;
  inset: 0;
  z-index: 1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 14px;
  gap: 8px;
}
.carousel-title{
  font-weight: 750;
  letter-spacing: -.02em;
  font-size: 16px;
  text-shadow: 0 14px 34px rgba(0,0,0,.40);
}
.carousel-sub{
  font-size: 13px;
  color: rgba(255,255,255,.80);
  text-shadow: 0 14px 34px rgba(0,0,0,.35);
  max-width: 60ch;
}
[data-theme="light"] .carousel-sub{ color: rgba(15,23,42,.70); text-shadow: none; }
.carousel-btn{ align-self:flex-start; }
.carousel-arrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.08);
  color: var(--text);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  cursor:pointer;
  z-index: 2;
}
.carousel-arrow:hover{ background: rgba(255,255,255,.10); }
.carousel-arrow.prev{ left: 10px; }
.carousel-arrow.next{ right: 10px; }
.carousel-dots{
  position:absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display:flex;
  gap: 8px;
  z-index: 2;
}
.carousel-dot{
  width: 8px; height: 8px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.14);
  cursor:pointer;
}
.carousel-dot.active{
  background: rgba(255,255,255,.72);
  border-color: rgba(255,255,255,.70);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 13px;
}
.badge-dot{
  width: 9px; height: 9px; border-radius: 99px;
  background: linear-gradient(135deg, var(--ok), var(--accent));
  box-shadow: 0 0 0 4px rgba(52,211,153,.10);
}
.hero h1{
  margin: 14px 0 10px;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -.03em;
  line-height: 1.06;
}
.hero p{
  margin: 0 0 16px;
  max-width: 56ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}
.hero-meta{
  margin-top: 18px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  color: var(--faint);
  font-size: 13px;
}
.hero-meta b{ color: var(--text); font-weight: 600; }

.hero-side{
  border-radius: calc(var(--radius) + 6px);
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.mini{
  border-radius: var(--radius2);
  padding: 14px;
}
.mini h3{ margin:0 0 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.mini .big{
  font-size: 18px;
  letter-spacing: -.02em;
}
.mini .sub{ margin-top: 6px; font-size: 13px; color: var(--faint); line-height: 1.5; }
.progress{
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
  margin-top: 10px;
}
.progress > div{
  height:100%;
  width: 72%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(122,167,255,.95), rgba(167,139,250,.85));
}

/* Sections */
section{
  padding: 18px 0;
}
#contact{ padding-bottom: 0; }
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.section-head h2{
  margin:0;
  font-size: 18px;
  letter-spacing: -.01em;
}
.section-head p{
  margin:0;
  color: var(--muted);
  font-size: 13px;
}

.grid{
  display:grid;
  gap: 12px;
}
.grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.grid.cols-4{ grid-template-columns: repeat(4, 1fr); }

/* Category tiles (Products page) — like reference screenshot */
.cat-section{ margin-top: 10px; }
.cat-title{
  margin: 0 0 14px;
  text-align: center;
  font-weight: 900;
  letter-spacing: -.02em;
}
.cat-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cat-card{
  border-radius: 18px;
  overflow:hidden;
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.28));
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 60px rgba(2,6,23,.10);
  backdrop-filter: blur(calc(var(--blur) + 6px));
  -webkit-backdrop-filter: blur(calc(var(--blur) + 6px));
  transition: transform .55s var(--spring2), box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.cat-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(520px 220px at var(--mx) var(--my), rgba(255,255,255,.36), transparent 60%),
    radial-gradient(860px 340px at 20% 0%, rgba(122,167,255,.10), transparent 62%);
  opacity: .7;
}
.cat-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  mix-blend-mode: overlay;
  opacity: .55;
}
.cat-thumb{
  width: 100%;
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
}
.cat-thumb-ph{
  background:
    radial-gradient(520px 240px at 30% 30%, rgba(122,167,255,.35), transparent 60%),
    radial-gradient(520px 240px at 70% 35%, rgba(167,139,250,.24), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.cat-name{
  height: 50px;
  display:grid;
  place-items:center;
  font-weight: 700;
  color: rgba(15,23,42,.82);
  background: rgba(255,255,255,.92);
}
[data-theme="dark"] .cat-name{ color: rgba(255,255,255,.88); background: rgba(0,0,0,.25); }
@media (max-width: 920px){
  .cat-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Home products enhancement (tpl8) */
.prod-tabs{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}
.prod-tab{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
}
.prod-tab:hover{ background: rgba(255,255,255,.08); border-color: var(--stroke2); }
.prod-tab.active{
  border-color: rgba(122,167,255,.62);
  background: linear-gradient(135deg, rgba(122,167,255,.26), rgba(167,139,250,.16));
}
.prod-card{ overflow:hidden; padding: 0; }
.prod-card .thumb{ position: relative; }
.prod-badges{
  position:absolute;
  left: 12px;
  top: 12px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tag.hot{
  border-color: rgba(225,29,46,.32);
  background: rgba(225,29,46,.10);
  color: rgba(225,29,46,.95);
}
.prod-body{ padding: 14px; display:flex; flex-direction:column; gap: 10px; }

/* Product gallery lightbox */
.prod-gallery-main,
.prod-thumb-btn{
  border: none;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
  text-align: inherit;
}
.prod-gallery-thumbs .prod-thumb-btn{ cursor: zoom-in; }

.lightbox{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
}
.lightbox.open{ display: grid; place-items: center; }
.lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lightbox-panel{
  position: relative;
  width: min(980px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 14px;
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  gap: 10px;
}
.lightbox-close{ justify-self: end; }
.lightbox-img{
  width: 100%;
  height: auto;
  max-height: calc(100vh - 130px);
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
}
body.lb-open{ overflow: hidden; }
.prod-name{ margin:0; font-size: 16px; letter-spacing: -.02em; }
.prod-meta{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; }
.prod-price{ font-size: 13px; color: var(--muted); }
.prod-price b{ color: var(--text); font-size: 14px; }
.prod-specs{ display:flex; gap: 10px; flex-wrap: wrap; justify-content:flex-end; }
.spec{ font-size: 12px; color: var(--muted); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--stroke); background: rgba(255,255,255,.03); }
.spec .k{ color: var(--faint); margin-right: 6px; }
.prod-actions{ display:flex; gap: 8px; flex-wrap: wrap; }

.card{
  border-radius: var(--radius);
  padding: 16px;
  position:relative;
  overflow:hidden;
}
.card-panel{
  padding: 30px;
  border-radius: calc(var(--radius) + 12px);
}
.card{ transition: transform .55s var(--spring2), box-shadow .25s ease; }
.card:hover{ box-shadow: var(--shadow2); }
.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(520px 220px at 20% 0%, rgba(255,255,255,.18), transparent 60%);
  opacity: .55;
}
/* iOS26-style subtle 3D tilt (JS sets --rx/--ry) */
.tilt{ transform: translate3d(0, var(--lift, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; will-change: transform; }
.tilt:hover{ --lift: -3px; }

.icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
}
.icon svg{ width: 20px; height: 20px; opacity: .92; }

.card h3{
  margin: 12px 0 6px;
  font-size: 15px;
  letter-spacing:-.01em;
}
.card p{
  margin:0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.tagrow{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.tag{
  font-size: 12px;
  color: var(--faint);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  padding: 6px 10px;
  border-radius: 999px;
}

/* Product grid cards */
.prod{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.thumb{
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid var(--stroke);
  background:
    radial-gradient(110px 80px at 20% 25%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(160px 120px at 70% 30%, rgba(122,167,255,.25), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow3);
  overflow:hidden;
  position: relative;
}
.thumb::after{
  content:"";
  position:absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,.25));
  opacity: .45;
}
.prod .row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.price{
  font-size: 12px;
  color: var(--faint);
  text-align:right;
}
.rating{
  display:flex;
  align-items:center;
  gap: 6px;
  font-size: 12px;
  color: var(--faint);
}
.star{
  width: 14px;
  height: 14px;
  fill: rgba(251,191,36,.95);
  filter: drop-shadow(0 6px 10px rgba(251,191,36,.08));
}

/* Certs */
.certs{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.cert{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 13px;
}
.cert b{ color: var(--text); }

/* Testimonials */
.quote{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.avatar{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(135deg, rgba(122,167,255,.30), rgba(167,139,250,.22));
}
.quote p{ margin: 0; }
.quote .who{
  margin-top: 8px;
  font-size: 12px;
  color: var(--faint);
}
.quote .who b{ color: var(--text); }

/* RFQ */
.rfq{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.field label{
  font-size: 12px;
  color: var(--muted);
}
.input, textarea{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  color: var(--text);
  outline:none;
}
textarea{ min-height: 110px; resize: vertical; }
.rfq-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: 12px;
}
.small{
  font-size: 12px;
  color: var(--faint);
  line-height: 1.4;
}

/* Footer */
footer{
  padding: 26px 0 36px;
  color: var(--muted);
  font-size: 13px;
}
.footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 999px;
}

/* New dark footer (like reference) */
.footerx{
  position: relative;
  padding: 32px 0 54px;
  margin-top: 12px;
  color: var(--text);
}
.footerx a{ color: inherit; }
.footerx .container{ position: relative; }
.footerx-panel{
  /* Make footer panel visually "full" like iOS sections (avoid looking too small on wide screens) */
  width: 100%;
  padding: 30px;
  border-radius: calc(var(--radius) + 12px);
  border-color: var(--stroke2);
  box-shadow: 0 50px 140px rgba(15,23,42,.18);
  background:
    radial-gradient(820px 460px at 20% 18%, rgba(122,167,255,.16), transparent 62%),
    radial-gradient(820px 460px at 82% 24%, rgba(167,139,250,.14), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)),
    var(--card2);
}
.footerx-panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(620px 260px at 20% 0%, rgba(255,255,255,.26), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  opacity: .75;
}
.footerx-panel{ position: relative; overflow:hidden; }
.footerx-grid{
  display:grid;
  grid-template-columns: 1.25fr .8fr 1fr 1fr;
  gap: 22px;
  align-items:start;
}
.footerx-logo{
  font-weight: 950;
  letter-spacing: .08em;
  font-size: 20px;
  margin-bottom: 14px;
}
.footerx-desc{
  color: var(--muted);
  line-height: 1.8;
  font-size: 13px;
}
.footerx-h{
  font-weight: 850;
  margin-bottom: 12px;
  font-size: 14px;
}
.footerx-links{ display:flex; flex-direction:column; gap: 10px; }
.footerx-links a{ color: var(--muted); font-size: 13px; }
.footerx-links a:hover{ color: var(--text); }
.footerx-kv{ display:flex; flex-direction:column; gap: 10px; font-size: 13px; color: var(--muted); line-height:1.7; }
.footerx-kv b{ color: var(--text); font-weight: 700; }
.footerx-email{
  color: #ff4d4f !important;
  font-weight: 800;
  text-decoration: none;
}
.footerx-email:hover{ text-decoration: underline; }
.footerx-social{ display:flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.footerx-social .soc{
  width: 30px; height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  display:grid;
  place-items:center;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(calc(var(--blur) - 6px));
  -webkit-backdrop-filter: blur(calc(var(--blur) - 6px));
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.footerx-social .soc.disabled{
  opacity: .35;
  filter: grayscale(1);
}
.footerx-social .soc.disabled:hover{
  background: rgba(255,255,255,.05);
  border-color: var(--stroke);
}
.footerx-social .soc svg{ width: 16px; height: 16px; display:block; }
.footerx-social .soc:hover{ background: rgba(255,255,255,.10); border-color: var(--stroke2); }

/* Light theme: avoid "white circle + black outline" */
[data-theme="light"] .footerx-social .soc{
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.12);
  color: rgba(15,23,42,.82);
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
}
[data-theme="light"] .footerx-social .soc:hover{
  background: rgba(15,23,42,.09);
  border-color: rgba(15,23,42,.18);
}
.footerx-cta.btn{ width: fit-content; }
.footerx-bottom{ margin-top: 34px; }
.footerx-line{ height: 1px; background: var(--stroke); opacity: .8; }
.footerx-copy{ text-align:center; padding-top: 12px; color: var(--faint); font-size: 12px; }

[data-theme="dark"] .footerx-panel{
  box-shadow: 0 60px 160px rgba(0,0,0,.45);
}

@media (max-width: 920px){
  .footerx-grid{ grid-template-columns: 1fr; gap: 22px; }
}

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(14px);
  opacity: 0;
  pointer-events:none;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 13px;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 80;
  max-width: min(720px, calc(100% - 24px));
  text-align:center;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast[data-kind="err"]{
  border-color: rgba(251,191,36,.35);
  background: linear-gradient(135deg, rgba(251,191,36,.14), rgba(255,255,255,.04));
}

/* Mobile */
@media (max-width: 920px){
  :root{ --navH: 74px; }
  body{ padding-top: var(--navH); }
  .container{ width: calc(100% - 24px); }
  .hero-grid{ grid-template-columns: 1fr; }
  .grid.cols-4{ grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3{ grid-template-columns: repeat(1, 1fr); }
  .rfq{ grid-template-columns: 1fr; }
  .navlinks{ display:none; }
  .menuBtn{ display:inline-flex; }
  .dropdown-panel{ display:none !important; }
}

/* Reveal animation (stronger motion) */
.reveal{
  opacity: 0;
  transform: translateY(14px) scale(.99);
  filter: blur(4px);
  transition: opacity .9s var(--spring), transform .9s var(--spring), filter .9s var(--spring);
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  body::before{ display:none; }
}