/* ============================================================
   贵州包车网 —「黔行笔记」设计系统 v4
   旅行编辑风格 | 贵州山水灵感 | 纯静态无框架
   Aesthetic: Editorial travel journal — warm, organic, trustworthy
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

/* ============================================================
   Variables —「黔行笔记」调色板
   ============================================================ */
:root {
  /* Forest greens — inspired by Guizhou karst landscape */
  --color-primary: #1a5c3e;
  --color-primary-dark: #0f3a26;
  --color-primary-light: #e6f0ea;
  --color-primary-rgb: 26, 92, 62;

  /* Warm earth — inspired by Miao embroidery & village warmth */
  --color-accent: #c1662e;
  --color-accent-dark: #9e4f22;
  --color-accent-light: #fdf3eb;

  /* Success / trust */
  --color-success: #2d7d5f;

  /* Text — warm charcoal, not harsh black */
  --color-text: #2d2318;
  --color-text-light: #6b5e4f;
  --color-text-lighter: #7e7062;  /* WCAG AA: ≥4.5:1 on --color-bg */

  /* Backgrounds — paper-inspired warmth */
  --color-bg: #fcfaf5;
  --color-bg-alt: #f5f1e8;
  --color-bg-warm: #faf6ee;
  --color-bg-dark: #1a1510;

  /* Borders */
  --color-border: #e5ded2;
  --color-border-light: #f0ebe0;

  /* Typography */
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, sans-serif;

  /* Layout */
  --max-width: 1140px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;

  /* Shadows — organic, layered depth */
  --shadow-xs: 0 1px 2px rgba(26,21,16,0.03);
  --shadow-sm: 0 2px 6px rgba(26,21,16,0.04), 0 1px 2px rgba(26,21,16,0.03);
  --shadow: 0 4px 14px rgba(26,21,16,0.05), 0 1px 4px rgba(26,21,16,0.04);
  --shadow-md: 0 8px 24px rgba(26,21,16,0.07), 0 2px 8px rgba(26,21,16,0.04);
  --shadow-lg: 0 16px 48px rgba(26,21,16,0.09), 0 4px 12px rgba(26,21,16,0.04);
  --shadow-xl: 0 24px 64px rgba(26,21,16,0.11), 0 6px 16px rgba(26,21,16,0.05);
  --shadow-colored: 0 8px 28px rgba(26,92,62,0.1);
  --shadow-accent: 0 6px 20px rgba(193,102,46,0.2);
}

/* ============================================================
   Reset & Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-feature-settings:"palt" 1;
  -webkit-tap-highlight-color:transparent;
  /* Subtle paper texture via CSS-only noise */
  background-image:
    repeating-conic-gradient(var(--color-bg) 0 0.0001%, transparent 0.0002%, transparent 0.0004%);
  background-size: 200px 200px;
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-primary);text-decoration:none;transition:color 0.25s}
a:hover{color:var(--color-primary-dark)}
a:focus-visible,button:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:2px}
ul,ol{padding-left:1.5em}
[role="button"],button,a,.card,.article-card,.route-card,.filter-tag{cursor:pointer}
.container{max-width:var(--max-width);margin:0 auto;padding:0 28px}

/* Headings — balanced text wrapping */
h1,h2,h3,h4{text-wrap:balance}

/* Screen-reader only utility */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============================================================
   Scroll Animations
   ============================================================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
.reveal{animation:fadeUp 0.75s cubic-bezier(0.22,1,0.36,1) both}
.reveal-d1{animation-delay:0.05s}.reveal-d2{animation-delay:0.15s}
.reveal-d3{animation-delay:0.25s}.reveal-d4{animation-delay:0.35s}
.reveal-d5{animation-delay:0.45s}.reveal-d6{animation-delay:0.55s}
.reveal-d8{animation-delay:0.7s}.reveal-d10{animation-delay:0.9s}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  background:rgba(252,250,245,0.92);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid transparent;
  position:sticky;top:0;z-index:100;
  transition:all 0.3s cubic-bezier(0.22,1,0.36,1);
}
.site-header.scrolled{
  border-bottom-color:var(--color-border-light);
  box-shadow:var(--shadow-xs);
}
.header-inner{
  max-width:var(--max-width);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:68px;padding:0 28px;
}
.site-logo{
  font-family:var(--font-display);font-size:1.15rem;font-weight:700;
  color:var(--color-text);
  display:flex;align-items:center;gap:10px;
  letter-spacing:-0.01em;
  transition:color 0.25s;
}
.site-logo:hover{color:var(--color-primary);}
.site-logo .logo-icon{width:34px;height:34px;flex-shrink:0}
.site-nav{display:flex;gap:30px;align-items:center}
.site-nav a{
  color:var(--color-text-light);font-size:0.925rem;font-weight:500;
  position:relative;padding:4px 0;
  transition:color 0.25s;
}
.site-nav a::after{
  content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;
  background:var(--color-primary);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.site-nav a:hover{color:var(--color-primary)}
.site-nav a:hover::after{transform:scaleX(1)}
.nav-cta{
  background:var(--color-accent)!important;color:#fff!important;
  padding:9px 22px!important;border-radius:6px!important;
  font-weight:600!important;font-size:0.9rem!important;
  transition:all 0.25s!important;
  box-shadow:var(--shadow-accent);
}
.nav-cta:hover{background:var(--color-accent-dark)!important;box-shadow:0 8px 24px rgba(193,102,46,0.3)!important;transform:translateY(-1px);color:#fff!important}
.nav-cta:active{transform:translateY(0)!important;box-shadow:0 2px 8px rgba(193,102,46,0.2)!important}
.nav-cta::after{display:none!important}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--color-text);padding:10px}

/* ============================================================
   Hero — Editorial Cover Style
   ============================================================ */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(168deg, #0f2418 0%, #1a3524 30%, #1a5c3e 65%, #1f6b48 100%);
  color:#fff;padding:100px 0 140px;
}
/* Dark overlay for readability + glow accents */
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(15,36,24,0.55) 0%, rgba(15,36,24,0.2) 100%),
    radial-gradient(ellipse 55% 45% at 75% 30%, rgba(193,102,46,0.1) 0%, transparent 55%),
    radial-gradient(ellipse 50% 55% at 25% 70%, rgba(45,125,95,0.08) 0%, transparent 50%);
}
/* Soft dissolve transition — hero fades into next section */
.hero::after{
  content:'';position:absolute;bottom:0;left:0;right:0;z-index:2;pointer-events:none;
  height:140px;  /* matches hero padding-bottom */
  background:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(252,250,245,0.15) 30%,
    rgba(252,250,245,0.5) 60%,
    rgba(252,250,245,0.85) 85%,
    #fcfaf5 100%
  );
}
/* Terrain contour accent line — sits on top of the dissolve */
.hero-terrain{
  position:absolute;bottom:0;left:0;right:0;z-index:3;pointer-events:none;
  height:120px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 120V92l95-18 85 28 110-24 100 18 145-30 95 22 130-16 110 14 165-26 100 16 100-12 105 20v31z' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.5'/%3E%3Cpath d='M0 120V100l70 10 80-14 105 20 130-22 95 12 160-18 90 15 145-10 95 18 175-22 90 8v26z' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}
.hero .container{position:relative;z-index:1}
/* Editorial decorative line above heading */
.hero-heading-group{max-width:580px}
.hero-decoration{
  width:48px;height:3px;
  background:linear-gradient(90deg,var(--color-accent),rgba(193,102,46,0.3));
  border-radius:2px;margin-bottom:28px;
}
.hero h1{
  font-family:var(--font-display);font-size:3.4rem;font-weight:900;
  line-height:1.1;letter-spacing:-0.03em;margin-bottom:22px;
  text-shadow:0 2px 24px rgba(0,0,0,0.18);
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(135deg, #f5a87b, #e8874b);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero .hero-subtitle{
  font-size:1.12rem;opacity:0.82;max-width:480px;margin-bottom:16px;
  font-weight:400;line-height:1.7;
  color:rgba(255,255,255,0.88);
}
.hero .hero-subline{
  font-size:0.9rem;opacity:0.6;margin-bottom:36px;
  font-weight:400;color:rgba(255,255,255,0.7);
}
.hero-stats{
  display:flex;gap:40px;flex-wrap:wrap;margin-bottom:40px;
}
.hero-stat{
  text-align:left;
  padding-right:32px;
  border-right:1px solid rgba(255,255,255,0.15);
}
.hero-stat:last-child{border-right:none}
.hero-stat-num{
  font-family:var(--font-display);font-size:2.5rem;font-weight:900;
  line-height:1;margin-bottom:4px;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,0.7));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-stat-label{font-size:0.85rem;opacity:0.65;font-weight:500}
.hero-cta{display:inline-flex;gap:14px;flex-wrap:wrap}

/* ============================================================
   Buttons — Refined
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 32px;border-radius:6px;font-weight:600;
  font-size:1rem;cursor:pointer;border:none;
  transition:all 0.3s cubic-bezier(0.22,1,0.36,1);
  font-family:var(--font-body);letter-spacing:0;
  text-align:center;
}
.btn-primary{
  background:var(--color-accent);color:#fff;
  box-shadow:var(--shadow-accent);
}
.btn-primary:hover{
  background:var(--color-accent-dark);color:#fff;
  box-shadow:0 10px 28px rgba(193,102,46,0.35);
  transform:translateY(-2px);
}
.btn-primary:active{transform:translateY(0);box-shadow:0 4px 12px rgba(193,102,46,0.25)}
.btn:disabled{opacity:0.45;pointer-events:none;cursor:not-allowed;filter:grayscale(0.3)}
.btn-outline{
  background:rgba(255,255,255,0.06);color:#fff;
  border:1.5px solid rgba(255,255,255,0.25);
  backdrop-filter:blur(4px);
}
.btn-outline:hover{
  background:rgba(255,255,255,0.14);color:#fff;
  border-color:rgba(255,255,255,0.5);
}
.btn-outline:active{background:rgba(255,255,255,0.08);transform:scale(0.98)}
.btn-sm{padding:9px 22px;font-size:0.9rem}
.btn-lg{padding:15px 44px;font-size:1.08rem}
.btn-ghost{
  background:transparent;color:var(--color-primary);
  padding:8px 16px;font-weight:500;font-size:0.9rem;
}
.btn-ghost:hover{background:var(--color-primary-light)}
.btn-ghost:active{transform:scale(0.97)}

/* ============================================================
   Sections — Editorial Layout
   ============================================================ */
.section{padding:88px 0}
.section-alt{
  background:var(--color-bg-alt);
  border-top:1px solid var(--color-border-light);
  border-bottom:1px solid var(--color-border-light);
  /* Subtle grain overlay */
  background-image:
    repeating-conic-gradient(var(--color-bg-alt) 0 0.0001%, transparent 0.0002%, transparent 0.0004%);
  background-size:200px 200px;
}
.section-warm{background:var(--color-bg-warm)}
.section-header{margin-bottom:52px}
.section-header .section-label{
  display:inline-flex;align-items:center;gap:12px;
  font-size:0.82rem;font-weight:600;color:var(--color-accent);
  margin-bottom:16px;letter-spacing:0.06em;
}
.section-header .section-label::before{
  content:'';display:inline-block;width:24px;height:1.5px;
  background:var(--color-accent);border-radius:1px;
}
.section-header h2{
  font-family:var(--font-display);font-size:2.1rem;font-weight:700;
  margin-bottom:14px;letter-spacing:-0.02em;color:var(--color-text);
  line-height:1.3;
}
.section-header p{
  color:var(--color-text-light);
  max-width:520px;font-size:1.02rem;line-height:1.7;
}
.section-header.text-left p{margin-left:0}

/* Section Curve (between hero and first section) */
.section-curve-top{position:relative;padding-top:60px}
.section-curve-top::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:60px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 60' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60V18q180 28 360 20 180-8 360-16t360-8 360-4V0H0z' fill='%23fcfaf5'/%3E%3C/svg%3E") top/100% 100% no-repeat;
}

/* ============================================================
   Car Cards — 首页车型展示
   ============================================================ */
.car-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.car-card{
  display:block;color:inherit;text-decoration:none;
  background:var(--color-bg);
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--color-border-light);
  box-shadow:var(--shadow-sm);
  transition:all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.car-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.car-card-img{
  height:140px;overflow:hidden;
  background:linear-gradient(155deg,#e8efe6,#d2e4d4);
}
.car-card-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.car-card:hover .car-card-img img{transform:scale(1.06)}
.car-card-body{padding:16px 18px 18px}
.car-card-body h3{font-family:var(--font-display);font-size:1.02rem;font-weight:600;margin-bottom:5px}
.car-card-body p{color:var(--color-text-light);font-size:0.86rem;line-height:1.6}
.car-card-price{
  display:block;margin-top:10px;
  font-family:var(--font-display);font-size:1.05rem;font-weight:700;
  color:var(--color-accent);
}
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}
.card{
  background:var(--color-bg);
  border-radius:var(--radius-lg);
  padding:32px 28px 28px;
  border:1px solid var(--color-border-light);
  box-shadow:var(--shadow-sm);
  transition:all 0.4s cubic-bezier(0.22,1,0.36,1);
  position:relative;overflow:hidden;
  text-decoration:none;color:inherit;display:block;
}
/* Top accent bar — only shows on hover */
.card::before{
  content:'';position:absolute;top:0;left:20px;right:20px;height:3px;
  background:linear-gradient(90deg,var(--color-primary),var(--color-accent));
  border-radius:0 0 3px 3px;
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
/* Subtle corner ornament */
.card::after{
  content:'';position:absolute;top:16px;right:16px;
  width:32px;height:32px;
  border-top:1.5px solid var(--color-border);
  border-right:1.5px solid var(--color-border);
  border-radius:0 var(--radius-sm) 0 0;
  opacity:0;
  transition:opacity 0.35s;
}
.card:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-4px);
  border-color:var(--color-border);
}
.card:hover::before{transform:scaleX(1)}
.card:hover::after{opacity:1}
.card:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;border-radius:var(--radius-lg);
}
.card-icon{
  width:50px;height:50px;border-radius:12px;
  margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;font-weight:700;
  transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);
  font-family:var(--font-display);
}
.card:hover .card-icon{transform:scale(1.08)}
.card-icon.c1{background:#e0efe5;color:#1a5c3e}
.card-icon.c2{background:#fef0e6;color:#c1662e}
.card-icon.c3{background:#d9f0e8;color:#2d7d5f}
.card-icon.c4{background:#fce9e0;color:#b54a1f}
.card h3{
  font-size:1.08rem;margin-bottom:8px;
  font-weight:600;font-family:var(--font-display);
  letter-spacing:-0.01em;
}
.card p{color:var(--color-text-light);font-size:0.92rem;line-height:1.7}

/* ============================================================
   Trust / Standards — Why Us
   ============================================================ */
.trust-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:18px;
}
.trust-item{
  text-align:left;padding:32px 28px 28px;
  background:var(--color-bg);border-radius:var(--radius-lg);
  border:1px solid var(--color-border-light);
  box-shadow:var(--shadow-sm);
  transition:all 0.4s cubic-bezier(0.22,1,0.36,1);
  position:relative;overflow:hidden;
}
/* Left accent bar */
.trust-item::before{
  content:'';position:absolute;left:0;top:24px;bottom:24px;
  width:3px;border-radius:0 3px 3px 0;
  background:var(--color-primary);
  opacity:0;transition:opacity 0.35s;
}
.trust-item:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.trust-item:hover::before{opacity:1}
.trust-item:hover .trust-number{transform:scale(1.06);color:var(--color-primary)}
.trust-number{
  font-family:var(--font-display);font-size:2.5rem;font-weight:900;
  color:var(--color-border);
  margin-bottom:6px;letter-spacing:-0.03em;
  line-height:1;transition:all 0.35s;
}
.trust-item h3{
  font-size:1.05rem;font-weight:600;margin-bottom:6px;
  font-family:var(--font-display);
}
.trust-label{color:var(--color-text-light);font-size:0.88rem;line-height:1.65}

/* ============================================================
   Route Cards — Rich Presentation
   ============================================================ */
.route-card{
  display:flex;background:var(--color-bg);
  border-radius:var(--radius-lg);
  overflow:hidden;border:1px solid var(--color-border-light);
  box-shadow:var(--shadow-sm);
  transition:all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.route-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.route-card-img{
  width:280px;min-height:220px;flex-shrink:0;
  background:linear-gradient(155deg, #e8efe6 0%, #d2e4d4 50%, #c5dcc8 100%);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1.5rem;color:var(--color-primary);
  font-weight:700;position:relative;overflow:hidden;
}
.route-card-img::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 70%, rgba(193,102,46,0.06) 0%, transparent 50%),
    radial-gradient(circle at 70% 20%, rgba(26,92,62,0.04) 0%, transparent 50%);
}
.route-card-body{padding:28px 32px;flex:1;display:flex;flex-direction:column;justify-content:center}
.route-card-body h3{font-family:var(--font-display);font-size:1.15rem;margin-bottom:8px;font-weight:600}
.route-card-body h3 a{color:var(--color-text);transition:color 0.25s}
.route-card-body h3 a:hover{color:var(--color-primary)}
.route-meta{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:16px}
.route-meta span{
  font-size:0.85rem;color:var(--color-text-light);
  display:flex;align-items:center;gap:5px;
}
.route-price{
  font-family:var(--font-display);font-size:1.4rem;font-weight:700;
  color:var(--color-accent);margin-top:6px;
}

/* ============================================================
   Article Cards — Editorial Feed
   ============================================================ */
.article-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:22px;
}
.article-card{
  display:block;color:inherit;text-decoration:none;
  background:var(--color-bg);border-radius:var(--radius-lg);
  overflow:hidden;border:1px solid var(--color-border-light);
  box-shadow:var(--shadow-sm);
  transition:all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.article-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.article-card-img{
  height:180px;
  background:linear-gradient(150deg, #e5ede6 0%, #d4e3d6 40%, #c8dcca 100%);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1.05rem;color:var(--color-primary);
  font-weight:700;letter-spacing:0.05em;
  position:relative;overflow:hidden;
}
/* Decorative circle */
.article-card-img::after{
  content:'';position:absolute;bottom:-35px;right:-35px;
  width:120px;height:120px;
  background:rgba(193,102,46,0.05);border-radius:50%;
}
.article-card-body{padding:24px 26px 22px}
.article-card-body h3{
  font-family:var(--font-display);font-size:1.05rem;
  margin-bottom:8px;line-height:1.5;font-weight:600;
  color:var(--color-text);
}
.article-card-body p{color:var(--color-text-light);font-size:0.9rem;line-height:1.65}
.article-card-meta{
  font-size:0.8rem;color:var(--color-text-lighter);
  margin-top:16px;padding-top:14px;
  border-top:1px solid var(--color-border-light);
  display:flex;align-items:center;gap:6px;
}

/* ============================================================
   Reviews — Social Proof
   ============================================================ */
.reviews{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:20px;
}
.review-card{
  background:var(--color-bg);border-radius:var(--radius-lg);
  padding:30px 28px;border:1px solid var(--color-border-light);
  box-shadow:var(--shadow-sm);
  transition:all 0.35s cubic-bezier(0.22,1,0.36,1);
  position:relative;
}
.review-card::before{
  content:'\201C';position:absolute;top:6px;right:22px;
  font-size:4rem;line-height:1;
  color:var(--color-primary-light);
  font-family:var(--font-display);pointer-events:none;
}
.review-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.review-stars{color:var(--color-accent);font-size:1rem;margin-bottom:10px;letter-spacing:3px}
.review-text{font-size:.95rem;color:var(--color-text);margin-bottom:18px;line-height:1.75;position:relative;z-index:1}
.review-author{display:flex;align-items:center;gap:12px}
.review-avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#e0efe5,#d4e9dd);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--color-primary);font-size:1rem;
  font-family:var(--font-display);
}
.review-name{font-weight:600;font-size:.9rem}
.review-route{font-size:.8rem;color:var(--color-text-light)}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{max-width:780px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--color-border-light);padding:28px 0}
.faq-item:first-child{padding-top:0}
.faq-item h3{
  font-family:var(--font-display);font-size:1.05rem;font-weight:600;
  margin-bottom:10px;display:flex;justify-content:space-between;
  align-items:center;color:var(--color-text);
}
.faq-item p{color:var(--color-text-light);font-size:.95rem;line-height:1.75}

/* ============================================================
   CTA Section — Warm & Inviting
   ============================================================ */
.cta-section{
  background:linear-gradient(168deg, #0f2418 0%, #1a3524 40%, #1a5c3e 100%);
  color:#fff;text-align:center;padding:88px 0;
  position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 70% at 50% 100%, rgba(193,102,46,0.1) 0%, transparent 60%);
}
.cta-section .container{position:relative;z-index:1}
.cta-section h2{font-family:var(--font-display);font-size:2rem;font-weight:700;margin-bottom:14px}
.cta-section p{opacity:0.8;margin-bottom:8px;max-width:480px;margin-left:auto;margin-right:auto}
.cta-section .phone-big{
  font-family:var(--font-display);font-size:1.8rem;font-weight:700;
  margin-bottom:24px;letter-spacing:0.02em;
}

/* ============================================================
   Footer — Clean & Grounded
   ============================================================ */
.site-footer{
  background:var(--color-bg-dark);color:#c4b8a8;
  padding:60px 0 36px;position:relative;
}
.site-footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--color-primary),var(--color-accent));
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:36px;margin-bottom:40px;
}
.footer-col h4{font-family:var(--font-display);color:#e8ddd0;margin-bottom:18px;font-size:0.95rem;font-weight:600}
.footer-col a{display:block;color:#a09582;font-size:0.9rem;margin-bottom:11px;transition:color 0.25s}
.footer-col a:hover{color:#e8ddd0}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.06);
  padding-top:28px;text-align:center;
  font-size:0.85rem;color:#7a6e5e;
}

/* ============================================================
   Breadcrumb & Page Hero
   ============================================================ */
.breadcrumb{
  padding:18px 28px;font-size:0.88rem;
  color:var(--color-text-light);
  max-width:var(--max-width);margin:0 auto;
}
.breadcrumb a{color:var(--color-text-light)}
.breadcrumb a:hover{color:var(--color-primary)}
.breadcrumb span{color:var(--color-text)}
.page-hero{
  background:linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
  padding:56px 0;text-align:center;
}
.page-hero h1{
  font-family:var(--font-display);font-size:2rem;
  font-weight:700;letter-spacing:-0.02em;
}

/* ============================================================
   Article Page
   ============================================================ */
.article{max-width:800px;margin:0 auto;padding:48px 24px 80px}
.article h1{
  font-family:var(--font-display);font-size:2.25rem;font-weight:900;
  margin-bottom:14px;line-height:1.3;letter-spacing:-0.02em;
}
.article-meta{color:var(--color-text-light);font-size:.9rem;margin-bottom:36px;display:flex;gap:20px;flex-wrap:wrap}
.article-meta span{display:flex;align-items:center;gap:6px}
.article h2{
  font-family:var(--font-display);font-size:1.5rem;font-weight:700;
  margin:48px 0 18px;padding-bottom:10px;
  border-bottom:2px solid var(--color-border-light);letter-spacing:-0.01em;
}
.article h3{font-size:1.15rem;font-weight:600;margin:32px 0 14px;color:var(--color-text);font-family:var(--font-display)}
.article p{margin-bottom:18px;font-size:1.05rem;line-height:1.85}
.article blockquote{
  border-left:4px solid var(--color-primary);padding:18px 24px;margin:28px 0;
  background:var(--color-primary-light);border-radius:0 var(--radius) var(--radius) 0;
  color:var(--color-text-light);font-size:.95rem;
}
.article table{width:100%;border-collapse:collapse;margin:28px 0;font-size:.95rem;border-radius:var(--radius);overflow:hidden;border:1px solid var(--color-border)}
.article table th,.article table td{border-bottom:1px solid var(--color-border-light);padding:14px 18px;text-align:left}
.article table th{background:var(--color-bg-alt);font-weight:600;font-size:.9rem;color:var(--color-text-light)}
.article table tr:last-child td{border-bottom:none}
.article table tr:nth-child(even) td{background:rgba(245,241,232,0.7)}
.article ul,.article ol{margin-bottom:18px;line-height:1.9}
.article li{margin-bottom:8px}
.article strong{color:var(--color-primary-dark);font-weight:600}
.article-cta{
  background:linear-gradient(135deg, #e6f0ea, #edf5f0);
  border:1.5px solid var(--color-primary);border-radius:var(--radius-lg);
  padding:36px;text-align:center;margin:44px 0;box-shadow:var(--shadow);
}
.article-cta h3{margin-top:0;font-size:1.2rem;font-family:var(--font-display)}

/* ============================================================
   Contact Page
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact-info p{margin-bottom:14px;display:flex;align-items:flex-start;gap:10px}
.contact-form input,.contact-form textarea{
  width:100%;padding:14px 18px;border:1.5px solid var(--color-border);
  border-radius:var(--radius-sm);font-size:1rem;font-family:inherit;
  margin-bottom:18px;transition:all 0.25s;background:var(--color-bg);
}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 4px rgba(26,92,62,0.08);
}
.contact-form textarea{min-height:130px;resize:vertical}

/* ============================================================
   Filter Tags
   ============================================================ */
.filter-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;justify-content:center}
.filter-tag{
  padding:8px 18px;border-radius:50px;font-size:.9rem;
  border:1px solid var(--color-border);cursor:pointer;
  transition:all 0.25s;background:var(--color-bg);
}
.filter-tag:hover,.filter-tag.active{
  background:var(--color-primary);color:#fff;
  border-color:var(--color-primary);
}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1024px){
  .hero h1{font-size:2.6rem}
  .hero-stats{gap:24px}
  .hero-stat{padding-right:24px}
}

@media(max-width:768px){
  /* Safe area insets */
  .container,.header-inner{padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
  .site-footer{padding-bottom:max(36px,env(safe-area-inset-bottom))}

  /* Header */
  .site-nav{display:none}
  .site-nav.open{
    display:flex;flex-direction:column;
    position:absolute;top:68px;left:0;right:0;
    background:var(--color-bg);border-bottom:1px solid var(--color-border);
    padding:20px 28px;gap:16px;box-shadow:var(--shadow-lg);
  }
  .menu-toggle{display:block}

  /* Hero */
  .hero{padding:72px 0 100px}
  .hero h1{font-size:2.1rem}
  .hero .hero-subtitle{font-size:1rem}
  .hero .hero-subline{font-size:0.85rem}
  .hero-stats{gap:16px}
  .hero-stat{padding-right:16px}
  .hero-stat-num{font-size:1.8rem}
  .hero-decoration{width:36px;margin-bottom:20px}

  /* Sections */
  .section{padding:60px 0}
  .section-header h2{font-size:1.6rem}
  .section-header{margin-bottom:36px}

  /* Cards */
  .cards,.trust-grid,.reviews,.article-cards{grid-template-columns:1fr}
  .car-grid{grid-template-columns:repeat(2,1fr)}
  .card{padding:26px 22px 22px}
  .car-grid{grid-template-columns:repeat(2,1fr)}
  .route-card{flex-direction:column}
  .route-card-img{width:100%;min-height:150px}

  /* Contact */
  .contact-grid{grid-template-columns:1fr}

  /* Article */
  .article h1{font-size:1.6rem}
  .article{padding:32px 20px 56px}

  .btn-lg{padding:13px 32px;font-size:1rem}
}

@media(max-width:480px){
  .hero{padding:56px 0 80px}
  .hero h1{font-size:1.7rem}
  .hero-stats{flex-direction:column;gap:10px}
  .hero-stat{border-right:none;padding-right:0;text-align:center}
  .hero-stat-num{font-size:1.6rem}
  .hero .hero-subtitle{font-size:0.95rem}
  .hero-decoration{margin:0 auto 20px}
  .hero-cta{flex-direction:column;width:100%}
  .hero-cta .btn{width:100%}

  .btn{padding:12px 24px;font-size:0.95rem}
  .section-header h2{font-size:1.4rem}
  .section-header p{font-size:0.92rem}
  .page-hero h1{font-size:1.5rem}
  .container{padding:0 18px}

  .cta-section h2{font-size:1.5rem}
  .cta-section .phone-big{font-size:1.4rem}

  .trust-number{font-size:2rem}
  .car-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
}