/* === JiduOS Premium Enhancements === */

/* 0. Global font rendering & base polish */
html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  font-synthesis:none;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures contextual;
}

/* 0b. Theme transition */
[data-theme]{
  transition:background-color .5s var(--ease-smooth),color .5s var(--ease-smooth);
}
[data-theme] *, [data-theme] *::before, [data-theme] *::after{
  transition:background-color .4s var(--ease-smooth),border-color .4s var(--ease-smooth),box-shadow .4s var(--ease-smooth);
}

/* 1. Typography */
h1,h2,h3,.hero h1,.nf-digit,.preloader-percent,.footer-brand{
  font-family:'Inter','Noto Sans SC','Microsoft YaHei',sans-serif !important;
  letter-spacing:-0.01em;
  font-weight:600;
}
h2{
  font-size:2rem;
  letter-spacing:-0.02em;
  margin-bottom:.5em;
}
h2 .hl{
  font-weight:700;
  color:var(--heading);
}
.section-sub{
  color:var(--text3);
  font-size:1.05rem;
  line-height:1.6;
  max-width:600px;
}
.section-label{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--text4);
  margin-bottom:8px;
}
body{
  font-synthesis:none;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures contextual;

  font-family:'Inter','Noto Sans SC','Microsoft YaHei',sans-serif !important;
}
h1{font-weight:700;letter-spacing:-0.03em;line-height:1.15}


/* 2. Enhanced easing curves */
:root{
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --ease-smooth:cubic-bezier(0.25,0.1,0.25,1);
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
}


/* Remove all pseudo-element glow overlays */
.card::before,.card::after,
.case-card::before,.case-card::after,
.platform-card::before,.platform-card::after,
.policy-card::before,.policy-card::after,
.feat-card::before,.feat-card::after{
  content:none;
}

/* 4. Clean button */
.btn-primary{
  position:relative;
  overflow:hidden;
}

/* 5. Section label animation */
.section-label{
  animation:labelFadeIn 0.6s var(--ease-out-expo) both;
}
@keyframes labelFadeIn{
  from{opacity:0;transform:translateY(10px);letter-spacing:8px}
  to{opacity:1;transform:translateY(0)}
}

/* 6. Divider glow */
.divider{
  position:relative;
}
.divider::after{
  content:'';
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  width:30px;height:100%;
  background:var(--cyan);
  filter:blur(8px);
  opacity:0.3;
  animation:dividerGlow 3s ease-in-out infinite alternate;
}
@keyframes dividerGlow{
  from{opacity:0.15;width:20px}
  to{opacity:0.5;width:40px}
}

/* 7. Smooth section entrance */
.fade-up{
  transition:opacity 0.7s var(--ease-out-expo),transform 0.7s var(--ease-spring) !important;
}

/* 8. Enhanced nav link hover */
.nav-link::after{
  transition:transform 0.4s var(--ease-spring) !important;
}

/* 9. Stats number scale on hover */
.hero-stats .s{
  transition:transform 0.3s var(--ease-spring);
}
.hero-stats .s:hover{
  transform:scale(1.08);
  cursor:default;
}

/* 9b. Hero stat — precision instrument panel */
.hero-stats{
  position:relative;
  display:flex;
  gap:48px;
  padding-top:20px;
}
/* Measurement scale line connecting all stats */
.hero-stats::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(0,200,255,.2) 10%,rgba(0,200,255,.2) 90%,transparent 100%);
  pointer-events:none;
}
/* Tick marks — anchored to each stat (3 stats, centered; %-ticks would misalign) */
.hero-stats::after{
  content:none;
}
.hero-stats .s{
  position:relative;
}
.hero-stats .s::before{
  content:'';
  position:absolute;
  top:-2px;left:50%;
  transform:translateX(-50%);
  width:1px;height:9px;
  background:linear-gradient(180deg,rgba(0,200,255,.55),transparent);
  opacity:.85;
}
[data-theme="light"] .hero-stats .s::before{
  background:linear-gradient(180deg,rgba(0,120,180,.5),transparent);
}
.hero-stats .s .n{
  font-weight:600;
  font-variant-numeric:tabular-nums;
  font-family:'Space Grotesk','Inter','Noto Sans SC',sans-serif !important;
  position:relative;
}
.hero-stats .s .l{
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:2.5px;
  color:var(--text4);
  margin-top:4px;
}
/* Unit markers */
.hero-stats .s .n::after{
  font-size:.4em;
  font-weight:400;
  opacity:.4;
  vertical-align:super;
  margin-left:1px;
  font-family:'Inter','Noto Sans SC',sans-serif;
}
.hero-stats .s:nth-child(1) .n::after{content:'项'}
.hero-stats .s:nth-child(2) .n::after{content:'天'}
.hero-stats .s:nth-child(3) .n::after{content:'帧'}
.hero-stats .s:nth-child(4) .n::after{content:'%'}
.hero-stats .s:nth-child(5) .n::after{content:'°C'}

/* 10. Testimonial quote mark */
.testimonial .q::before{
  content:'"';
  font-size:60px;
  line-height:1;
  color:var(--cyan);
  opacity:0.15;
  position:absolute;
  top:-8px;left:0;
  font-family:'Space Grotesk',serif;
}
.testimonial{
  position:relative;
  padding-left:40px !important;
}

/* 11. Policy card icon scale */
.policy-icon{
  transition:transform 0.3s var(--ease-spring);
}
.policy-card:hover .policy-icon{
  transform:scale(1.2);
}

/* 12. Enhanced scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(0,200,255,0.15);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,200,255,0.3)}

/* 13. Selection enhancement */
::selection{background:rgba(0,200,255,0.25);color:#fff;text-shadow:0 0 8px rgba(0,200,255,0.3)}

/* 14. Footer brand hover */
.footer-brand{
  transition:transform 0.3s var(--ease-spring),text-shadow 0.3s;
  display:inline-block;
}
.footer-brand:hover{
  transform:scale(1.05);
  text-shadow:0 0 20px rgba(0,200,255,0.3);
}

/* 15. Image hover zoom */
.case-card-img img,.cc-qr img,.qr-wrap img{
  transition:transform 0.6s var(--ease-smooth) !important;
}
.case-card:hover .case-card-img img{
  transform:scale(1.06) !important;
}

/* 16. Marquee glow */
/* Marquee: hide — ineffective element */
.marquee-strip{display:none !important}

/* Case badges: add dates */
.case-card-badge{position:relative}
.case-card-badge::after{
  content:attr(data-date);
  display:block;
  font-size:.65rem;
  font-weight:400;
  opacity:.6;
  margin-top:3px;
  letter-spacing:0;
  text-align:center;
}

/* Nav CTA: more prominent */
.nav-cta{
  padding:10px 24px !important;
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:.3px;
}
.nav-cta::after{
  content:' →';
  opacity:.6;
  transition:opacity .3s;
}
.nav-cta:hover::after{opacity:1}

/* ══════════════════════════════════════ */
/* 17. DEEP BACKGROUND LAYERS */
/* ══════════════════════════════════════ */

/* Aurora - sweeping color washes behind everything */
body::before{
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 10%, rgba(0,180,255,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 85% 80%, rgba(100,60,255,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(0,200,255,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 30% 40%, rgba(0,140,200,0.03) 0%, transparent 50%);
  animation:auroraShift 20s ease-in-out infinite alternate;
}
@keyframes auroraShift{
  0%{opacity:0.6;transform:translate(0,0) scale(1)}
  33%{opacity:1;transform:translate(-30px,-15px) scale(1.06)}
  66%{opacity:0.8;transform:translate(20px,10px) scale(1.03)}
  100%{opacity:0.9;transform:translate(-10px,-5px) scale(1.05)}
}

/* Hero aurora - stronger above fold */
section.hero::before{
  content:'';
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,200,255,0.12) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 20% 50%, rgba(0,180,255,0.05) 0%, transparent 50%),
    radial-gradient(ellipse 30% 50% at 80% 30%, rgba(100,60,255,0.04) 0%, transparent 50%);
  animation:heroAurora 8s ease-in-out infinite alternate;
}
@keyframes heroAurora{
  0%{opacity:0.7;transform:scale(1)}
  100%{opacity:1;transform:scale(1.08)}
}

/* Clean background — let starfield carry the atmosphere */
body::after{display:none !important}

/* Hero orbs - larger, more visible */
.hero-orb{
  filter:blur(120px) !important;
  opacity:0.25 !important;
}
.hero-orb-1{
  width:400px !important;height:400px !important;
  top:-15% !important;left:-20% !important;
  animation:orbFloat1 10s ease-in-out infinite alternate !important;
}
.hero-orb-2{
  width:300px !important;height:300px !important;
  top:40% !important;right:-10% !important;
  animation:orbFloat2 8s ease-in-out infinite alternate !important;
}
.hero-orb-3{
  width:250px !important;height:250px !important;
  bottom:-10% !important;left:30% !important;
  animation:orbFloat3 12s ease-in-out infinite alternate !important;
}
@keyframes orbFloat1{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(40px,-30px) scale(1.3)}
}
@keyframes orbFloat2{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-30px,20px) scale(1.4)}
}
@keyframes orbFloat3{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(20px,25px) scale(1.35)}
}

/* Edge lighting - subtle vignette glow */
html::before{
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 60%, rgba(0,200,255,0.04) 100%);
  animation:edgeGlow 6s ease-in-out infinite alternate;
}
@keyframes edgeGlow{
  0%{opacity:0.5}
  100%{opacity:1}
}

/* Page hero top glow */
.page-hero::before{
  content:'';
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(500px,70vw);height:400px;
  background:radial-gradient(ellipse at center, rgba(0,200,255,0.1) 0%, transparent 70%);
  pointer-events:none;
  animation:topGlow 5s ease-in-out infinite alternate;
}
@keyframes topGlow{
  0%{opacity:0.5;transform:translateX(-50%) scale(1)}
  100%{opacity:1;transform:translateX(-50%) scale(1.2)}
}

/* Starfield: opacity now controlled by JS (constellation mode ~.38 dark / .55 light) */

/* Disable edge glow */
html::before{display:none !important}

/* ══════════════════════════════════════ */
/* 17. STAGGERED CARD ENTRANCE */
/* ══════════════════════════════════════ */
.pain:nth-child(1),.step-box:nth-child(1),.testimonial:nth-child(1),.trust-item:nth-child(1),.platform-card:nth-child(1),.feat-card:nth-child(1),.case-card:nth-child(1),.policy-card:nth-child(1){animation:cardStaggerIn .5s var(--ease-out-expo) .05s both}
.pain:nth-child(2),.step-box:nth-child(2),.testimonial:nth-child(2),.trust-item:nth-child(2),.platform-card:nth-child(2),.feat-card:nth-child(2),.case-card:nth-child(2),.policy-card:nth-child(2){animation:cardStaggerIn .5s var(--ease-out-expo) .12s both}
.pain:nth-child(3),.step-box:nth-child(3),.testimonial:nth-child(3),.trust-item:nth-child(3),.platform-card:nth-child(3),.feat-card:nth-child(3),.case-card:nth-child(3),.policy-card:nth-child(3){animation:cardStaggerIn .5s var(--ease-out-expo) .19s both}
.pain:nth-child(4),.step-box:nth-child(4),.platform-card:nth-child(4),.feat-card:nth-child(4),.case-card:nth-child(4),.policy-card:nth-child(4){animation:cardStaggerIn .5s var(--ease-out-expo) .26s both}
.pain:nth-child(5),.step-box:nth-child(5),.case-card:nth-child(5),.feat-card:nth-child(5){animation:cardStaggerIn .5s var(--ease-out-expo) .33s both}
@keyframes cardStaggerIn{
  from{opacity:0;transform:translateY(24px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* 18. Button press effect */
.btn:active{
  transform:scale(.96) !important;
  transition:transform .1s var(--ease-smooth) !important;
}

/* 19. Hero stats counter glow */
.hero-stats .s .n.cyan{
  text-shadow:0 0 20px rgba(0,200,255,.4),0 0 40px rgba(0,200,255,.15);
}
.hero-stats .s .n.gold{
  text-shadow:0 0 20px rgba(212,168,64,.4),0 0 40px rgba(212,168,64,.15);
}

/* 20. Section alternating subtle gradient */
section:nth-child(even):not(.hero):not(.page-hero):not(.marquee-strip){
  background:linear-gradient(180deg,transparent,rgba(0,200,255,.008),transparent);
}

/* 21. Hero badge breathing */
.hero-badge{
  animation:badgeBreathe 3s ease-in-out infinite;
}
@keyframes badgeBreathe{
  0%,100%{box-shadow:0 0 0 rgba(0,200,255,0)}
  50%{box-shadow:0 0 20px rgba(0,200,255,.15)}
}

/* 22. Case data number pop */
.cd-n.up{animation:numPop .6s var(--ease-spring) both}
@keyframes numPop{
  from{transform:scale(.5);opacity:0}
  to{transform:scale(1);opacity:1}
}

/* 23. Pricing card top highlight line */
.card::after{
  content:'';
  position:absolute;top:0;left:20%;right:20%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,200,255,.3),transparent);
  opacity:0;transition:opacity .5s;
}
.card:hover::after{opacity:1}

/* 24. Nav brand subtle scale */
.nav .brand{
  transition:transform .3s var(--ease-spring);
}
.nav .brand:hover{
  transform:scale(1.03);
}

/* 25. FAQ item highlight on open */
.faq-item.open{
  background:rgba(0,200,255,.02);
  border-radius:8px;
  padding-left:8px;padding-right:8px;
  transition:background .3s;
}

/* 26. Smooth scrollbar for Firefox */
html{scrollbar-color:rgba(0,200,255,.15) var(--bg);scrollbar-width:thin}

/* 27. Image load fade-in */
img{animation:imgReveal .6s var(--ease-smooth) both}
@keyframes imgReveal{
  from{opacity:0;filter:blur(4px)}
  to{opacity:1;filter:blur(0)}
}

/* 28. Gradient text for key numbers */
.hero h1 .grad{
  background:linear-gradient(135deg,#0cf,#60d5ff,#0cf) !important;
  background-size:200% 200% !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  animation:gradShift 4s ease-in-out infinite;
}
@keyframes gradShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* ══════════════════════════════════════ */
/* 29. MICRO-DETAIL POLISH */
/* ══════════════════════════════════════ */

/* Focus ring - keyboard navigation */
:focus-visible{
  outline:2px solid var(--cyan) !important;
  outline-offset:3px !important;
  border-radius:4px;
}

/* Smooth scroll */
html{scroll-behavior:smooth}

/* Mobile tap highlight */
*{-webkit-tap-highlight-color:rgba(0,200,255,.15)}

/* Back-to-top button polish */
#backTop{
  transition:opacity .3s var(--ease-smooth),transform .3s var(--ease-spring),box-shadow .3s !important;
}
#backTop:hover{
  box-shadow:0 0 20px rgba(0,200,255,.3);
}

/* Active nav link dot indicator */
.nav-link.active::before{
  content:'';
  position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--cyan);
  animation:activeDotPulse 2s ease-in-out infinite;
}
@keyframes activeDotPulse{
  0%,100%{opacity:.6;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.8)}
}

/* Link hover underline animation */
a:not(.btn):not(.nav-link):not(.nav-cta):not(.skip-link):not(.brand){
  text-decoration:none;
  background-image:linear-gradient(var(--cyan),var(--cyan));
  background-size:0% 1px;
  background-position:0% 100%;
  background-repeat:no-repeat;
  transition:background-size .3s var(--ease-smooth);
}
a:not(.btn):not(.nav-link):not(.nav-cta):not(.skip-link):not(.brand):hover{
  background-size:100% 1px;
}

/* Selection glow */
::selection{
  background:rgba(0,200,255,.25) !important;
  color:#fff !important;
  text-shadow:0 0 8px rgba(0,200,255,.4) !important;
}

/* Table row hover enhancement */
tr:hover td{
  transition:background .2s;
}

/* Code/pre styling */
code,kbd,pre{
  font-family:'SF Mono','Fira Code','Consolas',monospace;
  font-size:.9em;
}
kbd{
  padding:2px 8px;border-radius:4px;
  background:var(--surface);border:1px solid var(--border);
  font-size:.85em;
}

/* Reduced motion support */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{scroll-behavior:auto}
}

/* Print styles */
@media print{
  nav,.cs-float,#backTop,#progressBar,#starfield,#gl-starfield,
  .preloader,.marquee-strip,.cursor-glow,.hero-orb,.scroll-indicator{
    display:none !important;
  }
  body{background:#fff !important;color:#000 !important;font-size:12pt}
  a{color:#0066cc !important}
}

/* Placeholder text */
::placeholder{color:var(--text4);opacity:.6}

/* Disabled button state */
.btn:disabled,.btn[disabled]{
  opacity:.4;cursor:not-allowed;pointer-events:none;
  filter:grayscale(.5);
}

/* Horizontal rule */
hr{
  border:none;height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
  margin:40px 0;
}

/* Cursor glow follow - smoother */
.cursor-glow.show{
  transition:opacity .4s,left .15s linear,top .15s linear;
}

/* ══════════════════════════════════════ */
/* 30. CHAMPIONOS-STYLE ENHANCEMENTS */
/* ══════════════════════════════════════ */

/* CTA ring pulse - multi-layer ripple */
.btn-primary{
  box-shadow:0 0 0 0 rgba(0,200,255,.4) !important;
  animation:ctaRingPulse 2.5s ease-out infinite;
}
@keyframes ctaRingPulse{
  0%{box-shadow:0 0 0 0 rgba(0,200,255,.4)}
  70%{box-shadow:0 0 0 16px rgba(0,200,255,0)}
  100%{box-shadow:0 0 0 0 rgba(0,200,255,0)}
}

/* Title shimmer - subtle glow pulse on highlighted text */
h2 .hl{
  animation:titleShimmer 3s ease-in-out infinite;
}
@keyframes titleShimmer{
  0%,100%{text-shadow:0 0 8px rgba(0,200,255,.2)}
  50%{text-shadow:0 0 20px rgba(0,200,255,.5),0 0 40px rgba(0,200,255,.2)}
}

/* Grid dot overlay - disabled (conflicts with backgrounds) */

/* Badge tag sweep - light sweep across hero badge only (case badge ::after shows the date) */
.hero-badge::after{
  content:'';
  position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  transform:skewX(-20deg);
  animation:tagSweep 4s ease-in-out infinite;
}
.hero-badge{position:relative;overflow:hidden}
@keyframes tagSweep{
  0%,100%{left:-100%}
  50%{left:150%}
}

/* Ripple effect on card click */
.pain:active::after,.case-card:active::after,.platform-card:active::after,
.feat-card:active::after,.policy-card:active::after,.trust-item:active::after{
  content:'';
  position:absolute;inset:0;border-radius:inherit;
  background:rgba(0,200,255,.08);
  animation:rippleOut .6s ease-out;
  pointer-events:none;
}
@keyframes rippleOut{
  from{opacity:1;transform:scale(.95)}
  to{opacity:0;transform:scale(1.02)}
}

/* Feature card glow line on top */
.feat-card{
  overflow:hidden;
}
.feat-card::after{
  content:'';
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(0,200,255,.4),transparent);
  opacity:0;transition:opacity .4s;
}
.feat-card:hover::after{opacity:1}

/* Number counter shine */
.counter{
  position:relative;
}
.counter::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,200,255,.1) 50%,transparent 60%);
  animation:counterShine 2s ease-in-out infinite;
}
@keyframes counterShine{
  0%,100%{opacity:0}
  50%{opacity:1}
}

/* 31. Pricing ribbon pulse */
.card.featured .ribbon{
  animation:ribbonPulse 2s ease-in-out infinite;
}
@keyframes ribbonPulse{
  0%,100%{box-shadow:0 0 8px rgba(0,200,255,.2)}
  50%{box-shadow:0 0 20px rgba(0,200,255,.6),0 0 40px rgba(0,200,255,.2)}
}

/* 32. Hero orbs - softer cyan/purple gradient */
.hero-orb-1{background:radial-gradient(circle,rgba(0,200,255,.4),transparent) !important}
.hero-orb-2{
  width:300px !important;height:300px !important;
  top:40% !important;right:-10% !important;
  animation:orbFloat2 8s ease-in-out infinite alternate !important;
background:radial-gradient(circle,rgba(100,60,255,.3),transparent) !important}
.hero-orb-3{
  width:250px !important;height:250px !important;
  bottom:-10% !important;left:30% !important;
  animation:orbFloat3 12s ease-in-out infinite alternate !important;
background:radial-gradient(circle,rgba(0,180,220,.35),transparent) !important}

/* 33. ULTRA card glow border */
.card.featured{
  animation:ultraGlow 3s ease-in-out infinite alternate;
}
@keyframes ultraGlow{
  0%{border-color:rgba(0,200,255,.2);box-shadow:0 0 24px rgba(0,200,255,.04)}
  100%{border-color:rgba(0,220,255,.5);box-shadow:0 0 48px rgba(0,200,255,.12),0 0 80px rgba(0,200,255,.05)}
}

/* 34. Mobile menu slide-in */
.mobile-menu{
  transition:transform .4s var(--ease-out-expo),opacity .4s var(--ease-out-expo) !important;
  transform:translateX(20px);
  opacity:0;
}
.mobile-menu.open{
  transform:translateX(0) !important;
  opacity:1 !important;
}

/* ══════════════════════════════════════ */
/* 35. PERFORMANCE & INTERACTION POLISH */
/* ══════════════════════════════════════ */

/* Prevent pull-to-refresh bounce on mobile */
body{
  overscroll-behavior-y:none;
}

/* Smooth scrolling containers */
.section-inner,.cards,.feat-grid,.prebuy-grid,.tools-grid,.case-grid,.testimonials,.story-content{
  contain:layout style;
}

/* GPU layer hints for heavy animations */
#gl-starfield,.marquee-strip,.hero-orb,.cursor-glow,.preloader{
  will-change:transform;
}
.cs-float{
  will-change:transform;
  transform:translateZ(0);
}

/* Touch-friendly: prevent delays on mobile */
button,a,summary,[role="button"],.cs-btn,.hamburger,input,select,textarea{
  touch-action:manipulation;
}

/* Better image rendering */
img,video,canvas,svg{
  image-rendering:auto;
}
img[loading="lazy"]{
  min-height:1px;
  background:rgba(255,255,255,.01);
}

/* Skip-link: hidden but accessible */
.skip-link{
  position:absolute;top:-100%;left:16px;
  background:var(--cyan);color:#000;padding:8px 16px;
  border-radius:0 0 6px 6px;z-index:9999;font-weight:600;
  text-decoration:none;font-size:14px;
}
.skip-link:focus{
  top:0;
}

/* Keyboard-only: show outlines only for keyboard nav */
:focus:not(:focus-visible){
  outline:none;
}

/* Enhanced reduced motion */
@media(prefers-reduced-motion:reduce){
  #gl-starfield{display:none}
  .marquee-strip{display:none}
  .hero-orb{animation:none !important;opacity:.15 !important}
  .counter::after{animation:none}
}

/* Mobile: reduce particle count visual load */
@media(max-width:640px){
  /* starfield opacity now JS-controlled */
  body::before{opacity:.35 !important}
}

/* ══════════════════════════════════════ */
/* 36. CARDS — SUBTLE DEPTH */
/* ══════════════════════════════════════ */


/* Nav: match warm dark */
#nav{
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  background:rgba(3,6,9,.88) !important;
  border-bottom:1px solid rgba(255,255,255,.04);
}

/* Hero: 分栏布局 — 文字左 + 工具截图右(深海,学至尊) */
.hero{
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:left !important;
  gap:56px;
  padding-top:120px !important;
  padding-bottom:80px !important;
  padding-left:6vw !important;
  padding-right:6vw !important;
}
.hero-content{
  position:relative;z-index:5;
  display:flex;flex-direction:column;align-items:flex-start;
  flex:0 1 560px;max-width:600px;
}
.hero-content .hero-badge,
.hero-content h1,
.hero-content .hero-sub,
.hero-content .btn-group,
.hero-content .hero-stats{
  margin-left:0;margin-right:auto;
}
.hero h1{
  font-size:clamp(2.4rem,4.6vw,4rem) !important;
  margin-bottom:24px !important;
}
.hero-shot{
  position:relative;z-index:5;
  flex:0 1 560px;max-width:560px;
}
.hero-shot img{
  width:100%;display:block;
  border-radius:16px;
  border:1px solid rgba(0,200,255,.28);
  box-shadow:0 0 0 1px rgba(0,200,255,.08), 0 20px 60px rgba(0,0,0,.55), 0 0 80px rgba(0,200,255,.20);
}
@media(max-width:900px){
  .hero{flex-direction:column !important;align-items:center !important;text-align:center !important;gap:40px;padding-left:20px !important;padding-right:20px !important}
  .hero-content{align-items:center;max-width:100%}
  .hero-content .hero-badge,.hero-content h1,.hero-content .hero-sub,.hero-content .btn-group,.hero-content .hero-stats{margin-left:auto;margin-right:auto}
  .hero-content h1,.hero-content .hero-sub{text-align:center !important}
  .hero-shot{max-width:520px;width:100%}
}

/* 子页面 page-hero 文案提到流体之上 */
.page-hero h1,.page-hero .sub{position:relative;z-index:5}

/* Section breathing room — match championos */
@media(min-width:769px){
  .section-inner{
    padding-left:72px !important;
    padding-right:72px !important;
  }
  section:not(.hero):not(.marquee-strip) .section-inner{
    padding-top:120px !important;
    padding-bottom:120px !important;
  }
}
@media(max-width:768px){
  .section-inner{
    padding-left:24px !important;
    padding-right:24px !important;
  }
}

/* Cards: refined radius */
.card,.case-card,.platform-card,.policy-card,.feat-card,.prebuy-card,.tool-card{
  border-radius:20px !important;
}

/* ══════════════════════════════════════ */
/* FOOTER — structured layout */
/* ══════════════════════════════════════ */
.footer-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  max-width:1100px;
  margin:0 auto;
  text-align:left !important;
}
.footer-brand{
  grid-column:1/-1;
  font-size:1.5rem !important;
  margin-bottom:4px;
}
.footer-tagline{
  grid-column:1/-1;
  margin-bottom:8px;
}
.footer-copy{
  grid-column:1/-1;
  font-size:.75rem;
  color:var(--text4);
}
.footer-nav{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}
.footer-nav a{
  color:var(--text2);
  font-size:.85rem;
}
.footer-nav a:hover{color:var(--heading)}
.footer-social{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.8rem;
  color:var(--text3);
}
@media(max-width:640px){
  .footer-inner{grid-template-columns:1fr;gap:20px}
}

/* ══════════════════════════════════════ */
/* PRICING TABLE — mobile cards */
/* ══════════════════════════════════════ */
@media(max-width:640px){
  .comp-table-wrap{
    margin:0 -16px;
    padding:0 16px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .comp-table{
    min-width:520px;
    font-size:11px;
  }
  .comp-table th,.comp-table td{
    padding:8px 4px;
    word-break:keep-all;
  }
}
[data-theme="light"] #nav{
  background:rgba(255,255,255,.85) !important;
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* Hero subtle accent line — cyan instrument tick */
.hero h1::before{
  content:'';
  display:block;width:44px;height:1px;
  background:linear-gradient(90deg,var(--cyan),rgba(0,200,255,.15));
  box-shadow:0 0 12px rgba(0,200,255,.35);
  margin-bottom:24px;
  opacity:.7;
}

/* Section label: quiet */
.section-label{
  color:var(--text4) !important;
  opacity:.5 !important;
  letter-spacing:3px !important;
}
/* Section divider: barely visible */
.divider{
  height:1px !important;
  background:rgba(255,255,255,.03) !important;
  margin:16px 0 32px !important;
}
/* Heading spacing */
h2{margin-bottom:.75em !important}
.section-sub{
  color:var(--text3);
  font-size:1.05rem;
  line-height:1.6;
  max-width:600px;
color:var(--text3) !important;margin-bottom:24px !important}

/* ══════════════════════════════════════ */
/* ATMOSPHERE — minimal */
/* ══════════════════════════════════════ */

/* Aurora: barely visible atmosphere */
body::before{
  background:
    radial-gradient(ellipse 60% 40% at 20% 15%, rgba(0,180,240,.03) 0%, transparent 50%),
    radial-gradient(ellipse 40% 35% at 80% 85%, rgba(0,140,220,.015) 0%, transparent 45%) !important;
  animation:auroraSoft 50s ease-in-out infinite alternate !important;
}
@keyframes auroraSoft{
  0%{opacity:.3;transform:translate(0,0)}
  50%{opacity:.5;transform:translate(-8px,-4px)}
  100%{opacity:.35;transform:translate(4px,3px)}
}

[data-theme="light"] body::before{opacity:.25 !important}

@media(max-width:640px){
  body::before{animation-duration:60s !important;opacity:.25 !important}
}

/* Scroll indicator: hide — adds noise */
.scroll-indicator{display:none !important}

/* Hero orbs: hide — championos-style clean hero */
.hero-orb{display:none !important}

/* Hide redundant platform section — content duplicated in footer + why-us */
.platform-grid{display:none !important}
section:has(.platform-grid){display:none !important}

/* ══════════════════════════════════════ */
/* 37. INSTRUMENT-PANEL DEPTH — bg + UI   */
/* ══════════════════════════════════════ */

/* 37a. Engineering grid underlay — fine lines, masked toward top */
body::after{
  display:block !important;
  content:'' !important;
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(0,200,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,.05) 1px, transparent 1px);
  background-size:96px 96px;
  mask-image:radial-gradient(ellipse 130% 100% at 50% 0%, black 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 130% 100% at 50% 0%, black 25%, transparent 78%);
}
[data-theme="light"] body::after{opacity:.35}
@media(max-width:640px){
  body::after{background-size:72px 72px}
}

/* 37b. Aurora — richer, slower second drift */
body::before{
  background:
    radial-gradient(ellipse 60% 45% at 18% 12%, rgba(0,180,240,.05) 0%, transparent 55%),
    radial-gradient(ellipse 45% 50% at 82% 88%, rgba(0,140,220,.035) 0%, transparent 55%),
    radial-gradient(ellipse 40% 32% at 55% 45%, rgba(0,200,255,.04) 0%, transparent 50%) !important;
  animation:auroraRich 45s ease-in-out infinite alternate !important;
}
@keyframes auroraRich{
  0%{opacity:.35;transform:translate(0,0) scale(1)}
  50%{opacity:.55;transform:translate(-14px,-8px) scale(1.04)}
  100%{opacity:.45;transform:translate(10px,6px) scale(1.02)}
}

/* 37c. Rim/vignette glow — subtle cyan edge lighting */
html::before{
  display:block !important;
  content:'' !important;
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%, rgba(0,200,255,.05) 100%);
  animation:rimGlow 7s ease-in-out infinite alternate;
}
@keyframes rimGlow{
  0%{opacity:.45}
  100%{opacity:1}
}
[data-theme="light"] html::before{opacity:.4}

/* 37d. Section label — flanking instrument dashes */
.section-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  letter-spacing:4px !important;
  opacity:.8 !important;
}
.section-label::before,.section-label::after{
  content:'';
  width:28px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan));
  opacity:.6;
}
.section-label::after{background:linear-gradient(90deg,var(--cyan),transparent)}
@media(max-width:640px){
  .section-label::before,.section-label::after{width:16px}
}


/* 37f. HUD corner brackets on card hover */
.card::before,.case-card::before,.platform-card::before,.feat-card::before,
.prebuy-card::before,.tool-card::before,.contact-card-new::before{
  content:'' !important;
  position:absolute;top:0;left:0;right:0;bottom:0;
  z-index:2;pointer-events:none;
  background:
    linear-gradient(var(--cyan),var(--cyan)) 0 0 / 16px 1px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 0 0 / 1px 16px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 100% / 16px 1px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 100% / 1px 16px no-repeat;
  opacity:0;
  transition:opacity .35s;
}
.card:hover::before,.case-card:hover::before,.platform-card:hover::before,
.feat-card:hover::before,.prebuy-card:hover::before,.tool-card:hover::before,
.contact-card-new:hover::before{
  opacity:.55;
}
[data-theme="light"] .card:hover::before,[data-theme="light"] .case-card:hover::before,
[data-theme="light"] .platform-card:hover::before,[data-theme="light"] .feat-card:hover::before,
[data-theme="light"] .prebuy-card:hover::before,[data-theme="light"] .tool-card:hover::before,
[data-theme="light"] .contact-card-new:hover::before{
  opacity:.5;
}

/* 37g. Primary button — sheen sweep */
.btn-primary::after{
  content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-20deg);
  animation:btnSheen 3.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes btnSheen{
  0%,55%{left:-80%}
  95%,100%{left:140%}
}

/* 37h. h2 highlight — flowing cyan gradient */
h2 .hl{
  background:linear-gradient(120deg,var(--heading) 0%,var(--cyan) 45%,var(--heading) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size:220% 100%;
  animation:hlShift 7s ease-in-out infinite;
}
@keyframes hlShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* 37i. Hero bottom hairline — instrument separator */
.hero::after{
  content:'';
  position:absolute;bottom:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,200,255,.18),transparent);
  pointer-events:none;
}

/* 37j. Print & reduced-motion safety for new layers */
@media print{
  html::before,body::before,body::after{display:none !important}
}
@media(prefers-reduced-motion:reduce){
  body::before,html::before,.section-label::before,.section-label::after,
  .card::before,.case-card::before,.platform-card::before,.feat-card::before,
  .prebuy-card::before,.tool-card::before,.contact-card-new::before,
  .btn-primary::after,h2 .hl,.hero::after{
    animation:none !important;
    transition:none !important;
  }
}


/* ══════════════════════════════════════ */
/* 38. VISUAL POLISH — precision details   */
/* ══════════════════════════════════════ */

/* 38a. REMOVED — html{overflow-x:...} on <html> breaks wheel scrolling
   in Chromium (any non-visible overflow-x switches the scroll container).
   Horizontal overflow was already fixed at the source (.page-hero::before). */

/* 38b. Keyboard focus — cyan instrument outline */
:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
  border-radius:4px;
}
[data-theme="light"] :focus-visible{
  outline-color:rgba(0,150,220,.8);
}

/* 38c. Footer top hairline — cyan gradient separator */
.footer-inner{
  position:relative;
}
.footer-inner::before{
  content:'';
  position:absolute;
  top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,200,255,.3),transparent);
  pointer-events:none;
}

/* 38d. Back-to-top hover — cyan lift */
.back-top{
  transition:transform .3s var(--ease-spring),color .3s,box-shadow .3s !important;
}
.back-top:hover{
  transform:translateY(-3px);
  color:var(--cyan) !important;
  box-shadow:0 0 16px rgba(0,200,255,.25);
}

/* 38e. Compare table header — instrument labels */
.comp-table th{
  position:relative;
}
.comp-table th span{
  letter-spacing:.06em;
  opacity:.75;
}
.comp-table th::after{
  content:'';
  position:absolute;left:8%;right:8%;bottom:-2px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,200,255,.35),transparent);
  pointer-events:none;
}

/* ══════════════════════════════════════ */
/* 39. CONTRAST FIXES (WCAG AA)          */
/* ══════════════════════════════════════ */

/* Secondary text: lift dark-theme contrast (3.7:1 -> ~5:1) */
:root{
  --text3:#8898ac;
  --text4:#7084a0;
}
/* Light theme: darken secondary text + fix light-on-light elements */
[data-theme="light"]{
  --text2:#4a4048;
  --text3:#33445c;
  --text4:#2f3f55;
}
[data-theme="light"] .pain h3{
  color:#1a1a2e !important;
}
/* .step-box 流程小字(写死 #4a5a70): dark 提亮 / light 加深 */
.step-box p{color:#7084a0}
[data-theme="light"] .step-box p{color:#33445c}
/* nav-link 青色: light 下加深(nav 前缀+important 压过内联规则) */
[data-theme="light"] nav .nav-link{color:#0a4a5e !important}
[data-theme="light"] nav .nav-link.active,
[data-theme="light"] nav .nav-link[aria-current="page"],
[data-theme="light"] .mobile-menu .nav-link.active{color:#073f52 !important}
/* 对比表表头: light 下加深 */
[data-theme="light"] .comp-table th{color:#0a4a5e !important}
/* 案例数据色(绿/橙): light 下加深 */
[data-theme="light"] .cd-n.up{color:#0a4a2e}
[data-theme="light"] .cd-n.hot{color:#7a3608}
/* 案例徽章文字: light 下加深(原色在浅底不可读) */
[data-theme="light"] .badge-extreme{color:#5a3f14}
[data-theme="light"] .badge-pro{color:#0a4a5e}
[data-theme="light"] .badge-ultra{color:#5a2a9e}
[data-theme="light"] .badge-basic{color:#0a4a2e}
[data-theme="light"] .badge-diagnose{color:#33445c}
/* 幽灵按钮: light 下文字加深 */
[data-theme="light"] .btn-ghost{color:#3d4d63}
/* mobile-menu 链接: light 下加深 */
[data-theme="light"] .mobile-menu .nav-link{color:#0a4a5e}
/* back-top 图标: light 下深青(浅青底 1.65:1 -> ~5:1) */
[data-theme="light"] .back-top{
  color:#0a4a5e;
  border-color:rgba(10,74,94,.35);
}
[data-theme="light"] .back-top:hover{
  color:#0a4a5e !important;
}

/* 下载区(免费下载 section) */
.download-box{text-align:center;max-width:640px;margin:0 auto;padding:40px 28px;border:1px solid rgba(0,200,255,.18);border-radius:16px;background:rgba(0,200,255,.04)}
.download-box .dl-name{font-size:18px;font-weight:600;margin-bottom:16px;color:#fff}
.download-box .dl-name span{color:#8fa6b8;font-size:14px;font-weight:400}
.download-box .btn{margin-bottom:16px}
.download-box p{color:#8fa6b8;font-size:14px;line-height:1.6;margin:0}

/* ── 深海流体 Hero 背景(hero-fluid.js 注入) ── */
.jd-fluid,.jd-caustic{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;display:block}
.jd-glow,.jd-spot{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none}
.jd-fluid{z-index:0}
.jd-caustic{z-index:1;mix-blend-mode:screen;opacity:.15}
.jd-glow{z-index:1;mix-blend-mode:screen;background:radial-gradient(ellipse 55% 45% at 50% -8%,rgba(0,200,255,.15) 0%,rgba(0,120,200,.05) 40%,transparent 66%)}
.jd-spot{z-index:2;mix-blend-mode:screen;background:radial-gradient(620px circle at var(--mx,50%) var(--my,30%),rgba(0,200,255,.06),transparent 60%)}
.jd-ringwrap{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:2;pointer-events:none}
.jd-ring{width:340px;height:340px;border-radius:50%;position:relative;border:1px solid rgba(0,200,255,.14);animation:jdSpin 18s linear infinite}
.jd-ring::before{content:'';position:absolute;top:18px;left:18px;right:18px;bottom:18px;border-radius:50%;border:1px dashed rgba(0,200,255,.12)}
.jd-ring .jd-dot{position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:#00f0ff;box-shadow:0 0 16px #00f0ff}
@keyframes jdSpin{to{transform:rotate(360deg)}}
.jd-core{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:50%;z-index:2;pointer-events:none;background:radial-gradient(circle at 40% 35%,rgba(160,240,255,.5),rgba(0,150,220,.15) 45%,transparent 70%);filter:blur(1px);animation:jdBreathe 5s ease-in-out infinite}
@keyframes jdBreathe{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}

/* hero 文案提到流体之上 */
.hero .hero-badge,.hero h1,.hero .hero-sub,.hero .btn-group,.hero .hero-stats{position:relative;z-index:5}
.hero .scroll-indicator{z-index:5}
/* 深海标题渐变(更丰富) */
.hero h1 .grad{background:linear-gradient(100deg,#7deaff 0%,#00f0ff 30%,#38bdf8 60%,#818cf8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* 流体接管后关闭旧 aurora + orb(display:none 同时消除其横向溢出) */
.hero::before{display:none}
.hero-orb{display:none}

@media(max-width:640px){
  .jd-ringwrap,.jd-core{display:none}
  .jd-caustic{opacity:.08}
  /* 移动端:关掉顶光/光斑(太亮) + 关流体画布(hero-fluid.js 已跳过,省 GPU/电) */
  .jd-glow,.jd-spot{display:none}
  .jd-fluid,.jd-caustic{display:none}
  /* 移动端静态深海渐变兜底(替代 WebGL 流体,不耗 GPU 但有质感) */
  body{background:linear-gradient(180deg,#0a1a2e 0%,#05101e 45%,#030609 100%) !important}
  body::before{opacity:.55 !important;background:radial-gradient(ellipse 90% 45% at 25% 0%,rgba(0,160,230,.20) 0%,transparent 60%),radial-gradient(ellipse 80% 50% at 80% 20%,rgba(0,110,200,.13) 0%,transparent 55%),radial-gradient(ellipse 70% 55% at 50% 100%,rgba(0,80,170,.15) 0%,transparent 60%) !important}
}

/* ── 全站深海统一:子页面 page-hero + 卡片玻璃 ── */
/* 子页面顶部标题区(透明,让全页流体透出来;标题居中) */
.page-hero{
  min-height:50vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
/* 子页面主标题渐变(同首页「浮出水面」) */
.page-hero h1{
  background:linear-gradient(100deg,#7deaff 0%,#00f0ff 30%,#38bdf8 60%,#818cf8 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* ═══ 深海卡片(统一):渐变底 + 青边 + 顶部高光 + 悬浮阴影 ═══
   单一来源:已替代 championos 极简卡 / SUBTLE DEPTH 浅底 / 37e 卡深度(均已删) */
.card,.case-card,.contact-card-new,.cta-card,.policy-card{
  position:relative;
  background:linear-gradient(165deg, rgba(28,60,90,.68) 0%, rgba(10,28,44,.74) 100%);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(0,200,255,.26);
  box-shadow:inset 0 1px 0 rgba(165,232,255,.18), 0 14px 44px rgba(0,6,12,.55);
  transition:transform .35s var(--ease-smooth),border-color .35s var(--ease-smooth),box-shadow .35s var(--ease-smooth);
}
.card:hover,.case-card:hover,.contact-card-new:hover,.cta-card:hover,.policy-card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,200,255,.34);
  box-shadow:inset 0 1px 0 rgba(165,232,255,.14), 0 16px 44px rgba(0,140,200,.18);
}
/* 首页内容卡片(同族,略轻) */
.pain,.step-box,.testimonial,.trust-item,.platform-card,.feat-card,.prebuy-card,.tool-card{
  position:relative;
  background:linear-gradient(165deg, rgba(16,40,62,.44) 0%, rgba(8,20,32,.50) 100%);
  border-color:rgba(0,200,255,.12);
  box-shadow:inset 0 1px 0 rgba(165,232,255,.07), 0 8px 26px rgba(0,8,16,.32);
}
/* 亮色主题:卡片改浅玻璃 */
[data-theme="light"] .card,[data-theme="light"] .case-card,[data-theme="light"] .contact-card-new,
[data-theme="light"] .cta-card,[data-theme="light"] .policy-card,[data-theme="light"] .pain,
[data-theme="light"] .step-box,[data-theme="light"] .testimonial,[data-theme="light"] .trust-item,
[data-theme="light"] .platform-card,[data-theme="light"] .feat-card,[data-theme="light"] .prebuy-card,
[data-theme="light"] .tool-card{
  background:rgba(255,255,255,.55);
  border-color:rgba(0,0,0,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 24px rgba(0,0,0,.06);
}
/* 对比表分隔线青化 */
.comp-table th,.comp-table td{border-bottom-color:rgba(0,200,255,.10)}
.comp-table th{border-bottom-color:rgba(0,200,255,.22)}

/* ── 打磨:提亮辅助小字对比度(WCAG) ── */
.hero-stats .s .l{color:#a8bccf}
.card .card-body{color:#a8bccf}
.pain p,.step-box p,.tool-desc,.feat-card p,.prebuy-card p,.case-strip-spec{color:#8fa6b8}
/* 导航选中下划线加粗 */
nav .nav-link::after{height:2px}
/* 统计数字单位对齐 */
.hero-stats .s .n::after{margin-left:2px;font-size:.38em}

/* ── 自研工具 showcase ── */
.tool-showcase{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin:0 auto}
.tool-points{display:flex;flex-direction:column;gap:16px}
.tool-point{display:flex;gap:16px;align-items:flex-start;text-align:left;padding:20px 22px;border-radius:14px;position:relative;background:linear-gradient(165deg,rgba(16,40,62,.44) 0%,rgba(8,20,32,.50) 100%);border:1px solid rgba(0,200,255,.12);box-shadow:inset 0 1px 0 rgba(165,232,255,.07),0 8px 26px rgba(0,8,16,.32)}
.tool-point .tp-icon{font-size:26px;flex-shrink:0;line-height:1.3}
.tool-point h3{font-size:16px;font-weight:700;color:var(--heading);margin-bottom:4px}
.tool-point p{font-size:13px;color:#8fa6b8;line-height:1.7;margin:0}
.tool-shot img{width:100%;display:block;border-radius:16px;border:1px solid rgba(0,200,255,.28);box-shadow:0 0 0 1px rgba(0,200,255,.08),0 20px 60px rgba(0,0,0,.55),0 0 80px rgba(0,200,255,.20)}
[data-theme="light"] .tool-point{background:rgba(255,255,255,.55);border-color:rgba(0,0,0,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 24px rgba(0,0,0,.06)}
[data-theme="light"] .tool-point p{color:#33445c}
@media(max-width:900px){
  .tool-showcase{grid-template-columns:1fr;gap:36px}
  .tool-shot{max-width:520px;margin:0 auto;width:100%}
}

/* ── 移动端首屏打磨(P0) ── */
@media(max-width:640px){
  /* 5. 收紧垂直留白 */
  .hero{padding:92px 16px 40px !important;gap:24px !important}
  /* 1. 渐变更亮(浮出水面对比) + 副标题加大 */
  .hero h1 .grad{background:linear-gradient(100deg,#d6f9ff 0%,#7ef0ff 30%,#4dd3ff 60%,#bccaff 100%) !important;-webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important}
  .hero .hero-sub{font-size:16px;line-height:1.65;margin-bottom:20px}
  /* 2. 统计间距 + 标签加大 */
  .hero-stats{gap:22px !important;padding-top:14px !important;justify-content:center}
  .hero-stats .s .n{font-size:30px !important}
  .hero-stats .s .l{font-size:12px !important;letter-spacing:1px;margin-top:6px}
  /* 3. 截图略放大 */
  .hero-shot{width:96%}
  /* 4. 按钮全宽 */
  .hero .btn-group{width:100%;max-width:340px;margin:0 auto;align-items:stretch !important}
  .hero .btn-group .btn{width:100% !important;max-width:none !important}
}
/* 版本徽标 — 动态读 version.json,显示当前工具版本 */
.version-badge{display:inline-block;vertical-align:2px;margin-left:10px;padding:2px 10px;font-size:12px;line-height:1.6;font-weight:500;color:#0cf;border:1px solid rgba(0,200,255,.28);border-radius:999px;background:rgba(0,200,255,.06)}

/* ── 最近更新卡片(下载区下方,青品牌同系) ── */
.release-notes{max-width:640px;margin:16px auto 0;padding:20px 28px;border:1px solid rgba(0,200,255,.12);border-radius:16px;background:rgba(0,200,255,.025)}
.release-notes h3{font-size:12px;font-weight:600;color:#00C8FF;margin:0 0 12px;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.release-notes ul{list-style:none;margin:0;padding:0}
.release-notes li{font-size:13px;color:#8fa6b8;line-height:1.8;padding-left:16px;position:relative;word-break:break-word}
.release-notes li+li{margin-top:6px}
.release-notes li::before{content:'';position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:rgba(0,200,255,.5)}
.release-notes li b{color:#e8f4ff;font-weight:600;margin-right:4px}
@media(max-width:768px){.release-notes{margin:12px auto 0;padding:16px 18px}.release-notes li{font-size:12px;line-height:1.7}}

/* ═══════════════════════════════════════════ */
/* UI 打磨第2轮 (2026-08-27 全站审阅修复)       */
/* ═══════════════════════════════════════════ */

/* #1 客户评价: 第3张卡横跨整行, 消除 2+1 布局右下角孤悬空缺 */
.testimonials .testimonial:last-child{
  grid-column:1/-1;
}
.testimonials .testimonial:last-child .q{
  font-size:clamp(.95rem,1.05rem,1.15rem);
}

/* #2 工具卡标题: 单行不换行, 避免「远程一对一精调」等标题掉行 */
.tool-name{
  white-space:nowrap;
}

/* #3 FAQ 展开答案: 半透明深色底 + 模糊, 提高被背景光晕覆盖时的可读性 */
.faq-item.open p{
  background:rgba(3,6,9,.78);
  border-radius:10px;
  padding:14px 16px;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}