/* Design: modern big-tech style, dark theme with vibrant red accent */
:root{
  --bg:#0b0d12;
  --panel:#11151b;
  --card:#121821;
  --text:#e6e9ef;
  --muted:#9aa4b2;
  --line:#1f2630;
  --primary:#e11900; /* always-red contact */
  --primary-600:#c31600;
  --primary-700:#9f1300;
  --white:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; background:radial-gradient(1200px 600px at 80% -10%, #18202b 0%, #0b0d12 45%) fixed; color:var(--text);
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.container{max-width:1200px; margin:0 auto; padding:0 20px}
.section-head{text-align:center; margin:80px auto 24px}
.section-head h2{font-size:32px; margin:0 0 8px}
.section-head p{color:var(--muted); margin:0}

/* Floating red contact button (always visible) */
.contact-fab{
  position:fixed; top:12px; right:16px; z-index:1000;
  background:var(--primary); color:var(--white); text-decoration:none; font-weight:600;
  padding:10px 16px; border-radius:999px; box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.1);
}
.contact-fab:hover{background:var(--primary-600)}
.contact-fab:active{background:var(--primary-700)}
.contact-fab:focus-visible{outline:2px solid #fff; outline-offset:2px}

/* Language floating button (replaces contact on top-right) */
.lang-fab{position:fixed; top:12px; right:16px; z-index:1000; width:42px; height:42px; display:grid; place-items:center; color:#fff; text-decoration:none; background:rgba(17,21,27,.9); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow)}
.lang-fab:hover{background:rgba(17,21,27,1)}

/* Header */
.site-header{position:sticky; top:0; z-index:500; backdrop-filter:saturate(120%) blur(10px); background:rgba(11,13,18,.6); border-bottom:1px solid var(--line)}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.3px}
.logo-lg{font-size:22px; display:inline-flex; align-items:center; gap:10px}
.logo-img{width:28px; height:28px; border-radius:6px; object-fit:cover}
.nav-toggle{display:none; background:transparent; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 10px}
.nav-list{display:flex; gap:24px; align-items:center; list-style:none; margin:0; padding:0}
.nav-list a{color:var(--text); text-decoration:none}
.btn-link{padding:8px 12px; border:1px solid var(--line); border-radius:10px}

/* Hero */
.hero{padding:80px 0 40px}
.hero-inner{display:grid; gap:16px; place-items:center; text-align:center}
.hero h1{margin:0; font-size:44px; letter-spacing:.3px}
.hero-logo{width:180px; height:auto; margin:6px 0 6px; border-radius:8px; box-shadow:var(--shadow)}
.hero p{margin:0; color:var(--muted)}
.hero-ctas{display:flex; gap:12px; margin-top:10px}
.btn{display:inline-block; text-decoration:none; padding:10px 16px; border-radius:12px; border:1px solid var(--line); color:var(--text)}
.btn.primary{background:var(--primary); color:#fff; border-color:transparent}
.btn.primary:hover{background:var(--primary-600)}
.btn.ghost{background:transparent}
.btn.full{width:100%; text-align:center}
.btn.small{padding:6px 12px; border-radius:10px}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:24px auto 0}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.card h3{margin:8px 0 8px}
.card p{margin:0 0 10px; color:var(--muted)}
.card-icon{font-size:24px}
.bullets{margin:0; padding-left:18px; color:var(--text)}
.bullets li{margin:6px 0}

/* Services */
.services{padding:40px 0 10px}

/* Cases */
.cases{padding:40px 0}
.case-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.case-item{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px}
.case-video{width:100%; height:auto; border-radius:12px; display:block}

/* Carousel */
.carousel{position:relative}
.carousel-track{display:grid; grid-auto-flow:column; grid-auto-columns:85%; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:10px; padding-bottom:4px}
.carousel-item{width:100%; height:auto; border-radius:12px; scroll-snap-align:start; pointer-events:none; user-select:none}
.carousel-btn{position:absolute; top:50%; transform:translateY(-50%); background:rgba(17,21,27,.8); color:#fff; border:1px solid var(--line); width:36px; height:36px; border-radius:999px; cursor:pointer}
.carousel-btn.prev{left:8px}
.carousel-btn.next{right:8px}
.carousel-btn:hover{background:rgba(17,21,27,.95)}

/* Horizontal screenshot strips */
.screenshots{padding:20px 0 60px}
.strip{margin:10px 0 24px}
.strip h3{margin:0 0 10px}
.strip-track{display:grid; grid-auto-flow:column; grid-auto-columns:65%; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:10px; padding:6px 0}
.strip-track img{width:100%; height:auto; border-radius:12px; scroll-snap-align:start; cursor:zoom-in}
.strip-track img:focus{outline:2px solid var(--primary); outline-offset:4px}

/* Back to top button */
.back-to-top{position:fixed; right:16px; bottom:16px; z-index:900; width:42px; height:42px; display:grid; place-items:center; text-decoration:none; color:#fff; background:rgba(17,21,27,.9); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow)}
.back-to-top:hover{background:rgba(17,21,27,1)}

/* Lightbox */
body.lightbox-open{overflow:hidden}
.media-lightbox{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(6,8,12,.88); z-index:1200; opacity:0; pointer-events:none; transition:opacity .2s ease}
.media-lightbox.open{opacity:1; pointer-events:auto}
.media-lightbox__body{max-width:90vw; max-height:90vh; margin:0; display:flex; flex-direction:column; gap:12px; align-items:center}
.media-lightbox__body img{max-width:100%; max-height:90vh; border-radius:12px; box-shadow:var(--shadow)}
.media-lightbox__caption{color:var(--muted); font-size:14px; text-align:center}
.media-lightbox__close{position:absolute; top:24px; right:24px; background:rgba(17,21,27,.9); color:#fff; border:1px solid var(--line); border-radius:999px; width:40px; height:40px; cursor:pointer; font-size:16px; font-weight:700}
.media-lightbox__close:hover{background:rgba(17,21,27,1)}
.media-lightbox__close:focus{outline:2px solid #fff; outline-offset:2px}

/* Digital human */
.digital-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
.digital-copy .bullets{color:var(--text)}
.digital-media img{width:100%; height:auto; border-radius:12px}

/* Service blocks styled like digital-human */
.service-block{padding:30px 0}
.service-block.flip{direction:rtl}
.service-block.flip .service-copy{direction:ltr}
.service-copy h3{margin:0 0 6px}
.service-copy p{margin:0 0 10px; color:var(--muted)}
.service-media{border-radius:12px; overflow:hidden}

/* Contact */
.contact{padding:40px 0 80px}
.contact-grid{display:grid; grid-template-columns:1fr .8fr; gap:24px}
.contact-form{display:grid; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px}
.contact-form label{display:grid; gap:6px}
.contact-form input,.contact-form textarea{background:#0d1218; border:1px solid var(--line); border-radius:10px; padding:10px; color:var(--text)}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--primary)}
.form-result{margin:6px 0 0; color:var(--muted)}
.contact-info{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px}
.wechat{display:flex; align-items:center; gap:10px; margin:12px 0}
.wechat img{width:96px; height:96px; border-radius:8px; border:1px solid var(--line); background:#fff}
.wechat span{color:var(--muted)}
.badges{display:flex; gap:8px; margin-top:10px}
.badge{display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted)}

/* About page */
.page-hero{padding:60px 0 20px}
.about-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:start}
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.fact{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center}
.fact-num{display:block; font-size:24px; font-weight:800}
.cta{padding:40px 0 80px}
.cta-inner{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:16px; padding:24px; text-align:center}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:20px 0 40px; background:rgba(0,0,0,.2)}
.footer-inner{display:flex; justify-content:space-between; align-items:center}
.footer-nav{display:flex; gap:16px}
.footer-nav a{color:var(--muted); text-decoration:none}

/* Responsive */
@media (max-width: 1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .case-grid{grid-template-columns:repeat(2,1fr)}
  .digital-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 760px){
  .nav-toggle{display:inline-block}
  .nav-list{position:absolute; right:16px; top:64px; background:rgba(11,13,18,.98); border:1px solid var(--line); border-radius:12px; padding:12px; flex-direction:column; gap:12px; display:none}
  .nav-list.open{display:flex}
  .only-desktop{display:none}
  .cards,.cards.three{grid-template-columns:1fr; gap:16px}
  .case-grid{grid-template-columns:1fr; gap:16px}
  .carousel-track{grid-auto-columns:90%}
  .strip-track{grid-auto-columns:85%}
  .facts{grid-template-columns:repeat(2,1fr)}
  
  /* 优化移动端间距 */
  .container{padding:0 16px}
  .section-head{margin:60px auto 20px}
  .section-head h2{font-size:28px}
  .hero{padding:60px 0 30px}
  .hero h1{font-size:36px}
  .contact{padding:30px 0 60px}
}