﻿/* =========================================================
   林木 LINMU · 1/64 车模定制 — 结构化原型 v0.1
   视觉基调：参考 UR（URBAN REVIVO）的「编辑式时尚大片」语言
   —— 深色高对比 + 模块化大图分区 + 大字号标题 + 精密细节
   ========================================================= */

:root {
  --bg:        #0b0b0d;
  --bg-2:      #101014;
  --bg-3:      #16161b;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.16);
  --txt:       #f4f4f2;
  --txt-2:     #9ca0aa;
  --accent:    #ff5a1f;
  --accent-2:  #ff7a45;
  --silver:    #c8ccd4;
  --ph-bg:     #15151a;
  --ph-line:   rgba(255,255,255,.22);
  --font: "Noto Sans SC","PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",Roboto,sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:72px; }
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--txt);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; }
code { background:rgba(255,255,255,.08); padding:.1em .35em; border-radius:4px; font-size:.9em; }

.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
.accent { color:var(--accent); }

/* ---------- 原型提示条 ---------- */
.proto-bar {
  position:fixed; inset:auto 0 0 0; z-index:60;
  background:rgba(255,90,31,.92); color:#fff;
  font-size:13px; text-align:center; padding:8px 16px;
  backdrop-filter:blur(4px);
}

/* ---------- 顶部导航 ---------- */
.site-header {
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled {
  background:rgba(11,11,13,.86);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-mark {
  width:34px; height:34px; border-radius:8px;
  background:linear-gradient(135deg, var(--accent), #c43a0e);
  color:#fff; font-weight:800; font-size:18px;
  display:grid; place-items:center;
}
.brand-text { font-weight:700; font-size:17px; letter-spacing:.04em; }
.brand-text em { font-style:normal; color:var(--txt-2); font-size:12px; letter-spacing:.22em; margin-left:6px; }

.site-nav { display:flex; align-items:center; gap:26px; }
.site-nav a { font-size:14px; color:var(--txt-2); transition:color .2s; }
.site-nav a:hover { color:var(--txt); }
.site-nav .nav-cta {
  color:#fff; background:var(--accent); padding:8px 18px; border-radius:999px; font-weight:600;
}
.site-nav .nav-cta:hover { background:var(--accent-2); }

.nav-toggle { display:none; background:none; border:0; width:40px; height:40px; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--txt); margin:5px auto; transition:.25s; }

/* ---------- 通用区块 ---------- */
.section { padding:96px 0; border-top:1px solid var(--line); }
.section:nth-child(even) { background:var(--bg-2); }
.sec-head { margin-bottom:56px; max-width:760px; }
.sec-head-row { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; max-width:none; }
.kicker {
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px; font-weight:600;
}
h1, h2, h3 { line-height:1.25; letter-spacing:.01em; }
h1 { font-size:clamp(44px, 7vw, 88px); font-weight:800; }
h2 { font-size:clamp(30px, 4.4vw, 52px); font-weight:800; }
h3 { font-size:20px; font-weight:700; }
.sec-sub { color:var(--txt-2); margin-top:12px; font-size:16px; }
.lead { font-size:20px; color:var(--txt); font-weight:500; margin-bottom:16px; }

/* ---------- 按钮 ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 28px; border-radius:999px; font-size:15px; font-weight:600;
  transition:.22s; border:1px solid transparent;
}
.btn-accent { background:var(--accent); color:#fff; }
.btn-accent:hover { background:var(--accent-2); transform:translateY(-1px); }
.btn-ghost { border-color:var(--line-2); color:var(--txt); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.btn-block { width:100%; }

/* ---------- 图片占位（统一视觉） ---------- */
.ph {
  position:relative;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 10px, transparent 10px 20px),
    var(--ph-bg);
  border:1.5px dashed var(--ph-line);
  border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; text-align:center; padding:20px; min-height:150px;
  overflow:hidden;
}
.ph-tag {
  position:absolute; top:10px; left:10px;
  background:var(--accent); color:#fff;
  font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px;
  letter-spacing:.05em;
}
.ph-title { font-size:15px; font-weight:700; color:var(--txt); }
.ph-desc { font-size:13px; color:var(--txt-2); max-width:420px; }
.ph-spec { font-size:11px; color:#6b7280; letter-spacing:.04em; }

.ph-hero { position:absolute; inset:0; border:0; border-radius:0; min-height:0; padding:0; }
.ph-hero::after {
  content:"📷"; position:absolute; right:24px; bottom:20px;
  font-size:28px; opacity:.5;
}
.ph-step { aspect-ratio:4/3; min-height:120px; padding:12px; }
.ph-step .ph-desc { font-size:12px; }
.ph-car { aspect-ratio:4/3; min-height:150px; }
.ph-car .ph-desc { font-size:12px; }
.ph-dual { aspect-ratio:16/9; min-height:200px; }
.ph-case-lg { aspect-ratio:16/10; min-height:320px; }
.ph-case { aspect-ratio:4/3; min-height:180px; }
.ph-guide { aspect-ratio:4/3; min-height:170px; }
.ph-cap { aspect-ratio:4/3; min-height:170px; }
.ph-case .ph-desc, .ph-guide .ph-desc, .ph-cap .ph-desc { font-size:12px; }

/* ---------- Hero ---------- */
.hero {
  position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden;
  background:
    radial-gradient(900px 520px at 82% 18%, rgba(255,90,31,.10), transparent 70%),
    radial-gradient(700px 500px at 10% 90%, rgba(255,255,255,.05), transparent 70%),
    linear-gradient(180deg, #101014 0%, var(--bg) 100%);
}
.hero-media { position:absolute; inset:0; pointer-events:none; }
.hero-split {
  position:relative; z-index:2; width:100%;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  padding-top:120px; padding-bottom:72px;
}
.hero-content { min-width:0; }
.hero .kicker { color:var(--accent); }
.hero-sub { margin-top:22px; font-size:18px; color:var(--txt-2); max-width:560px; }
.hero-cta { margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; }
.hero-stats {
  margin-top:64px; display:grid; grid-template-columns:repeat(4, 1fr);
  gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  max-width:760px;
}
.stat { background:rgba(11,11,13,.72); backdrop-filter:blur(8px); padding:20px 24px; }
.stat b { display:block; font-size:26px; font-weight:800; color:var(--txt); }
.stat span { font-size:13px; color:var(--txt-2); }

/* ---------- 品牌理念 ---------- */
.brand-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start; }
.brand-copy p { color:var(--txt-2); margin-bottom:14px; }
.brand-copy p b { color:var(--txt); }
.tick-list li { position:relative; padding-left:22px; color:var(--txt-2); margin-bottom:8px; }
.tick-list li::before { content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }
.brand-features { display:flex; flex-direction:column; gap:24px; }
.feature-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature { border:1px solid var(--line); border-radius:12px; padding:20px; background:var(--bg-3); }
.feature-no { font-size:12px; color:var(--accent); font-weight:700; letter-spacing:.1em; }
.feature h3 { margin:8px 0 6px; font-size:17px; }
.feature p { font-size:13px; color:var(--txt-2); }

/* ---------- 定制流程 ---------- */
.process-steps { display:grid; grid-template-columns:repeat(6,1fr); gap:20px; counter-reset:step; }
.step { position:relative; }
.step-no {
  display:inline-grid; place-items:center; width:44px; height:44px;
  border:1px solid var(--line-2); border-radius:50%;
  font-size:14px; font-weight:700; color:var(--accent); margin-bottom:16px;
  background:var(--bg);
}
.step h3 { margin:14px 0 6px; font-size:17px; }
.step p { font-size:13px; color:var(--txt-2); }

/* ---------- 车型库 ---------- */
.filter-chips { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.chip {
  background:none; border:1px solid var(--line-2); color:var(--txt-2);
  padding:8px 18px; border-radius:999px; font-size:14px; transition:.2s;
}
.chip:hover { border-color:var(--accent); color:var(--txt); }
.chip.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.car-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.car-card {
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:var(--bg-3); transition:transform .25s, border-color .25s;
}
.car-card:hover { transform:translateY(-4px); border-color:var(--line-2); }
.car-card .ph { border-radius:0; border-left:0; border-right:0; border-top:0; }
.car-info { padding:20px; }
.car-info h3 { font-size:19px; }
.car-tags { font-size:13px; color:var(--txt-2); margin:4px 0 10px; }
.car-price { font-size:20px; font-weight:800; color:var(--accent); }
.car-link { display:inline-block; margin-top:12px; font-size:14px; font-weight:600; color:var(--txt-2); }
.car-link:hover { color:var(--accent); }

/* ---------- 建模报价 ---------- */
.quote-panel {
  display:grid; grid-template-columns:1.3fr 1fr; gap:40px;
  border:1px solid var(--line); border-radius:20px; padding:40px;
  background:var(--bg-3); margin-bottom:48px;
}
.field { margin-bottom:20px; }
.field label { display:block; font-size:14px; font-weight:600; margin-bottom:8px; }
.field input[type=text], .field input[type=number], .field select, .field textarea {
  width:100%; background:var(--bg); border:1px solid var(--line-2);
  color:var(--txt); border-radius:10px; padding:12px 14px; font-size:15px; font-family:inherit;
}
.field textarea { resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--accent); }
.field input[type=file] { color:var(--txt-2); font-size:14px; }
.field-note { font-size:12px; color:#6b7280; margin-top:6px; }
.checks { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.check { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--txt-2); }
.check input { accent-color:var(--accent); width:16px; height:16px; }

.quote-result {
  background:linear-gradient(160deg, #1c1c22, #131317);
  border:1px solid var(--line); border-radius:16px;
  padding:32px; display:flex; flex-direction:column; justify-content:center;
  text-align:center;
}
.range { font-size:clamp(34px, 4vw, 52px); font-weight:800; color:var(--accent); margin:12px 0 4px; }
.range-sub { color:var(--txt-2); font-size:13px; margin-bottom:22px; }

.price-tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tier {
  position:relative; border:1px solid var(--line); border-radius:16px; padding:28px;
  background:var(--bg-3);
}
.tier-hot { border-color:var(--accent); }
.tier-tag {
  position:absolute; top:-12px; left:24px; background:var(--accent); color:#fff;
  font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px;
}
.tier-price { font-size:26px; font-weight:800; color:var(--accent); margin:8px 0 14px; }
.tier ul li { color:var(--txt-2); font-size:14px; padding:4px 0; position:relative; padding-left:18px; }
.tier ul li::before { content:"—"; position:absolute; left:0; color:var(--accent); }

/* ---------- 双入口 ---------- */
.dual-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.dual-card {
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
  background:var(--bg-3); transition:transform .25s, border-color .25s; display:block;
}
.dual-card:hover { transform:translateY(-4px); border-color:var(--accent); }
.dual-card .ph { border-radius:0; border-left:0; border-right:0; border-top:0; }
.dual-body { padding:28px; }
.dual-body h3 { font-size:24px; }
.dual-body p { color:var(--txt-2); margin:10px 0 14px; }
.dual-body ul li { color:var(--txt-2); font-size:14px; padding:4px 0; padding-left:18px; position:relative; }
.dual-body ul li::before { content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }
.dual-cta { display:inline-block; margin-top:16px; font-weight:700; color:var(--accent); }

/* ---------- 案例 ---------- */
.case-featured { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; margin-bottom:48px; }
.case-featured-info h3 { font-size:26px; margin:12px 0 14px; }
.case-featured-info p:not(.kicker) { color:var(--txt-2); margin-bottom:16px; }
.case-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

/* ---------- 拍摄指南 ---------- */
.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.guide-item h3 { margin:16px 0 8px; font-size:18px; }
.guide-item p { color:var(--txt-2); font-size:14px; }

/* ---------- 生产能力 ---------- */
.cap-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cap-item h3 { margin:16px 0 8px; font-size:18px; }
.cap-item p { color:var(--txt-2); font-size:14px; }

/* ---------- 咨询 ---------- */
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:56px; align-items:start; }
.contact-info .lead { margin:16px 0 24px; color:var(--txt-2); }
.contact-list li { padding:8px 0; border-bottom:1px solid var(--line); font-size:15px; color:var(--txt-2); }
.contact-list li b { color:var(--txt); min-width:64px; display:inline-block; }
.contact-tip { margin-top:20px; font-size:13px; color:#6b7280; }
.contact-form {
  border:1px solid var(--line); border-radius:20px; padding:32px;
  background:var(--bg-3);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note { margin-top:12px; font-size:14px; color:var(--accent); min-height:20px; }

/* ---------- 页脚 ---------- */
.site-footer { border-top:1px solid var(--line); background:#08080a; padding:56px 0 24px; }
.footer-inner { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:40px; }
.footer-brand p { color:var(--txt-2); font-size:14px; margin-top:12px; }
.footer-nav { display:flex; flex-direction:column; gap:10px; }
.footer-nav a { color:var(--txt-2); font-size:14px; }
.footer-nav a:hover { color:var(--accent); }
.footer-contact p { color:var(--txt-2); font-size:14px; padding:4px 0; }
.footer-bottom { border-top:1px solid var(--line); padding-top:20px; }
.footer-bottom p { font-size:13px; color:#6b7280; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .process-steps { grid-template-columns:repeat(3,1fr); }
  .car-grid { grid-template-columns:repeat(2,1fr); }
  .case-grid { grid-template-columns:repeat(2,1fr); }
  .brand-grid { grid-template-columns:1fr; gap:32px; }
  .case-featured { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
}
@media (max-width: 768px) {
  .section { padding:72px 0; }
  .hero-stats { grid-template-columns:repeat(2,1fr); }
  .site-nav {
    position:fixed; inset:64px 0 auto 0; background:rgba(11,11,13,.97);
    flex-direction:column; gap:0; padding:12px 24px 24px;
    transform:translateY(-120%); transition:transform .3s; border-bottom:1px solid var(--line);
  }
  .site-nav.open { transform:translateY(0); }
  .site-nav a { padding:14px 0; width:100%; border-bottom:1px solid var(--line); }
  .nav-toggle { display:block; }
  .process-steps, .feature-cards, .price-tiers, .guide-grid, .cap-grid { grid-template-columns:1fr; }
  .car-grid { grid-template-columns:1fr; }
  .dual-grid, .case-grid, .quote-panel, .form-row, .footer-inner { grid-template-columns:1fr; }
  .checks { grid-template-columns:1fr; }
}

/* Hero 实拍图（完整展示全车，不裁切） */
.hero-figure { display:flex; align-items:center; justify-content:center; min-width:0; }
.hero-img {
  width:auto; max-width:100%; max-height:78vh;
  object-fit:contain; display:block; margin:0 auto;
  border-radius:18px; border:1px solid var(--line);
  box-shadow:0 40px 90px rgba(0,0,0,.55);
}

/* 已替换占位的实拍图样式 */
.car-img  { width:100%; aspect-ratio:4/3;  object-fit:cover; display:block; }
.case-img { width:100%; aspect-ratio:4/3;  object-fit:cover; display:block; }
.dual-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
/* Hero 分栏响应式 */
@media (max-width: 1024px) {
  .hero-split { grid-template-columns:1fr; gap:36px; padding-top:104px; }
  .hero-stats { grid-template-columns:repeat(2,1fr); }
  .hero-img { max-height:56vh; }
}
/* 右上角语言切换 */
.header-right { display:flex; align-items:center; gap:18px; }
.lang-switch {
  display:flex; border:1px solid var(--line-2); border-radius:999px;
  overflow:hidden; flex-shrink:0; background:rgba(255,255,255,.03);
}
.lang-btn {
  background:none; border:0; color:var(--txt-2);
  font-size:13px; font-weight:600; padding:6px 14px; font-family:inherit;
  transition:background .2s, color .2s;
}
.lang-btn.active { background:var(--accent); color:#fff; }
.lang-btn:not(.active):hover { color:var(--txt); }
@media (max-width: 768px) {
  .header-right { gap:12px; }
  .lang-switch { order:2; }
  .nav-toggle { order:3; }
  .site-nav { order:4; }
}
/* 拍摄指南实拍图 */
.guide-img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }

/* 拍摄指南：完整显示不裁剪 */
.guide-img-contain { object-fit:contain; background:var(--bg-3); border:1px solid var(--line); border-radius:12px; }

/* 拍摄指南：裁切突出主体 */
.guide-img { object-position:center; transform:scale(1.06); }

/* 品牌理念工坊氛围图 */
.brand-img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:12px; border:1px solid var(--line); }

.step-img     { width:100%; aspect-ratio:4/3;  object-fit:cover; display:block; }
.case-lg-img  { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; border-radius:12px; border:1px solid var(--line); }
.cap-img      { width:100%; aspect-ratio:4/3;  object-fit:cover; display:block; }

/* 精选案例大图：完整显示不裁剪 */
.case-lg-contain { object-fit:contain; background:var(--bg-3); border:1px solid var(--line); border-radius:12px; }

/* 报价结果点击反馈 */
@keyframes calcFlash { 0%{transform:scale(1);} 40%{transform:scale(1.09); color:var(--accent-2);} 100%{transform:scale(1);} }
.calc-flash { display:inline-block; animation:calcFlash .6s ease; }

/* 阿拉伯语 RTL 适配 */
html[lang="ar"] body { font-family:"Segoe UI","Tahoma","Noto Naskh Arabic","Microsoft YaHei",sans-serif; }
[dir="rtl"] .kicker { letter-spacing:0; }
[dir="rtl"] .tick-list li { padding-left:0; padding-right:22px; }
[dir="rtl"] .tick-list li::before { left:auto; right:0; }
[dir="rtl"] .tier ul li { padding-left:0; padding-right:18px; }
[dir="rtl"] .tier ul li::before { left:auto; right:0; }
[dir="rtl"] .dual-body ul li { padding-left:0; padding-right:18px; }
[dir="rtl"] .dual-body ul li::before { left:auto; right:0; }
[dir="rtl"] .hero-content, [dir="rtl"] .brand-copy, [dir="rtl"] .quote-result, [dir="rtl"] .contact-info, [dir="rtl"] .step, [dir="rtl"] .car-info, [dir="rtl"] .dual-body, [dir="rtl"] .tier, [dir="rtl"] .guide-item, [dir="rtl"] .cap-item { text-align:right; }