/* ===========================================================
   南宁海关 · 党建品牌二维码展示系统
   样式表 v1.0  （纯静态，无外部依赖）
   =========================================================== */

:root{
  --red-900:#5C060D;
  --red-800:#8C0E19;
  --red-700:#A8121F;
  --red-600:#C01722;
  --gold-600:#B98C36;
  --gold-500:#D8A94A;
  --gold-400:#E9C77E;
  --gold-200:#F6E3BD;
  --gold-100:#FBF2DF;
  --paper:#FAF6EF;
  --paper-2:#FFFDF9;
  --ink:#2A1713;
  --ink-2:#5B443C;
  --ink-3:#8B756C;
  --shadow-s:0 2px 10px rgba(92,6,13,.06);
  --shadow-m:0 10px 30px rgba(92,6,13,.10);
  --shadow-l:0 24px 60px rgba(92,6,13,.16);
  --r-l:20px;
  --r-m:14px;
  --maxw:720px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}

/* ---------- 背景层 ---------- */
#petals{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:.55;
}
.page-grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 12% 8%, rgba(216,169,74,.10), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(192,23,34,.07), transparent 45%);
}

/* ---------- 顶部返回条 ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;gap:10px;
  height:52px;padding:0 16px;
  padding-top:env(safe-area-inset-top);
  background:rgba(92,6,13,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(216,169,74,.28);
  transform:translateY(-100%);
  transition:transform .38s cubic-bezier(.22,.8,.3,1);
}
.topbar.is-on{transform:translateY(0);}
.topbar .back{
  display:inline-flex;align-items:center;gap:4px;
  font-size:14px;color:var(--gold-200);
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(216,169,74,.35);
  transition:background .25s,border-color .25s;
}
.topbar .back:active{background:rgba(216,169,74,.16);}
.topbar .tb-name{
  font-size:14px;letter-spacing:.16em;color:#fff;opacity:.92;
}

/* ---------- 首页 Hero ---------- */
.hero{
  position:relative;z-index:1;
  min-height:100svh;
  padding:calc(64px + env(safe-area-inset-top)) 24px 72px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  background:
    radial-gradient(120% 80% at 50% 18%, #D21C27 0%, #A8121F 38%, #7C0A14 68%, #56050C 100%);
  overflow:hidden;
  isolation:isolate;
  box-shadow:inset 0 0 0 1px rgba(216,169,74,.16), inset 0 0 140px rgba(0,0,0,.26);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 2px, transparent 2px 22px);
  opacity:.7;
}
/* 旋转光晕 */
.hero-rays{
  position:absolute;left:50%;top:24%;z-index:-1;
  width:160vmax;height:160vmax;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,
    rgba(255,225,170,.16) 0deg, transparent 12deg,
    rgba(255,225,170,.10) 24deg, transparent 40deg,
    rgba(255,225,170,.14) 60deg, transparent 76deg,
    rgba(255,225,170,.09) 100deg, transparent 120deg,
    rgba(255,225,170,.15) 150deg, transparent 170deg,
    rgba(255,225,170,.10) 200deg, transparent 220deg,
    rgba(255,225,170,.13) 250deg, transparent 270deg,
    rgba(255,225,170,.08) 300deg, transparent 330deg,
    rgba(255,225,170,.14) 360deg);
  -webkit-mask-image:radial-gradient(circle, #000 0%, rgba(0,0,0,.75) 40%, transparent 68%);
  mask-image:radial-gradient(circle, #000 0%, rgba(0,0,0,.75) 40%, transparent 68%);
  animation:spin 90s linear infinite;
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg);}}

.kicker{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;max-width:92vw;
  opacity:0;transform:translateY(10px);
  animation:fadeUp .9s .1s cubic-bezier(.22,.8,.3,1) forwards;
}
.kicker .k-txt{
  /* 字号随视口宽度自适应：保证最长的一条（16 字 + 2 分隔）在 320px 屏上仍为一行。
     19.5 ≈ 最长文案的"字数折算宽度"，110px 为左右装饰线与间隙的预留。 */
  font-size:clamp(9.5px, calc((100vw - 110px) / 19.5), 13px);
  letter-spacing:.14em;line-height:1.7;
  color:var(--gold-200);text-align:center;
  white-space:nowrap;       /* 硬保证：永不换行 */
  flex:0 1 auto;
  min-width:0;
}
/* 装饰线可收缩，窄屏时给文字让位 */
.kicker::before,.kicker::after{
  content:"";flex:0 1 18px;min-width:4px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-500));
}
.kicker::after{background:linear-gradient(270deg,transparent,var(--gold-500));}
@media (max-width:360px){
  .kicker .k-txt{letter-spacing:.08em;}
}

.logo-wrap{
  position:relative;margin:26px 0 22px;
  width:132px;height:132px;border-radius:50%;
  background:#fff;
  display:grid;place-items:center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.5),
    0 0 0 8px rgba(216,169,74,.18),
    0 18px 42px rgba(0,0,0,.34);
  opacity:0;transform:scale(.86);
  animation:popIn .85s .18s cubic-bezier(.22,1.1,.36,1) forwards;
}
.logo-wrap img{
  width:100%;height:100%;object-fit:contain;
  border-radius:50%;
}
.logo-wrap::before{
  content:"";position:absolute;inset:-16px;border-radius:50%;
  border:1px dashed rgba(216,169,74,.55);
  animation:spin 26s linear infinite;
}
.logo-wrap::after{
  content:"";position:absolute;inset:-16px;border-radius:50%;
  border:1px solid rgba(216,169,74,.22);
  animation:breathe 4.2s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{transform:scale(1);opacity:.5}
  50%{transform:scale(1.06);opacity:.9}
}
@keyframes popIn{to{opacity:1;transform:scale(1);}}

.brand-name{
  margin:0;
  font-family:"Songti SC","STSong","Source Han Serif SC","Noto Serif SC",serif;
  font-size:clamp(38px,11.5vw,58px);
  font-weight:800;
  letter-spacing:.10em;
  line-height:1.2;
  background:linear-gradient(180deg,#FFF6E2 0%,#F3D79C 42%,#D8A94A 72%,#F0DDB0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.35));
  opacity:0;transform:translateY(18px);
  animation:fadeUp .9s .3s cubic-bezier(.22,.8,.3,1) forwards;
}
.rule{
  display:flex;align-items:center;gap:10px;margin:20px 0 16px;
  opacity:0;animation:fadeUp .9s .42s cubic-bezier(.22,.8,.3,1) forwards;
}
.rule i{
  display:block;width:clamp(48px,16vw,76px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(216,169,74,.9));
}
.rule i:last-child{background:linear-gradient(270deg,transparent,rgba(216,169,74,.9));}
.rule b{
  width:7px;height:7px;transform:rotate(45deg);
  background:var(--gold-400);box-shadow:0 0 12px rgba(233,199,126,.9);
}
.org{
  margin:0;font-size:15px;letter-spacing:.14em;color:rgba(255,246,230,.94);
  opacity:0;animation:fadeUp .9s .5s cubic-bezier(.22,.8,.3,1) forwards;
}
.slogan{
  margin:18px auto 0;max-width:560px;
  font-size:13.5px;line-height:1.9;letter-spacing:.06em;
  color:rgba(251,242,223,.78);
  padding:12px 18px;
  border-top:1px solid rgba(216,169,74,.22);
  border-bottom:1px solid rgba(216,169,74,.22);
  opacity:0;animation:fadeUp .9s .6s cubic-bezier(.22,.8,.3,1) forwards;
}
.scroll-hint{
  position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  font-size:11px;letter-spacing:.28em;color:rgba(251,242,223,.6);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;animation:fadeUp 1s 1s ease forwards;
}
.scroll-hint span{
  width:1px;height:26px;
  background:linear-gradient(180deg,rgba(216,169,74,0),rgba(216,169,74,.95));
  animation:drip 1.9s ease-in-out infinite;
}
@keyframes drip{
  0%{transform:scaleY(.2);transform-origin:top;opacity:.2}
  45%{transform:scaleY(1);transform-origin:top;opacity:1}
  55%{transform:scaleY(1);transform-origin:bottom;opacity:1}
  100%{transform:scaleY(.2);transform-origin:bottom;opacity:.2}
}
@keyframes fadeUp{to{opacity:1;transform:translateY(0);}}

/* ---------- 内容区 ---------- */
main{position:relative;z-index:1;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}

.section{padding:56px 0 8px;}
.section:last-of-type{padding-bottom:40px;}

.sec-head{display:flex;align-items:center;gap:12px;margin-bottom:22px;}
.sec-head .idx{
  flex:0 0 auto;font-size:11px;letter-spacing:.2em;color:var(--gold-600);
  padding:3px 9px;border:1px solid rgba(185,140,54,.4);border-radius:999px;
}
.sec-head h2{
  margin:0;font-size:19px;font-weight:700;letter-spacing:.10em;color:var(--ink);
}
.sec-head::after{
  content:"";flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,rgba(185,140,54,.45),rgba(185,140,54,0));
}

.intro-card{
  position:relative;
  background:linear-gradient(180deg,#FFFDF9,#FFF9F0);
  border:1px solid rgba(185,140,54,.22);
  border-radius:var(--r-l);
  padding:24px 22px 22px;
  box-shadow:var(--shadow-s);
  font-size:15px;line-height:1.95;color:var(--ink-2);
  text-align:justify;
}
.intro-card::before{
  content:"";position:absolute;left:22px;top:-1px;width:44px;height:2px;
  background:linear-gradient(90deg,var(--red-600),var(--gold-500));
  border-radius:2px;
}
.intro-card .quote{
  position:absolute;right:16px;top:10px;
  font-family:Georgia,serif;font-size:52px;line-height:1;
  color:rgba(192,23,34,.10);user-select:none;
}

/* 数字 */
.stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
}
.stat{
  background:#fff;border:1px solid rgba(185,140,54,.18);
  border-radius:var(--r-m);padding:18px 14px;text-align:center;
  box-shadow:var(--shadow-s);
  position:relative;overflow:hidden;
}
.stat::after{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:34px;height:2px;background:linear-gradient(90deg,transparent,var(--red-600),transparent);
}
.stat .num{
  font-family:"DIN Alternate","Bahnschrift","PingFang SC",system-ui,sans-serif;
  font-size:27px;font-weight:800;letter-spacing:.02em;
  color:var(--red-700);line-height:1.1;
}
.stat .num em{font-style:normal;font-size:14px;font-weight:600;margin-left:1px;color:var(--red-600);}
.stat .lb{margin-top:7px;font-size:12px;line-height:1.5;color:var(--ink-3);letter-spacing:.02em;}

/* 做法时间线 */
.steps{position:relative;padding-left:0;}
.step{
  position:relative;
  background:#fff;border:1px solid rgba(185,140,54,.18);
  border-radius:var(--r-l);padding:22px 20px 20px 22px;
  box-shadow:var(--shadow-s);
  margin-bottom:14px;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.22,.8,.3,1),box-shadow .3s;
}
.step:active{transform:scale(.988);}
.step::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--red-600),var(--gold-500));
  opacity:.9;
}
.step-no{
  position:absolute;right:16px;top:8px;
  font-family:"DIN Alternate","Bahnschrift","PingFang SC",system-ui,sans-serif;
  font-size:38px;font-weight:800;line-height:1;letter-spacing:.02em;
  color:rgba(192,23,34,.10);user-select:none;
}
.step h3{
  margin:0 0 10px;font-size:16.5px;font-weight:700;letter-spacing:.04em;
  color:var(--red-800);display:flex;align-items:center;gap:8px;
}
.step h3::before{
  content:"";width:6px;height:6px;transform:rotate(45deg);
  background:var(--gold-500);flex:0 0 auto;
}
.step p{margin:0;font-size:14.5px;line-height:1.95;color:var(--ink-2);text-align:justify;}

/* 支部风采：六边形照片 + 图注 */
.photo-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px 14px;
}
.photo{
  margin:0;
  display:flex;flex-direction:column;align-items:center;
}
.photo img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 4px 10px rgba(92,6,13,.20));
  transition:transform .35s cubic-bezier(.22,.8,.3,1);
}
/* 总品牌页：原稿是宽幅横图，单列全宽才看得清 */
.photo-rect{
  grid-column:1 / -1;
  align-items:stretch;
}
.photo-rect img{
  border-radius:8px;
  box-shadow:0 4px 14px rgba(92,6,13,.17);
  border:1px solid rgba(185,140,54,.22);
}
.photo-rect figcaption{
  text-align:center;
  font-size:12.5px;
  margin-top:10px;
}
.photo:active img{transform:scale(.97);}
.photo figcaption{
  margin-top:9px;
  font-size:11.5px;line-height:1.55;
  color:var(--red-800);
  text-align:center;
  letter-spacing:.01em;
  padding:0 2px;
  text-wrap:balance;
}
@media(min-width:640px){
  .photo-grid{grid-template-columns:repeat(3,1fr);gap:22px 18px;}
  .photo figcaption{font-size:12px;}
}

/* 荣誉：一条一行，加大加粗 */
.honor-list{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#FFFDF9,#FFF9F0);
  border:1px solid rgba(185,140,54,.22);
  border-radius:var(--r-l);
  padding:4px 18px;
  box-shadow:var(--shadow-s);
}
.honor{
  display:flex;align-items:center;gap:11px;
  padding:15px 0;
  font-size:16px;font-weight:700;line-height:1.35;
  letter-spacing:.02em;
  color:var(--red-800);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border-bottom:1px dashed rgba(185,140,54,.28);
}
.honor:last-child{border-bottom:none;}
.honor::before{
  content:"";flex:0 0 auto;
  width:7px;height:7px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  box-shadow:0 0 0 3px rgba(216,169,74,.12);
}
/* 超小屏（320px 级）适当收一点，保证仍是一行 */
@media (max-width:340px){
  .honor{font-size:14.5px;letter-spacing:0;}
  .honor-list{padding:4px 14px;}
  .honor{gap:9px;padding:13px 0;}
}

/* 兼容旧样式（不再使用） */
.chips{display:flex;flex-wrap:wrap;gap:9px;}
.chip{
  font-size:13px;line-height:1.6;
  padding:8px 13px;border-radius:999px;
  color:var(--red-800);
  background:linear-gradient(180deg,#fff,#FFF8EC);
  border:1px solid rgba(185,140,54,.32);
}

/* 结束区 */
.end{
  margin:34px 0 0;
  padding:30px 22px calc(34px + env(safe-area-inset-bottom));
  text-align:center;
  background:radial-gradient(120% 100% at 50% 0%, #8C0E19, #5C060D);
  border-radius:24px 24px 0 0;
  color:#fff;
}
.end .mark{font-size:12px;letter-spacing:.3em;color:var(--gold-400);}
.end .line{
  width:40px;height:1px;margin:14px auto 20px;
  background:linear-gradient(90deg,transparent,var(--gold-500),transparent);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:190px;height:48px;padding:0 26px;
  border-radius:999px;
  font-size:15px;letter-spacing:.12em;font-weight:600;
  color:#5C060D;
  background:linear-gradient(180deg,#F7E6C2,#E3BE7E);
  box-shadow:0 10px 24px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.6) inset;
  transition:transform .2s,box-shadow .2s;
}
.btn:active{transform:translateY(1px) scale(.985);box-shadow:0 4px 12px rgba(0,0,0,.3);}
.btn.ghost{
  color:var(--gold-200);background:transparent;
  border:1px solid rgba(216,169,74,.5);box-shadow:none;
}

footer.site{
  position:relative;z-index:1;
  padding:18px 22px calc(22px + env(safe-area-inset-bottom));
  text-align:center;font-size:11.5px;line-height:1.9;letter-spacing:.06em;
  color:rgba(251,242,223,.55);
  background:#56050C;
}

/* ---------- 首页：矩阵 ---------- */
.hero.home{padding-bottom:64px;}
.hero.home .brand-name{font-size:clamp(40px,12.5vw,62px);}
.home-sub{
  margin-top:16px;font-size:13px;letter-spacing:.18em;color:rgba(255,246,230,.72);
}
.matrix{background:var(--paper);position:relative;z-index:1;}
.grid{
  display:grid;grid-template-columns:1fr;gap:14px;
  margin-top:6px;
}
.card{
  position:relative;display:flex;align-items:center;gap:14px;
  padding:16px 16px 16px 14px;
  background:#fff;border:1px solid rgba(185,140,54,.2);
  border-radius:var(--r-l);
  box-shadow:var(--shadow-s);
  overflow:hidden;
  transition:transform .28s cubic-bezier(.22,.8,.3,1),box-shadow .28s,border-color .28s;
}
.card:active{transform:scale(.985);box-shadow:var(--shadow-m);border-color:rgba(192,23,34,.35);}
.card::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-18deg);
  opacity:0;
}
.card.sweep::after{animation:sweep .9s ease;}
@keyframes sweep{
  0%{left:-60%;opacity:.9}
  100%{left:120%;opacity:0}
}
.card .c-logo{
  flex:0 0 auto;width:66px;height:66px;border-radius:50%;
  background:#fff;display:grid;place-items:center;
  border:1px solid rgba(185,140,54,.28);
  box-shadow:0 6px 16px rgba(92,6,13,.08),0 0 0 4px rgba(216,169,74,.08);
  overflow:hidden;
}
.card .c-logo img{width:100%;height:100%;object-fit:contain;border-radius:50%;}
.card .c-main{flex:1 1 auto;min-width:0;}
.card .c-name{
  font-size:17px;font-weight:700;letter-spacing:.06em;color:var(--red-800);
  display:flex;align-items:center;gap:8px;
}
.card .c-name i{
  font-style:normal;font-size:9.5px;font-weight:500;letter-spacing:.1em;
  color:var(--gold-600);border:1px solid rgba(185,140,54,.4);
  padding:1px 6px;border-radius:5px;
}
.card .c-org{
  margin-top:4px;font-size:12px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card .c-arrow{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--red-700);background:rgba(192,23,34,.06);
  font-size:13px;
}
.grid.home-grid{grid-template-columns:1fr;}
@media(min-width:640px){
  .grid{grid-template-columns:1fr 1fr;}
  .stats{grid-template-columns:repeat(4,1fr);}
  .end{border-radius:24px;}
  .wrap{padding:0 28px;}
}

/* ---------- 滚动出现 ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,.8,.3,1),transform .8s cubic-bezier(.22,.8,.3,1);}
.reveal.in{opacity:1;transform:none;}
.stagger>*{opacity:0;transform:translateY(18px);transition:opacity .65s cubic-bezier(.22,.8,.3,1),transform .65s cubic-bezier(.22,.8,.3,1);}
.stagger.in>*{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .reveal,.stagger>*{opacity:1;transform:none;}
  #petals{display:none;}
  .hero-rays{animation:none;}
}