:root {
      --wine: #7b1f2a;
      --wine-dark: #4e1018;
      --rose: #c46a70;
      --gold: #c8a45d;
      --cream: #fff8ef;
      --paper: #fffdf8;
      --ink: #38252a;
      --muted: #7d6966;
      --line: rgba(124, 31, 42, .16);
      --shadow: 0 20px 55px rgba(80, 23, 33, .14);
      --radius: 28px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 6% 6%, rgba(196,106,112,.15), transparent 28rem),
        radial-gradient(circle at 94% 2%, rgba(200,164,93,.16), transparent 22rem),
        linear-gradient(180deg, #fff8f2 0%, #fffdf8 38%, #fff4f0 100%);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
      line-height: 1.78;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(123,31,42,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(123,31,42,.035) 1px, transparent 1px);
      background-size: 34px 34px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 82%);
      z-index: -1;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(18px);
      background: rgba(255, 248, 239, .82);
      border-bottom: 1px solid rgba(123,31,42,.10);
    }
    .nav {
      width: min(1120px, calc(100% - 32px));
      margin: auto;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      letter-spacing: .16em;
      color: var(--wine-dark);
    }
    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      color: #fff;
      background: radial-gradient(circle at 35% 28%, #d9b66b, var(--wine) 64%, var(--wine-dark));
      box-shadow: 0 12px 28px rgba(123,31,42,.22);
      letter-spacing: 0;
      font-size: 20px;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 18px;
      color: var(--muted);
      font-size: 14px;
      white-space: nowrap;
    }
    .nav-links a:hover { color: var(--wine); }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 20px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--wine), #a93643);
      color: #fff;
      font-weight: 700;
      box-shadow: 0 18px 36px rgba(123,31,42,.24);
      border: 1px solid rgba(255,255,255,.38);
    }
    .btn.secondary {
      background: rgba(255,255,255,.68);
      color: var(--wine);
      border: 1px solid rgba(123,31,42,.18);
      box-shadow: none;
    }

    .hero {
      position: relative;
      width: min(1180px, calc(100% - 32px));
      margin: 28px auto 0;
      min-height: 720px;
      border-radius: 38px;
      overflow: hidden;
      box-shadow: var(--shadow);
      background: #311116;
      isolation: isolate;
    }
    .hero-slider {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .hero-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1.2s ease, transform 7s ease;
      transform: scale(1.03);
      pointer-events: none;
    }
    .hero-slide.active {
      opacity: 1;
      transform: scale(1);
    }
    .hero-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(90deg, rgba(50, 12, 18, .92), rgba(80, 20, 28, .68) 45%, rgba(80,20,28,.28) 75%, rgba(80,20,28,.18)),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
    }
    .hero::after {
      content: "♥";
      position: absolute;
      right: 8%;
      bottom: 8%;
      font-family: Georgia, serif;
      font-size: clamp(150px, 22vw, 330px);
      line-height: 1;
      color: rgba(255,248,239,.10);
      z-index: 1;
      pointer-events: none;
    }
    .hero-inner {
      position: relative;
      z-index: 2;
      max-width: 680px;
      padding: clamp(38px, 7vw, 92px);
      color: #fff8f2;
    }
    .hero-controls {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 26px;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 16px;
      padding: 0 26px 0 26px;
    }
    .hero-dots {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .hero-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: 0;
      padding: 0;
      background: rgba(255,255,255,.38);
      cursor: pointer;
      transition: all .3s ease;
    }
    .hero-dot.active {
      width: 30px;
      background: linear-gradient(90deg, #ffdca6, #fff5df);
    }
    .hero-arrow-group {
      display: flex;
      gap: 10px;
      margin-left: auto;
    }
    .hero-arrow {
      width: 48px;
      height: 48px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.2);
      background: rgba(255,255,255,.10);
      color: #fff8ef;
      font-size: 20px;
      cursor: pointer;
      backdrop-filter: blur(10px);
      transition: transform .25s ease, background .25s ease;
    }
    .hero-arrow:hover {
      transform: translateY(-2px);
      background: rgba(255,255,255,.18);
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 26px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.25);
      color: #ffe6cf;
      font-size: 14px;
      letter-spacing: .12em;
    }
    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 0 8px rgba(200,164,93,.14);
    }
    .hero h1 {
      margin: 0;
      font-family: "Songti SC", "STSong", "SimSun", serif;
      font-size: clamp(42px, 7vw, 86px);
      line-height: 1.04;
      letter-spacing: .04em;
      font-weight: 700;
    }
    .hero h1 span {
      display: block;
      color: #ffdba3;
      font-size: clamp(26px, 4vw, 48px);
      margin-top: 14px;
    }
    .hero p {
      max-width: 610px;
      margin: 28px 0 0;
      color: rgba(255, 248, 242, .86);
      font-size: 18px;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 34px;
    }
    .hero-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 46px;
      max-width: 620px;
    }
    .stat {
      padding: 18px 16px;
      border-radius: 22px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.18);
    }
    .stat strong {
      display: block;
      color: #ffe0a9;
      font-size: 22px;
      line-height: 1.2;
    }
    .stat span {
      color: rgba(255,248,242,.78);
      font-size: 13px;
    }

    main { padding: 72px 0 90px; }
    .section {
      width: min(1120px, calc(100% - 32px));
      margin: 0 auto 82px;
    }
    .section-head {
      text-align: center;
      max-width: 820px;
      margin: 0 auto 34px;
    }
    .kicker {
      display: inline-block;
      margin-bottom: 8px;
      color: var(--gold);
      font-weight: 800;
      letter-spacing: .22em;
      text-transform: uppercase;
      font-size: 13px;
    }
    .section h2 {
      margin: 0;
      font-family: "Songti SC", "STSong", "SimSun", serif;
      font-size: clamp(30px, 4vw, 54px);
      line-height: 1.16;
      color: var(--wine-dark);
      letter-spacing: .03em;
    }
    .section-head p {
      margin: 18px auto 0;
      color: var(--muted);
      font-size: 17px;
    }

    .paper {
      position: relative;
      padding: clamp(26px, 4vw, 46px);
      border-radius: var(--radius);
      background: rgba(255,253,248,.92);
      border: 1px solid rgba(123,31,42,.12);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .paper::before,
    .paper::after {
      content: "";
      position: absolute;
      width: 190px;
      height: 190px;
      border: 1px solid rgba(200,164,93,.26);
      border-radius: 50%;
      pointer-events: none;
    }
    .paper::before { top: -110px; left: -70px; }
    .paper::after { bottom: -120px; right: -80px; }

    .intro-grid {
      display: grid;
      grid-template-columns: 1fr .9fr;
      gap: 28px;
      align-items: center;
    }
    .lead {
      font-size: 20px;
      color: var(--wine-dark);
    }
    .body-copy p { margin: 0 0 16px; }
    .body-copy p:last-child { margin-bottom: 0; }
    .feature-image {
      position: relative;
      border-radius: 28px;
      overflow: hidden;
      min-height: 420px;
      box-shadow: 0 18px 42px rgba(80,23,33,.18);
      background: linear-gradient(135deg, rgba(123,31,42,.10), rgba(200,164,93,.18));
    }
    .feature-image img {
      width: 100%;
      height: 100%;
      min-height: 420px;
      object-fit: cover;
    }
    .ribbon {
      position: absolute;
      left: 20px;
      bottom: 20px;
      right: 20px;
      padding: 16px 18px;
      border-radius: 20px;
      background: rgba(78,16,24,.78);
      color: #fff8ef;
      backdrop-filter: blur(14px);
      border: 1px solid rgba(255,255,255,.20);
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }
    .card {
      min-height: 252px;
      padding: 24px 20px;
      border-radius: 26px;
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(123,31,42,.12);
      box-shadow: 0 12px 35px rgba(80,23,33,.09);
    }
    .card .num {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      color: #fff;
      background: linear-gradient(135deg, var(--wine), #c46a70);
      font-weight: 800;
      margin-bottom: 16px;
    }
    .card h3 {
      margin: 0 0 12px;
      color: var(--wine-dark);
      font-size: 20px;
      line-height: 1.35;
    }
    .card p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.75;
    }

    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 26px;
      align-items: start;
    }
    .highlight-list {
      display: grid;
      gap: 14px;
      margin: 22px 0 0;
      padding: 0;
      list-style: none;
    }
    .highlight-list li {
      display: flex;
      gap: 12px;
      padding: 16px 18px;
      border-radius: 20px;
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(123,31,42,.10);
    }
    .highlight-list li::before {
      content: "♡";
      flex: none;
      color: var(--wine);
      font-weight: 900;
    }

    .mosaic {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: 92px;
      gap: 14px;
    }
    .mosaic figure {
      position: relative;
      margin: 0;
      border-radius: 24px;
      overflow: hidden;
      background: #eee;
      box-shadow: 0 12px 32px rgba(80,23,33,.13);
    }
    .mosaic img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s ease, opacity .6s ease, filter .6s ease;
    }
    .mosaic figure:hover img { transform: scale(1.05); }
    .mosaic figcaption {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 12px;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(78,16,24,.68);
      color: #fff8ef;
      font-size: 13px;
      backdrop-filter: blur(10px);
    }
    .mosaic .wide { grid-column: span 6; grid-row: span 3; }
    .mosaic .tall { grid-column: span 3; grid-row: span 4; }
    .mosaic .medium { grid-column: span 3; grid-row: span 3; }
    .mosaic .large { grid-column: span 6; grid-row: span 4; }
    .mosaic .small { grid-column: span 3; grid-row: span 2; }

    .timeline {
      position: relative;
      display: grid;
      gap: 18px;
      max-width: 880px;
      margin: 0 auto;
    }
    .step {
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 18px;
      align-items: stretch;
    }
    .step-index {
      border-radius: 26px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(123,31,42,.12), rgba(200,164,93,.20));
      color: var(--wine);
      font-weight: 900;
      font-size: 22px;
      border: 1px solid rgba(123,31,42,.12);
    }
    .step-copy {
      padding: 22px 24px;
      border-radius: 26px;
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(123,31,42,.12);
      box-shadow: 0 12px 32px rgba(80,23,33,.08);
    }
    .step-copy h3 {
      margin: 0 0 8px;
      color: var(--wine-dark);
      font-size: 20px;
    }
    .step-copy p { margin: 0; color: var(--muted); }

    .contact {
      position: relative;
      display: grid;
      grid-template-columns: 1fr .72fr;
      gap: 26px;
      align-items: center;
      color: #fff8ef;
      background:
        linear-gradient(135deg, rgba(78,16,24,.94), rgba(123,31,42,.88)),
        url("assets/photo-07.jpg") center / cover no-repeat;
      border-radius: 38px;
      padding: clamp(30px, 5vw, 62px);
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .contact::after {
      content: "";
      position: absolute;
      inset: 16px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 30px;
      pointer-events: none;
    }
    .contact > * { position: relative; z-index: 1; }
    .contact h2 { color: #fff8ef; }
    .contact p { color: rgba(255,248,239,.84); }
    .contact-list {
      display: grid;
      gap: 12px;
      margin-top: 24px;
    }
    .contact-row {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.14);
    }
    .contact-row b { color: #ffe0a9; }
    .wechat-card {
      padding: 24px;
      border-radius: 26px;
      background: rgba(255,253,248,.94);
      color: var(--wine-dark);
      text-align: center;
      box-shadow: 0 22px 48px rgba(0,0,0,.20);
    }
    .qr-placeholder {
      width: min(220px, 100%);
      aspect-ratio: 1;
      margin: 0 auto 18px;
      border-radius: 22px;
      display: grid;
      place-items: center;
      border: 1px dashed rgba(123,31,42,.35);
      background:
        linear-gradient(45deg, rgba(123,31,42,.08) 25%, transparent 25% 50%, rgba(123,31,42,.08) 50% 75%, transparent 75%);
      background-size: 18px 18px;
      font-weight: 800;
      color: rgba(123,31,42,.62);
    }
    .signature {
      margin: 28px 0 0;
      color: #ffe0a9;
      font-family: "Songti SC", "STSong", "SimSun", serif;
      font-size: 24px;
    }

    footer {
      width: min(1120px, calc(100% - 32px));
      margin: 0 auto;
      padding: 12px 0 50px;
      text-align: center;
      color: var(--muted);
      font-size: 14px;
    }

    .float-cta {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 30;
      display: none;
    }

    .lazy {
      opacity: .2;
      filter: blur(12px);
      transform: scale(1.02);
      transition: opacity .6s ease, filter .6s ease, transform .6s ease;
      will-change: opacity, filter, transform;
      background: linear-gradient(135deg, rgba(123,31,42,.10), rgba(200,164,93,.18));
    }
    .lazy.loaded {
      opacity: 1;
      filter: blur(0);
      transform: scale(1);
    }
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .8s ease, transform .8s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 1060px) {
      .cards { grid-template-columns: repeat(2, 1fr); }
      .cards .card:last-child { grid-column: span 2; }
    }
    @media (max-width: 860px) {
      .nav { height: 64px; }
      .nav-links { display: none; }
      .hero {
        min-height: auto;
        border-radius: 28px;
      }
      .hero-overlay {
        background:
          linear-gradient(180deg, rgba(50, 12, 18, .88), rgba(80, 20, 28, .60) 55%, rgba(80,20,28,.28));
      }
      .hero-inner { padding: 44px 28px 120px; }
      .hero-stats { grid-template-columns: 1fr; }
      .hero-controls {
        bottom: 18px;
        padding: 0 18px;
      }
      .intro-grid,
      .split,
      .contact { grid-template-columns: 1fr; }
      .mosaic { grid-auto-rows: 86px; }
      .mosaic .wide,
      .mosaic .large,
      .mosaic .tall,
      .mosaic .medium,
      .mosaic .small { grid-column: span 6; grid-row: span 3; }
      .step { grid-template-columns: 1fr; gap: 10px; }
      .step-index { min-height: 64px; }
      .float-cta { display: block; }
    }
    @media (max-width: 560px) {
      .cards { grid-template-columns: 1fr; }
      .cards .card:last-child { grid-column: auto; }
      .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
      .mosaic .wide,
      .mosaic .large,
      .mosaic .tall,
      .mosaic .medium,
      .mosaic .small { grid-column: span 2; grid-row: span 1; }
      .hero h1 { font-size: 42px; }
      .hero p, .lead { font-size: 16px; }
      .contact-row { flex-direction: column; gap: 4px; }
      .hero-controls {
        gap: 12px;
        align-items: center;
      }
      .hero-arrow {
        width: 42px;
        height: 42px;
      }
    }

/* CMS additions */
.faq-list{display:grid;gap:14px;max-width:920px;margin:0 auto}.faq-item{border-radius:24px;background:rgba(255,255,255,.78);border:1px solid rgba(123,31,42,.12);box-shadow:0 12px 32px rgba(80,23,33,.08);overflow:hidden}.faq-item summary{cursor:pointer;padding:20px 24px;font-weight:800;color:var(--wine-dark);list-style:none}.faq-item summary::-webkit-details-marker{display:none}.faq-answer{padding:0 24px 22px;color:var(--muted)}.faq-answer p:first-child{margin-top:0}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.article-card{overflow:hidden;border-radius:26px;background:rgba(255,255,255,.82);border:1px solid rgba(123,31,42,.12);box-shadow:0 12px 32px rgba(80,23,33,.09)}.article-card img{width:100%;height:190px;object-fit:cover;background:rgba(123,31,42,.08)}.article-card .article-body{padding:20px}.article-card h3{margin:0 0 8px;color:var(--wine-dark);line-height:1.35}.article-card p{margin:0;color:var(--muted);font-size:14px}.article-link{display:inline-flex;margin-top:14px;color:var(--wine);font-weight:800}.inquiry-form{display:grid;gap:12px;margin-top:20px}.inquiry-form input,.inquiry-form textarea{width:100%;border:1px solid rgba(123,31,42,.22);border-radius:16px;padding:12px 14px;background:rgba(255,255,255,.92);font:inherit;color:var(--ink)}.inquiry-form textarea{min-height:96px;resize:vertical}.form-message{margin-top:14px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18)}.article-page{width:min(920px,calc(100% - 32px));margin:40px auto 86px}.article-page .cover{border-radius:30px;overflow:hidden;box-shadow:var(--shadow);margin:26px 0}.article-content{font-size:17px}.article-content img{border-radius:22px;margin:18px auto;box-shadow:0 12px 32px rgba(80,23,33,.10)}.admin-entry{position:fixed;left:14px;bottom:14px;z-index:40;opacity:.18;font-size:12px}.admin-entry:hover{opacity:1}
@media (max-width:860px){.article-grid{grid-template-columns:1fr}.article-card img{height:220px}}