/* ════════════════════════════════════════════════════════════════
   DECK 岱科制造 官网样式系统 V10
   蓝白配色 + 琥珀强调 | 参考截图重建
   ════════════════════════════════════════════════════════════════ */
:root {
  --blue:#003153; --blue-2:#061A2A; --blue-3:#004470; --blue-light:#E8F0F8;
  --amber:#B45309; --amber-light:#FEF3E2; --amber-hover:#924108;
  --paper:#F4F4F5; --ink:#181818; --muted:#525560; --line:#DEDBD6;
  --white:#fff; --gray:#9CA3AF; --gray-2:#6B7280; --danger:#DC2626;
  --radius:0; --shadow:0 28px 90px rgba(0,0,0,.18); --shadow-sm:0 4px 20px rgba(0,0,0,.08);
  --max:1240px; --sans:'Noto Sans SC','Source Han Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular','Consolas',monospace;
  --transition:0.25s cubic-bezier(0.4,0,0.2,1);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.6; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
::selection { background:var(--amber); color:#fff; }

.container { width:min(var(--max), calc(100% - 48px)); margin:0 auto; }
.eyebrow { font-family:var(--mono); color:var(--amber); letter-spacing:0.22em; text-transform:uppercase; font-size:12px; font-weight:800; }

.section { padding:90px 0; position:relative; }
.section.dark { background:var(--blue-2); color:#fff; }
.section.blue { background:var(--blue); color:#fff; }
.section-head { display:grid; grid-template-columns:0.82fr 1.18fr; gap:48px; align-items:end; margin-bottom:44px; }
.section-head h2 { margin:14px 0 0; font-size:clamp(24px,3.2vw,42px); line-height:1.14; letter-spacing:-0.045em; font-weight:740; }
.section-lead { margin:0; color:var(--muted); line-height:1.85; font-size:16px; }
.dark .section-lead,.blue .section-lead { color:rgba(255,255,255,0.92); }
.btn { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 22px; border:1px solid transparent; cursor:pointer; transition:var(--transition); font-weight:700; font-size:14px; letter-spacing:0.02em; }
.btn-primary { background:var(--amber); color:#fff; }
.btn-primary:hover { transform:translateY(-2px); background:var(--amber-hover); box-shadow:0 8px 24px rgba(180,83,9,0.3); }
.btn-outline { border-color:rgba(0,49,83,0.22); color:var(--blue); background:rgba(255,255,255,0.62); }
.btn-outline:hover { background:var(--blue); color:#fff; border-color:var(--blue); }
.dark .btn-outline,.blue .btn-outline { border-color:rgba(255,255,255,0.35); color:#fff; background:rgba(255,255,255,0.06); }
.dark .btn-outline:hover,.blue .btn-outline:hover { background:rgba(255,255,255,0.15); }

.nav { position:fixed; top:0; left:0; right:0; z-index:50; padding:14px 0; transition:var(--transition); }
.nav.scrolled { padding:8px 0; }
.nav-inner { width:min(var(--max), calc(100% - 48px)); margin:auto; min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 16px; background:rgba(255,255,255,0.88); backdrop-filter:blur(18px); border:1px solid rgba(0,0,0,0.08); box-shadow:0 16px 60px rgba(0,0,0,0.08); transition:var(--transition); }
.nav.scrolled .nav-inner { box-shadow:0 8px 30px rgba(0,0,0,0.12); background:rgba(255,255,255,0.94); }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:36px; height:36px; display:grid; place-items:center; background:var(--blue); color:#fff; font-weight:800; font-size:18px; font-family:var(--mono); }
.brand-text strong { display:block; font-size:14px; letter-spacing:-0.02em; }
.brand-text span { display:block; font-family:var(--mono); color:var(--muted); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; }
.nav-links { display:flex; gap:22px; font-size:13px; color:#374151; }
.nav-links a { position:relative; padding:4px 0; transition:color 0.2s; }
.nav-links a:hover { color:var(--amber); }
.nav-links a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--amber); transition:width 0.3s; }
.nav-links a:hover::after { width:100%; }
.nav-cta { display:flex; align-items:center; gap:10px; }
.menu-btn { display:none; width:44px; height:44px; border:1px solid rgba(0,0,0,0.12); background:#fff; cursor:pointer; font-size:18px; }

.mobile-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:55; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.mobile-overlay.open { opacity:1; pointer-events:auto; }
.mobile-menu { position:fixed; top:0; right:-320px; width:320px; height:100vh; background:#fff; z-index:56; padding:80px 32px 32px; transition:right 0.3s ease; box-shadow:-8px 0 40px rgba(0,0,0,0.15); }
.mobile-menu.open { right:0; }
.mobile-menu a { display:block; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; color:var(--ink); }
.mobile-menu a:hover { color:var(--amber); }
.mobile-menu-close { position:absolute; top:18px; right:18px; width:36px; height:36px; border:none; background:none; font-size:24px; cursor:pointer; color:var(--muted); }

.hero { min-height:100vh; position:relative; display:grid; align-items:end; padding:128px 0 74px; color:#fff; overflow:hidden; background:var(--blue-2); }
.hero::before { content:''; position:absolute; inset:0; background:linear-gradient(160deg, rgba(3,22,37,0.95) 0%, rgba(3,22,37,0.85) 35%, rgba(3,22,37,0.55) 70%, rgba(0,49,83,0.35) 100%); z-index:1; }
.hero::after { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60L60 0H30L0 30z' fill='%23ffffff' fill-opacity='0.02'/%3E%3C/svg%3E"); z-index:0; }
.hero-media { position:absolute; inset:0; z-index:0; }
.hero-media::before { content:''; position:absolute; inset:0; background:url('hero-bg.jpg') center/cover no-repeat; filter:contrast(1.05) saturate(0.95); }
.hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:end; }
.hero h1 { margin:18px 0 0; font-size:clamp(34px,4.8vw,64px); line-height:1.05; letter-spacing:-0.06em; font-weight:750; max-width:820px; color:#fff; }
.hero h1 em { font-style:normal; color:var(--amber); }
.hero-lead { margin:28px 0 0; max-width:720px; font-size:17px; line-height:1.8; color:rgba(255,255,255,0.92); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.hero-services { max-width:520px; margin-left:auto; }
.hero-service { position:relative; min-height:120px; padding:20px; border:1px solid rgba(255,255,255,0.18); background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045)); overflow:hidden; transition:var(--transition); cursor:pointer; margin-bottom:10px; backdrop-filter:blur(4px); }
.hero-service::after { content:''; position:absolute; left:0; bottom:0; width:100%; height:3px; background:var(--amber); transform:scaleX(0.15); transform-origin:left; transition:transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.hero-service:hover { transform:translateY(-3px); border-color:rgba(255,255,255,0.4); background:linear-gradient(180deg, rgba(0,49,83,0.5), rgba(255,255,255,0.06)); }
.hero-service:hover::after { transform:scaleX(1); }
.hero-service b { display:block; font-family:var(--mono); color:var(--amber); font-size:11px; letter-spacing:0.16em; font-weight:800; }
.hero-service strong { display:block; margin-top:12px; font-size:20px; letter-spacing:-0.025em; font-weight:700; color:#fff; }
.hero-service span { display:block; margin-top:8px; color:rgba(255,255,255,0.82); font-size:13px; line-height:1.65; }

.pillar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pillar-card { background:#fff; border:1px solid var(--line); padding:36px 30px; display:flex; flex-direction:column; gap:18px; transition:var(--transition); position:relative; overflow:hidden; }
.pillar-card::before { content:''; position:absolute; top:0; left:0; width:4px; height:0; background:var(--amber); transition:height 0.4s; }
.pillar-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.pillar-card:hover::before { height:100%; }
.pillar-card .num { font-family:var(--mono); color:var(--amber); font-size:12px; letter-spacing:0.16em; font-weight:800; }
.pillar-card h3 { font-size:22px; letter-spacing:-0.03em; margin:6px 0 0; color:var(--ink); }
.pillar-card p { color:var(--muted); line-height:1.8; font-size:14px; flex:1; }
.pillar-card .tag { display:inline-block; padding:4px 10px; background:var(--amber-light); color:var(--amber); font-size:12px; font-weight:700; margin-top:4px; }

.filter-bar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.filter-btn { padding:8px 16px; border:1px solid var(--line); background:#fff; font-size:13px; cursor:pointer; transition:var(--transition); font-family:var(--sans); }
.filter-btn:hover { border-color:var(--amber); color:var(--amber); }
.filter-btn.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.systems-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.system-card { background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; transition:var(--transition); }
.system-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:var(--blue); }
.system-card .sys-head { padding:26px 28px 22px; border-bottom:1px solid var(--line); background:linear-gradient(135deg,#fff,var(--paper)); position:relative; }
.system-card .sys-head::before { content:''; position:absolute; top:0; left:0; width:0; height:3px; background:var(--amber); transition:width 0.5s cubic-bezier(0.4,0,0.2,1); }
.system-card:hover .sys-head::before { width:100%; }
.system-card .sys-code { font-family:var(--mono); color:var(--amber); font-size:11px; letter-spacing:0.16em; font-weight:800; }
.system-card h3 { margin:14px 0 8px; font-size:22px; letter-spacing:-0.03em; color:var(--ink); }
.system-card .sys-tag { color:var(--muted); font-size:14px; line-height:1.7; }
.system-card .sys-body { padding:22px 28px 26px; display:flex; flex-direction:column; gap:16px; flex:1; }
.sys-spec { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:13px; line-height:1.7; }
.sys-spec dt { font-family:var(--mono); color:var(--blue); letter-spacing:0.04em; font-weight:700; }
.sys-spec dd { margin:0; color:#374151; }
.sys-scene { border-top:1px solid var(--line); padding-top:14px; font-size:13px; color:var(--muted); line-height:1.7; }
.sys-scene b { color:var(--blue); font-family:var(--mono); font-size:11px; letter-spacing:0.12em; display:block; margin-bottom:6px; }
.sys-cta { margin-top:auto; padding-top:16px; }
.sys-cta a { font-size:13px; font-weight:700; color:var(--amber); display:flex; align-items:center; gap:6px; }
.sys-cta a:hover { gap:10px; }

.sample-studio { display:grid; grid-template-columns:0.92fr 1.08fr; gap:28px; align-items:stretch; }
.sample-note { background:#fff; border:1px solid var(--line); padding:34px; min-height:280px; display:flex; flex-direction:column; justify-content:space-between; }
.sample-note p { color:var(--muted); line-height:1.82; margin:18px 0 0; }
.sample-wall { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.sample-chip { min-height:132px; padding:16px; color:#fff; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 18px 50px rgba(0,0,0,0.12); cursor:pointer; transition:var(--transition); position:relative; overflow:hidden; background-size:cover; background-position:center; }
.sample-chip:hover { transform:translateY(-4px) scale(1.03); box-shadow:0 24px 60px rgba(0,0,0,0.2); z-index:2; }
.sample-chip b { font-family:var(--mono); font-size:11px; letter-spacing:0.12em; opacity:0.78; }
.sample-chip span { font-size:15px; font-weight:750; letter-spacing:-0.02em; }
.sample-chip .chip-info { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.75); padding:10px 16px; font-size:11px; transform:translateY(100%); transition:transform 0.3s; color:#fff; }
.sample-chip:hover .chip-info { transform:translateY(0); }

.sample-filters { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.sample-filters button { padding:6px 14px; border:1px solid var(--line); background:#fff; font-size:13px; cursor:pointer; transition:var(--transition); }
.sample-filters button.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.sample-filters button:hover:not(.active) { border-color:var(--amber); color:var(--amber); }

.fluorium { display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:center; }
.caution { margin-top:24px; padding:18px 20px; border-left:4px solid var(--amber); background:rgba(255,255,255,0.08); color:#fff; line-height:1.7; font-size:14px; }
.tech-stack { display:grid; gap:10px; }
.tech-layer { display:flex; justify-content:space-between; gap:18px; padding:18px 20px; background:#fff; color:#111; border-left:5px solid var(--amber); transition:var(--transition); position:relative; overflow:hidden; }
.tech-layer::before { content:''; position:absolute; left:0; top:0; width:0; height:100%; background:var(--amber); opacity:0.08; transition:width 0.4s cubic-bezier(0.4,0,0.2,1); }
.tech-layer:hover { transform:translateX(4px); }
.tech-layer:hover::before { width:100%; }
.tech-layer span:first-child { font-weight:700; font-size:14px; }
.tech-layer span:last-child { font-family:var(--mono); color:#6b7280; font-size:12px; }
.surface-matrix { margin-top:30px; border:1px solid rgba(255,255,255,0.18); }
.surface-matrix table { width:100%; border-collapse:collapse; font-size:13px; }
.surface-matrix th,.surface-matrix td { text-align:left; padding:13px 16px; border-bottom:1px solid rgba(255,255,255,0.12); line-height:1.6; vertical-align:top; }
.surface-matrix th { font-family:var(--mono); color:var(--amber); letter-spacing:0.08em; font-size:11px; text-transform:uppercase; white-space:nowrap; width:100px; }
.surface-matrix td { color:rgba(255,255,255,0.92); }
.matrix-note { margin-top:14px; font-size:13px; color:rgba(255,255,255,0.75); line-height:1.7; }

.proof-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:rgba(255,255,255,0.13); border:1px solid rgba(255,255,255,0.13); }
.proof-card { background:rgba(255,255,255,0.06); padding:28px; min-height:230px; transition:var(--transition); }
.proof-card:hover { background:rgba(255,255,255,0.1); }
.proof-card b { font-family:var(--mono); color:var(--amber); font-size:12px; letter-spacing:0.16em; font-weight:800; }
.proof-card h3 { margin:24px 0 12px; font-size:22px; color:#fff; }
.proof-card p { margin:0; color:rgba(255,255,255,0.92); line-height:1.75; }

.case-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.case-card { background:#fff; border:1px solid var(--line); overflow:hidden; min-height:360px; transition:var(--transition); }
.case-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.case-card .case-img { width:100%; height:215px; background:linear-gradient(135deg,#D0D0D0,#E8E8E8); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:48px; color:var(--gray); }
.case-card .case-img::before { content:attr(data-tag); position:absolute; top:12px; left:12px; background:var(--blue); color:#fff; padding:4px 10px; font-size:11px; font-family:var(--mono); letter-spacing:0.05em; z-index:2; }
.case-card div { padding:20px; }
.case-card h3 { margin:0; font-size:18px; letter-spacing:-0.02em; color:var(--ink); }
.case-card p { margin:10px 0 0; color:var(--muted); line-height:1.68; font-size:14px; }
.case-card .case-meta { display:flex; gap:12px; margin-top:12px; font-size:12px; color:var(--gray); font-family:var(--mono); flex-wrap:wrap; }
.case-card .case-meta span { padding:2px 8px; background:var(--paper); }

.archaeology-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,0.13); border:1px solid rgba(255,255,255,0.13); }
.archaeology-card { background:rgba(255,255,255,0.06); padding:28px; min-height:230px; transition:var(--transition); }
.archaeology-card:hover { background:rgba(255,255,255,0.1); }
.archaeology-card b { font-family:var(--mono); color:var(--amber); font-size:12px; letter-spacing:0.16em; font-weight:800; }
.archaeology-card h3 { margin:24px 0 12px; font-size:22px; color:#fff; }
.archaeology-card p { margin:0; color:rgba(255,255,255,0.92); line-height:1.75; }

.estimate-panel { background:#fff; border:1px solid var(--line); padding:36px; max-width:640px; margin:0 auto; }
.estimate-form { display:grid; gap:20px; }
.estimate-form .form-group { display:grid; gap:6px; }
.estimate-form label { font-size:13px; font-weight:700; color:var(--blue); }
.estimate-form select,.estimate-form input { padding:12px 14px; border:1px solid var(--line); font-size:14px; font-family:var(--sans); transition:var(--transition); }
.estimate-form select:focus,.estimate-form input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,49,83,0.1); }
.estimate-result { margin-top:28px; padding:24px; background:var(--blue-light); border-left:4px solid var(--blue); display:none; }
.estimate-result.active { display:block; }
.estimate-result .price { font-size:36px; font-weight:800; color:var(--blue); font-family:var(--mono); }
.estimate-result .price-note { font-size:13px; color:var(--muted); margin-top:8px; }

.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.contact-info h4 { font-size:18px; margin-bottom:16px; color:var(--blue); }
.contact-info p { color:var(--muted); line-height:2; font-size:14px; }
.contact-info .contact-item { display:flex; gap:12px; margin-bottom:16px; align-items:flex-start; }
.contact-info .contact-icon { width:40px; height:40px; background:var(--blue-light); display:grid; place-items:center; color:var(--blue); font-size:18px; flex-shrink:0; }
.contact-form { display:grid; gap:16px; }
.contact-form input,.contact-form textarea,.contact-form select { padding:14px 16px; border:1px solid var(--line); font-size:14px; font-family:var(--sans); transition:var(--transition); }
.contact-form textarea { min-height:120px; resize:vertical; }
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,49,83,0.1); }
.contact-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.cta { background:linear-gradient(135deg,var(--blue),#061929); color:#fff; padding:82px 0; }
.cta-box { display:flex; align-items:center; justify-content:space-between; gap:34px; }
.cta h2 { margin:10px 0 0; max-width:760px; color:#fff; }
.cta p { color:rgba(255,255,255,0.92); max-width:700px; line-height:1.8; margin-top:16px; }
.cta-actions { display:flex; flex-direction:column; gap:12px; min-width:260px; }

footer { background:#111; color:#d1d5db; padding:56px 0 28px; }
.footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; }
footer h4 { color:#fff; margin:0 0 14px; font-size:14px; }
footer p,footer a { display:block; color:#9ca3af; line-height:1.8; font-size:14px; transition:color 0.2s; }
footer a:hover { color:var(--amber); }
.footer-bottom { border-top:1px solid #2a2a2a; margin-top:34px; padding-top:18px; display:flex; justify-content:space-between; gap:18px; color:#777; font-size:12px; }

.back-to-top { position:fixed; bottom:24px; right:24px; width:44px; height:44px; background:var(--blue); color:#fff; border:none; cursor:pointer; display:grid; place-items:center; font-size:18px; opacity:0; pointer-events:none; transition:opacity 0.3s,transform 0.3s; z-index:40; }
.back-to-top.show { opacity:1; pointer-events:auto; }
.back-to-top:hover { transform:translateY(-4px); background:var(--amber); }

.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:100; opacity:0; pointer-events:none; transition:opacity 0.3s; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { opacity:1; pointer-events:auto; }
.modal-content { background:#fff; max-width:560px; width:100%; max-height:90vh; overflow-y:auto; padding:36px; position:relative; transform:translateY(20px); transition:transform 0.3s; }
.modal-overlay.open .modal-content { transform:translateY(0); }
.modal-close { position:absolute; top:16px; right:16px; width:32px; height:32px; border:none; background:none; cursor:pointer; font-size:20px; color:var(--muted); }
.modal-close:hover { color:var(--danger); }

.animate-in { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease,transform 0.6s ease; }
.animate-in.visible { opacity:1; transform:translateY(0); }

@media(max-width:960px){
  .nav-links{display:none;}
  .menu-btn{display:inline-grid;place-items:center;}
  .hero-grid,.section-head,.fluorium,.contact-grid,.sample-studio,.footer-grid{grid-template-columns:1fr;}
  .pillar-grid,.systems-grid,.case-grid,.archaeology-grid,.proof-grid{grid-template-columns:repeat(2,1fr);}
  .hero-service-links{margin:32px 0 0;max-width:720px;}
  .cta-box{display:block;}
  .cta-actions{margin-top:24px;}
}
@media(max-width:640px){
  .container,.nav-inner{width:calc(100% - 28px);}
  .sample-wall{grid-template-columns:repeat(2,1fr);}
  .sample-chip{min-height:108px;}
  .hero{min-height:auto;padding:112px 0 54px;}
  .hero h1{font-size:32px;}
  .hero-lead{font-size:16px;}
  .proof-grid,.case-grid,.pillar-grid,.systems-grid,.archaeology-grid{grid-template-columns:1fr;}
  .section{padding:66px 0;}
  .section-head{gap:18px;margin-bottom:28px;}
  .service-card,.proof-card,.archaeology-card{min-height:auto;}
  .case-card{min-height:auto;}
  .case-card .case-img{height:220px;}
  .footer-bottom{display:block;}
  .contact-form .form-row{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms!important;transition-duration:0.01ms!important;scroll-behavior:auto!important;}
}