@keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
:root{
  --brand-900:#153c46;
  --brand-800:#1b4f5c;
  --brand-700:#216372;
  --brand-600:#28778a;
  --brand-500:#2f8ba1;
  --brand-50:#f2f8f9;
  --accent:#c9a96e;
  --accent-dark:#b08d4d;
  --cream:#f7f4ed;
  --cream-dark:#ede8dd;
  --text:#334155;
  --text-light:#64748b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,'PingFang SC','Microsoft YaHei','Hiragino Sans GB','Noto Sans SC',sans-serif;color:var(--text);background:#fff;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* 数据还没绑定完时先隐藏首屏，避免默认头图/默认文字闪一下（绑定完成后淡入）
   覆盖：通用 .page-hero（多数页面）/ 首页 banner / 龙城服务 .svc-hero / 供应商 .sup-hero */
.preload .page-hero,.preload #home-hero,.preload .svc-hero,.preload .sup-hero{opacity:0}
.page-hero,#home-hero,.svc-hero,.sup-hero{transition:opacity .45s ease}

/* header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.05);transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.06)}
.header-inner{max-width:1280px;margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:40px;width:auto}
.logo-text{font-size:16px;font-weight:700;color:var(--brand-900);line-height:1.2}
.logo-en{font-size:10px;color:var(--text-light);letter-spacing:.05em}

.desktop-nav{display:flex;align-items:center;gap:6px}
.nav-item{position:relative;padding:26px 10px;font-size:14px;font-weight:500;color:var(--text);display:flex;align-items:center;gap:4px;transition:color .2s}
.nav-item:hover,.nav-item.active{color:var(--brand-700)}
.nav-item::after{content:'';position:absolute;left:10px;right:10px;bottom:18px;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .25s}
.nav-item:hover::after,.nav-item.active::after{transform:scaleX(1)}
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:calc(100% - 8px);left:0;background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.12);border:1px solid rgba(0,0,0,.06);padding:8px 0;min-width:170px;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .2s}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a{display:block;padding:10px 18px;font-size:13px;color:var(--text);transition:all .15s}
.dropdown-menu a:hover{background:var(--brand-50);color:var(--brand-700)}
/* 二级下拉（如：关于我们 → 什么是龙城 → 五大龙城） */
.dropdown-menu .dropdown-sub{position:relative}
.dropdown-menu .dropdown-sub>a{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dropdown-menu .dropdown-sub>a svg{opacity:.45;flex-shrink:0}
.dropdown-menu .dropdown-sub>.dropdown-menu{top:-9px;left:calc(100% - 6px);transform:translateX(6px);min-width:150px}
.dropdown-menu .dropdown-sub:hover>.dropdown-menu{opacity:1;visibility:visible;transform:translateX(0)}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 22px;border-radius:8px;font-size:14px;font-weight:500;transition:all .2s;cursor:pointer;border:none}
.btn-primary{background:var(--brand-700);color:#fff}
.btn-primary:hover{background:var(--brand-800)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-dark)}
.btn-outline{border:1px solid var(--brand-700);color:var(--brand-700);background:#fff}
.btn-outline:hover{background:var(--brand-50)}
.btn-lg{padding:13px 32px;font-size:15px;border-radius:10px}

.mobile-toggle{display:none;background:none;border:none;padding:6px;color:var(--brand-900)}
.mobile-menu{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid rgba(0,0,0,.08);padding:16px 24px;box-shadow:0 12px 30px rgba(0,0,0,.08)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:10px 0;font-size:15px;color:var(--text);border-bottom:1px solid rgba(0,0,0,.04)}
.mobile-menu .sub{padding-left:16px;font-size:14px;color:var(--text-light)}

/* hero */
.page-hero{position:relative;padding:160px 24px 110px;background:linear-gradient(135deg,var(--brand-900) 0%,var(--brand-700) 100%);color:#fff;text-align:center;overflow:hidden;--hero-bg:url('/assets/hero-bg.jpg')}
/* 头图：容器加高减少上下裁切；图略提亮，主体更清楚 */
.page-hero.bg-image::before{content:'';position:absolute;inset:0;background-image:var(--hero-bg,url('/assets/hero-bg.jpg'));background-position:center 40%;background-size:cover;background-repeat:no-repeat;opacity:var(--hero-opacity,.62)}
.page-hero.bg-image::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(21,60,70,.52) 0%,rgba(33,99,114,.34) 100%)}
/* 首页 Banner 视差背景（真实 DOM，兼容内嵌预览窗口） */
.parallax-hero{position:relative;padding:180px 24px 120px;background:linear-gradient(135deg,var(--brand-900) 0%,var(--brand-700) 100%);color:#fff;text-align:center;overflow:hidden}
.parallax-bg{position:absolute;top:-40%;left:0;right:0;bottom:-40%;z-index:0;background-position:center;background-size:cover;background-repeat:no-repeat;will-change:transform}
.parallax-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(21,60,70,.6) 0%,rgba(33,99,114,.42) 100%)}
.parallax-hero .inner{position:relative;z-index:2}
.page-hero .inner{position:relative;z-index:2;max-width:800px;margin:0 auto}
.hero-tag{display:inline-block;padding:6px 16px;border:1px solid rgba(255,255,255,.35);border-radius:999px;font-size:12px;letter-spacing:.15em;margin-bottom:16px;background:rgba(255,255,255,.08);text-shadow:0 1px 3px rgba(0,0,0,.3)}
.hero-title{font-size:38px;font-weight:700;margin-bottom:12px;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.hero-sub{font-size:16px;color:rgba(255,255,255,.85);line-height:1.7;text-shadow:0 1px 5px rgba(0,0,0,.35)}

/* project tabs */
.sub-tabs{background:#fff;border-bottom:1px solid rgba(0,0,0,.06);position:relative;z-index:3}
.sub-tabs .inner{max-width:1280px;margin:0 auto;display:flex;gap:8px;padding:0 24px;overflow-x:auto}
.sub-tab{padding:16px 22px;font-size:14px;color:var(--text-light);white-space:nowrap;border-bottom:2px solid transparent;border-radius:10px 10px 0 0;transition:all .2s}
.sub-tab:hover,.sub-tab.active{color:var(--brand-700);border-color:var(--accent);background:#faf3e0}

/* sections */
.section{padding:80px 24px}
.section-cream{background:var(--cream)}
.section-dark{background:var(--brand-900);color:#fff}
.section-inner{max-width:1200px;margin:0 auto}
.section-title{text-align:center;margin-bottom:50px}
.section-title .tag{font-size:12px;letter-spacing:.15em;color:var(--brand-600);font-weight:700;margin-bottom:10px}
.section-title h2{font-size:30px;font-weight:700;color:var(--brand-900);margin:0}
.section-title h2.white{color:#fff}
.section-title p{color:var(--text-light);margin-top:10px;font-size:15px}

/* cards */
.card{background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.05);overflow:hidden}
.stat-card{text-align:center;padding:28px 16px;background:#fff;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.05);transition:transform .25s}
.stat-card:hover{transform:translateY(-5px)}
.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.about-grid .about-text{color:var(--text-light);line-height:2}
.about-stats-2x2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.project-card{background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.05);overflow:hidden;display:flex;flex-direction:column;height:100%}
.project-card .thumb{aspect-ratio:16/10;background:var(--cream);background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;color:var(--text-light);font-size:13px;position:relative;overflow:hidden}
.project-card .body{padding:22px 24px 24px;flex:1;display:flex;flex-direction:column}
.project-card h3{font-size:18px;color:var(--brand-900);margin-bottom:8px}
.project-card p.summary{font-size:13px;color:var(--text-light);line-height:1.7;margin-bottom:14px}
.meta-list{list-style:none;padding:0;margin:0 0 18px;font-size:13px}
.meta-list li{display:flex;gap:8px;padding:7px 0;border-bottom:1px dashed #e2e8f0;color:var(--text-light)}
.meta-list li:last-child{border-bottom:none}
.meta-list .k{white-space:nowrap;color:var(--brand-700);font-weight:500}
.service-icon{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:18px}
.service-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:32px;color:#fff}
.stat-card .num{font-size:32px;font-weight:700;color:var(--brand-700)}
.stat-card .label{font-size:13px;color:var(--text-light);margin-top:6px}

/* forms */
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:13px;font-weight:500;color:var(--text);margin-bottom:6px}
.form-input,.form-textarea{width:100%;padding:12px 14px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;background:#f8fafc;transition:all .2s}
.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--brand-500);background:#fff;box-shadow:0 0 0 3px var(--brand-50)}
.chip-group{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid #e2e8f0;border-radius:999px;font-size:13px;color:var(--text);cursor:pointer;transition:all .15s}
.chip input{appearance:none}
.chip:has(input:checked){background:var(--brand-700);border-color:var(--brand-700);color:#fff}

/* footer */
.site-footer{background:var(--brand-900);color:rgba(255,255,255,.7);padding:60px 24px 0}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:40px}
.footer-col h4{color:#fff;font-size:15px;margin-bottom:18px}
.footer-col a{display:block;font-size:13px;margin-bottom:10px;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,.5);max-width:1200px;margin-left:auto;margin-right:auto}

/* reveal animation */
.reveal{opacity:0;transform:translateY(30px);transition:all .7s cubic-bezier(.22,1,.36,1)}
.reveal.active{opacity:1;transform:translateY(0)}

/* responsive */
@media(max-width:1024px){
  .desktop-nav{display:none}
  .header-actions .btn{display:none}
  .mobile-toggle{display:block}
  .footer-inner{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr}
  #projects-matrix{grid-template-columns:1fr}
  #home-services{grid-template-columns:1fr}
}
@media(max-width:640px){
  .header-inner{height:64px}
  .page-hero{padding:110px 20px 60px}
  .hero-title{font-size:28px}
  .section{padding:56px 20px}
  .section-title h2{font-size:24px}
  .footer-inner{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}

  /* ---- 手机端细项自适应（全站通用） ---- */
  img,video,iframe{max-width:100%}
  .hero-sub{font-size:14px}
  .sub-tab{padding:13px 14px;font-size:13px}
  .sub-tabs .inner{padding:0 14px;gap:4px}

  /* 页面里内联写死的 3/4 列栅格 → 2 列（避免被压瘪、文字逐字换行） */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr)!important}

  /* 内联「固定宽 + 1fr」左右两栏 → 上下单列 */
  [style*="grid-template-columns:280px 1fr"],
  [style*="grid-template-columns:300px 1fr"],
  [style*="grid-template-columns:320px 1fr"],
  [style*="grid-template-columns:260px 1fr"],
  [style*="grid-template-columns:240px 1fr"]{grid-template-columns:1fr!important}

  /* 龙城服务页「为什么是沙特」四列数据卡 → 2×2 */
  .svc-why .why-card{grid-template-columns:1fr 1fr!important;padding:26px 10px;row-gap:20px}
  .svc-why .why-card>div{padding:2px 10px!important;border-left:none!important}
  .svc-why .num{font-size:23px!important}
  .svc-why h2{font-size:22px}

  /* 首页新闻卡片：日期块收窄 */
  [style*="grid-template-columns:72px 1fr"]{grid-template-columns:54px 1fr!important;gap:12px!important}
}