/* 西藏迎昭旅行社 - 包车官网 */
:root {
  --navy: #1A2744;
  --gold: #B8860B;
  --gold-light: #D4A843;
  --white: #fff;
  --bg: #F8F6F3;
  --text: #333;
  --text-light: #666;
  --red: #C8102E;
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; color:var(--text); line-height:1.7; background:var(--white); }

.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* Header */
.header { background:var(--white); box-shadow:0 2px 10px rgba(0,0,0,0.06); position:sticky; top:0; z-index:100; }
.header .container { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; }
.logo img { height:48px; }
.nav { display:flex; gap:32px; list-style:none; }
.nav a { text-decoration:none; color:var(--navy); font-weight:600; font-size:15px; padding:8px 0; border-bottom:2px solid transparent; transition:0.3s; }
.nav a:hover { border-bottom-color:var(--gold); color:var(--gold); }
.phone-top { color:var(--gold); font-weight:700; font-size:18px; }

/* Hero */
.hero { height:100vh; min-height:600px; max-height:900px; background:linear-gradient(135deg, var(--navy) 0%, #2a3f6a 50%, var(--navy) 100%); display:flex; align-items:center; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><path d="M0 800 L1200 500 L1200 800 Z" fill="rgba(255,255,255,0.03)"/><path d="M0 800 L800 300 L800 800 Z" fill="rgba(255,255,255,0.02)"/></svg>') no-repeat bottom/cover; opacity:0.5; }
.hero-content { position:relative; z-index:1; color:var(--white); max-width:700px; }
.hero-tag { display:inline-block; background:var(--gold); color:var(--white); padding:6px 20px; border-radius:4px; font-size:14px; font-weight:600; margin-bottom:20px; letter-spacing:2px; }
.hero h1 { font-size:clamp(32px,5vw,52px); font-weight:700; line-height:1.3; margin-bottom:16px; }
.hero p { font-size:18px; opacity:0.85; margin-bottom:32px; line-height:1.8; }
.btn { display:inline-block; padding:14px 36px; font-size:16px; font-weight:700; border-radius:4px; text-decoration:none; transition:0.3s; cursor:pointer; border:none; }
.btn-gold { background:var(--gold); color:var(--white); }
.btn-gold:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(184,134,11,0.3); }
.btn-outline { border:2px solid var(--white); color:var(--white); margin-left:16px; }
.btn-outline:hover { background:var(--white); color:var(--navy); }

/* Section */
.section { padding:80px 0; }
.section-dark { background:var(--navy); color:var(--white); }
.section-gray { background:var(--bg); }
.section-title { text-align:center; margin-bottom:50px; }
.section-title h2 { font-size:32px; color:var(--navy); margin-bottom:8px; }
.section-dark .section-title h2 { color:var(--white); }
.section-title .sub { color:var(--gold); font-size:15px; font-weight:600; letter-spacing:3px; text-transform:uppercase; }
.section-title p { color:var(--text-light); max-width:600px; margin:8px auto 0; }
.section-dark .section-title p { color:rgba(255,255,255,0.6); }

/* Vehicle Cards */
.vehicle-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.vehicle-card { background:var(--white); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); transition:0.3s; }
.vehicle-card:hover { transform:translateY(-6px); box-shadow:0 12px 32px rgba(0,0,0,0.12); }
.vehicle-img { height:220px; background:var(--navy); display:flex; align-items:center; justify-content:center; font-size:64px; color:var(--gold); }
.vehicle-body { padding:20px; }
.vehicle-body h3 { font-size:20px; color:var(--navy); margin-bottom:6px; }
.vehicle-body .specs { font-size:14px; color:var(--text-light); margin-bottom:8px; }
.vehicle-body .seats { display:inline-block; background:var(--gold); color:var(--white); padding:2px 12px; border-radius:3px; font-size:13px; font-weight:600; }
.vehicle-body .price { font-size:22px; color:var(--red); font-weight:700; margin-top:12px; }

/* Route Cards */
.route-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.route-card { background:var(--white); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); transition:0.3s; }
.route-card:hover { transform:translateY(-4px); }
.route-img { height:160px; background:linear-gradient(135deg, var(--navy), #2a3f6a); display:flex; align-items:center; justify-content:center; font-size:36px; color:var(--gold); }
.route-body { padding:16px; }
.route-body h3 { font-size:17px; color:var(--navy); margin-bottom:4px; }
.route-body .days { font-size:13px; color:var(--gold); font-weight:600; }
.route-body .route-price { font-size:18px; color:var(--red); font-weight:700; margin-top:8px; }

/* Advantages */
.adv-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.adv-item { text-align:center; padding:32px 20px; background:rgba(255,255,255,0.05); border-radius:8px; border:1px solid rgba(255,255,255,0.1); transition:0.3s; }
.adv-item:hover { border-color:var(--gold); transform:translateY(-4px); }
.adv-icon { font-size:40px; margin-bottom:16px; }
.adv-item h3 { font-size:18px; margin-bottom:8px; }
.adv-item p { font-size:14px; opacity:0.7; }

/* Drivers */
.driver-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.driver-card { text-align:center; padding:24px; background:var(--white); border-radius:8px; box-shadow:var(--shadow); }
.driver-avatar { width:80px; height:80px; border-radius:50%; background:var(--gold); margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-size:32px; color:var(--white); }
.driver-card h3 { font-size:18px; color:var(--navy); }
.driver-card .lang { font-size:13px; color:var(--gold); margin:4px 0; }
.driver-card p { font-size:14px; color:var(--text-light); }

/* Stats Bar */
.stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:0; }
.stat-item { text-align:center; padding:32px 16px; border-right:1px solid rgba(255,255,255,0.1); }
.stat-item:last-child { border:none; }
.stat-num { font-size:40px; font-weight:700; color:var(--gold); }
.stat-label { font-size:14px; opacity:0.7; margin-top:4px; }

/* CTA */
.cta { text-align:center; }
.cta h2 { font-size:36px; margin-bottom:12px; }
.cta p { font-size:18px; opacity:0.8; margin-bottom:28px; }
.cta .btn-gold { font-size:18px; padding:16px 48px; }

/* Footer */
.footer { background:#111; color:rgba(255,255,255,0.7); padding:48px 0 24px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
.footer h3 { color:var(--gold); font-size:16px; margin-bottom:16px; }
.footer p, .footer a { font-size:14px; color:rgba(255,255,255,0.6); text-decoration:none; line-height:2; }
.footer a:hover { color:var(--gold); }
.footer-bottom { text-align:center; padding-top:24px; margin-top:24px; border-top:1px solid rgba(255,255,255,0.1); font-size:13px; }

@media (max-width:768px) {
  .nav { display:none; }
  .vehicle-grid, .adv-grid { grid-template-columns:1fr; }
  .route-grid { grid-template-columns:repeat(2, 1fr); } .driver-grid { grid-template-columns:repeat(2, 1fr); }
  .stats { grid-template-columns:repeat(2, 1fr); }
  .footer-grid { grid-template-columns:1fr; }
  .hero { height:70vh; min-height:450px; }
}
@media (max-width:480px) {
  .route-grid, .driver-grid { grid-template-columns:1fr; }
  .btn-outline { margin-left:0; margin-top:12px; }
}

.route-card { text-decoration:none; color:inherit; display:block; }