:root{
  /* Base */
  --bg:#f6f7fb;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#475569;

  /* Royal Blue background (like the reference poster technique) */
  --royal1:#0b2b66;
  --royal2:#0f3d86;
  --royal3:#0a2350;

  /* Gold accent (CTA only) */
  --gold:#f4c542;
  --goldHover:#eab308;
  --goldText:#1f2937;

  /* Blue accent for secondary buttons/links */
  --accent:#1d4ed8;
  --accentHover:#1e40af;
  --accentSoft: rgba(29,78,216,.10);

  /* UI */
  --border:rgba(15,23,42,.10);
  --shadow: 0 12px 30px rgba(2,6,23,.10);
  --radius: 18px;
  --max: 1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  /* Deep royal gradient background, but restrained */
  background:
    radial-gradient(1100px 640px at 12% -10%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(900px 560px at 86% 0%, rgba(244,197,66,.10), transparent 60%),
    linear-gradient(135deg, var(--royal3) 0%, var(--royal2) 45%, var(--royal1) 100%);
  color:var(--text);
  line-height:1.55;
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.96}

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

/* Nav */
.nav{
  position:sticky;top:0;z-index:50;
  background: linear-gradient(180deg, #0a2350 0%, #0b2b66 100%);  /* ✅ 不透明渐变 */
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;
}
.brand{
  display:flex;gap:10px;align-items:center;
  font-weight:800;letter-spacing:.2px;
  color:#ffffff;
  font-size: 26px;   /* 你想大就 18px，小就 14px */
}
.brand-badge{
  width:34px;height:34px;border-radius:12px;
  background: linear-gradient(135deg, rgba(244,197,66,.92), rgba(255,255,255,.75));
  box-shadow: 0 12px 28px rgba(2,6,23,.28);
}
.navlinks{display:flex;gap:10px;align-items:center}
.navlinks a{
  padding:8px 10px;border-radius:12px;
  color: rgba(255,255,255,.84);
}
.navlinks a.active, .navlinks a:hover{
  color:#ffffff;
  background: rgba(255,255,255,.10);
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:14px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#ffffff;
  font-weight:700;
}

/* Gold CTA */
.btn.primary{
  background: var(--gold);
  border: 1px solid rgba(0,0,0,.10);
  color: var(--goldText);         /* ✅ 字不透明、很清楚 */
  box-shadow: 0 14px 26px rgba(2,6,23,.22);
}
.btn.primary:hover{
  background: var(--goldHover);
}

/* Secondary (Detail) — readable on white cards */
.btn.secondary{
  background: rgba(29,78,216,.12);
  border: 1px solid rgba(29,78,216,.18);
  color: #0a2350;                 /* ✅ 深蓝字，不透明 */
  box-shadow: none;
}
.btn.secondary:hover{
  background: rgba(29,78,216,.16);
  border-color: rgba(29,78,216,.24);
}

.btn.ghost{
  background: transparent;
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
}
.btn-detail{white-space:nowrap}

/* Sections */
.section{padding:22px 0 46px}
.section h2{margin:0 0 12px;font-size:22px;color:#ffffff}
.section p{color: rgba(255,255,255,.84)}

/* Cards (content on white, clean) */
.card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* =========================
   HERO (image only banner)
   ========================= */

.hero{
  position: relative;
  overflow: hidden;
  background: transparent !important;
  padding: 0;                 /* ✅ 不要为文字留空间 */
  min-height: 400px;          /* ✅ 你要的最小高度 */
}

/* Full-bleed background image */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("hero.jpg") center/cover no-repeat;
  opacity: 1;
  filter: none;
  filter: brightness(1.06) contrast(0.98) saturate(0.98);
  pointer-events:none;
  z-index:0;
}

/* No overlay mask */
.hero::after{ content:none; }

/* If container exists, keep it above but empty */
.hero .container{
  position: relative;
  z-index: 1;
  height: 100%;
}

/* Pills inside white cards */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  background: rgba(10,35,80,.06);
  border:1px solid rgba(10,35,80,.10);
  color: #35556c;
  font-size:13px;
}
.pill b{color:#0a2350}

/* Grid */
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 980px){ .grid{grid-template-columns: repeat(2, minmax(0, 1fr));} }
@media (max-width: 640px){ .grid{grid-template-columns: 1fr;} }

/* Project cards */
.project-card{overflow:hidden; position:relative}
.project-thumb{
  width:100%;
  aspect-ratio: 16 / 10;
  background: rgba(15,23,42,.06);
  display:block;
  object-fit:cover;
}

/* Title left, Detail right */
.project-body{
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.title-link{
  flex: 1 1 auto;
  min-width: 0;
  display:block;
  font-weight:800;
  font-size:20px;
  line-height:1.2;

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

/* Status flag (clean + readable) */
.status-flag{
  position:absolute;
  top:12px; left:12px;
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(2,6,23,.14);
  background: rgba(255,255,255,.92);
  color: #0a2350;
  box-shadow: 0 10px 18px rgba(2,6,23,.18);
}
.status-flag.completed{
  background: #dcfce7;
  border-color: rgba(22,163,74,.22);
  color: #14532d;
}
.status-flag.in-progress{
  background: #fff7ed;
  border-color: rgba(245,158,11,.22);
  color: #7c2d12;
}
.status-flag.special{
  background: #eef2ff;
  border-color: rgba(51,65,85,.18);
  color: #334155;
}

/* Services */
.service-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 980px){ .service-grid{grid-template-columns: repeat(2, minmax(0, 1fr));} }
@media (max-width: 640px){ .service-grid{grid-template-columns: 1fr;} }
.service-card{padding:16px}
.service-card h3{margin:0 0 6px;font-size:18px;color:#0a2350}
.service-card p{margin:0;color:#3b5066}

/* =========================
   FOOTER (brand + contact)
   ========================= */
.footer{
  background:#0a2a66;
  border-top:1px solid rgba(255,255,255,.14);
  padding:22px 0;
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:start;
}

@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr; }
}

.footer-name{
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
  font-size: 15px;
}

.footer-meta{
  margin-top:6px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
}

.footer-contact{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-row{
  display:grid;
  grid-template-columns: 88px 1fr;
  column-gap: 12px;
  align-items:baseline;
}

.footer-k{
  color: rgba(255,255,255,.70);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.footer-v{
  color: rgba(255,255,255,.92);
  font-size: 13px;
  line-height: 1.45;
}

.footer-v a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
}

.footer-v a:hover{
  border-bottom-color: rgba(255,255,255,.55);
}

/* --- Project page styles (compatible) --- */
.page-title{padding:34px 0 10px}
.page-title h1{margin:0;font-size:34px;color:#ffffff}
.page-title p{margin:8px 0 0;color: rgba(255,255,255,.84);max-width:70ch}

.info-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
.info-card{padding:16px}
.info-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.info-item{display:flex;gap:12px;align-items:flex-start}
.info-key{min-width:110px;color:#5c6b7a}
.info-val{color:#0f172a}

.gallery-section{margin-top:18px}
.gallery-section h2{margin:0 0 10px;color:#ffffff}
.thumb-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 980px){ .thumb-grid{grid-template-columns: repeat(4, minmax(0, 1fr));} }
@media (max-width: 700px){ .thumb-grid{grid-template-columns: repeat(3, minmax(0, 1fr));} }
@media (max-width: 460px){ .thumb-grid{grid-template-columns: repeat(2, minmax(0, 1fr));} }

.thumb{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit:cover;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  cursor:pointer;
}

/* Tabs */
.tab{
  padding:10px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
  cursor:pointer;
  font-weight:700;
}
.tab:hover{background: rgba(255,255,255,.12); color: #fff;}
.tab.active{
  background: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.22);
  color: #0a2350;
}
.hidden{display:none !important;}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  background: rgba(2,6,23,.84);
  display:none;
  align-items:center; justify-content:center;
  padding:18px;
}
.lightbox.open{display:flex}
.lightbox-inner{
  max-width:min(1200px, 96vw);
  max-height:min(86vh, 900px);
  width:100%;
  position:relative;
}
.lightbox-img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}
.lb-btn{
  position:absolute; top:50%; transform: translateY(-50%);
  border-radius: 999px;
  width:44px;height:44px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor:pointer;
}
.lb-btn:hover{background: rgba(255,255,255,.18)}
.lb-prev{left:-10px}
.lb-next{right:-10px}
.lb-close{
  position:absolute; top:-12px; right:-12px;
  width:44px;height:44px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.14);
  color: #fff;
  cursor:pointer;
}
.lb-close:hover{background: rgba(255,255,255,.20)}

/* About page body: indent and align nicely */
.about-body{
  max-width: 980px;      /* 比首页 container 窄一点，更像正文 */
  padding-left: 24px;    /* 轻微缩进 */
  padding-right: 14px;
}

.about-body{
  text-align: justify;
  text-justify: inter-word;
}

/* =========================
   Project Tabs (make inactive tabs visible)
   ========================= */
.tabs, .tabbar{
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  padding:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* support common markup: <a class="btn">, <button class="btn">, <button class="tab">, <a class="tab"> */
.tabs .btn, .tabbar .btn,
.tabs .tab, .tabbar .tab,
.tabs a, .tabbar a,
.tabs button, .tabbar button{
  background:#f3f6ff;
  border:1px solid rgba(15,23,42,.18);
  color:#0a2350;              /* ✅ 不再是白字 */
  border-radius:999px;
  padding:8px 12px;
  font-weight:700;
  text-decoration:none;
  line-height:1;
}

/* active */
.tabs .active, .tabbar .active,
.tabs .btn.active, .tabbar .btn.active,
.tabs .tab.active, .tabbar .tab.active{
  background:#fff;
  border-color:#1d4ed8;
  color:#0a2350;
}

/* hover */
.tabs .btn:hover, .tabbar .btn:hover,
.tabs .tab:hover, .tabbar .tab:hover,
.tabs a:hover, .tabbar a:hover,
.tabs button:hover, .tabbar button:hover{
  background:#eaf0ff;
}

/* =========================
   Project Tabs (visible on light theme)
   ========================= */
#tabs{
  background:#ffffff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:16px;
  padding:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

#tabs .tab{
  background:#f3f6ff;
  border:1px solid rgba(15,23,42,.18);
  color:#0a2350;              /* ✅ 深色文字 */
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  cursor:pointer;
}

#tabs .tab:hover{
  background:#eaf0ff;
}

#tabs .tab.active{
  background:#ffffff;
  border-color:#1d4ed8;
  color:#0a2350;
}

/* 整个 Logo 区域的容器 */
.brand {
  display: flex;
  align-items: center; /* 图标和文字垂直居中 */
  text-decoration: none;
}

/* 图标大小控制 */
.brand-logo {
  height: 40px; /* 根据你的导航栏高度调整 */
  margin-right: 12px;
}

/* 文字容器：强制改为垂直堆叠 */
.brand-wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1; /* 紧凑行高，让两行字像一个整体 */
}

/* 第一行：缩写 (大、粗、醒目) */
.brand-name {
  font-size: 22px; 
  font-weight: 800; /* 极粗体 */
  color: #ffffff;  /* 假设背景是深色 */
  letter-spacing: 1px; /* 稍微给一点间距，显得高级 */
  display: block;
}

/* 第二行：全称 (小、细、刚好撑满或略短) */
.brand-sub {
  font-size: 6.4px; /* 关键点：字号要大幅缩小 */
  font-weight: 400; /* 细体，形成对比 */
  color: rgba(255, 255, 255, 0.8); /* 颜色稍浅，降低视觉权重 */
  text-transform: uppercase; /* 强制大写，保持整齐 */
  display: block;
  /* 如果全称还是太长，可以用下面这个属性微调：
     letter-spacing: -0.2px; 
  */
}