/* HOBI55 — 工坊棕 × 创意黄 · 瀑布流 masonry 工坊版式（.h5- 前缀全站唯一） */

:root{
  --h5-bg:#241A12;
  --h5-bg2:#1B130C;
  --h5-deep:#171009;
  --h5-card:#2E2216;
  --h5-ac:#F4D06F;
  --h5-ac2:#FFE9A8;
  --h5-ink:#F2E8D8;
  --h5-mut:#B9A88F;
  --h5-red:#E2604C;
  --h5-line:rgba(244,208,111,.22);
  --h5-glow:rgba(244,208,111,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1100px 500px at 85% -5%, rgba(244,208,111,.07), transparent 60%),
    radial-gradient(900px 480px at -10% 30%, rgba(244,208,111,.05), transparent 55%),
    var(--h5-bg);
  color:var(--h5-ink);
  font-family:Asap,system-ui,sans-serif;
  font-size:16.5px;
  line-height:1.75;
  padding-bottom:118px; /* 底部悬浮条让位 */
}
h1,h2,h3,h4,.h5-logo-word,.h5-btn,.h5-neontitle{font-family:Fredoka,Asap,sans-serif}
h1{font-size:2.05rem;line-height:1.22;margin:.2em 0 .5em;color:var(--h5-ac2)}
h2{font-size:1.5rem;line-height:1.3;margin:1.6em 0 .6em;color:var(--h5-ac)}
h3{font-size:1.12rem;line-height:1.35;margin:1em 0 .4em;color:var(--h5-ac2)}
p{margin:.65em 0}
a{color:var(--h5-ac);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
ul,ol{padding-left:1.3em}
::selection{background:var(--h5-ac);color:var(--h5-bg)}

/* ============ 头部 ============ */
.h5-head{
  position:sticky;top:0;z-index:60;
  background:rgba(23,16,9,.94);
  border-bottom:1px solid var(--h5-line);
  box-shadow:0 6px 24px rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
}
.h5-headin{
  max-width:1180px;margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;gap:26px;
}
.h5-logo{display:inline-flex;align-items:center;gap:10px}
.h5-logo-reel{
  display:inline-flex;gap:3px;padding:5px 7px;border-radius:8px;
  background:var(--h5-deep);border:1px solid var(--h5-line);
  box-shadow:inset 0 0 12px rgba(244,208,111,.14);
}
.h5-logo-reel i{font-style:normal;font-size:13px;line-height:1}
.h5-logo-word{font-size:1.32rem;font-weight:600;color:var(--h5-ac2);letter-spacing:.04em}
.h5-nav{display:flex;gap:20px;margin-left:auto}
.h5-nav a{color:var(--h5-ink);font-weight:500;padding:6px 2px;border-bottom:2px solid transparent}
.h5-nav a:hover{color:var(--h5-ac);text-decoration:none}
.h5-nav .h5-on{color:var(--h5-ac);border-bottom-color:var(--h5-ac)}
.h5-hact{display:flex;gap:10px;align-items:center}
.h5-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 20px;border-radius:999px;font-weight:600;font-size:.95rem;
  border:2px solid var(--h5-ac);cursor:pointer;transition:transform .15s,box-shadow .15s;
}
.h5-btn:hover{text-decoration:none;transform:translateY(-2px)}
.h5-btn-main{background:linear-gradient(150deg,var(--h5-ac2),var(--h5-ac));color:var(--h5-bg);box-shadow:0 4px 18px var(--h5-glow)}
.h5-btn-main:hover{box-shadow:0 8px 26px rgba(244,208,111,.5)}
.h5-btn-ghost{color:var(--h5-ac);background:transparent}
.h5-burger{
  display:none;flex-direction:column;gap:5px;padding:8px;margin-left:auto;cursor:pointer;
  border:1px solid var(--h5-line);border-radius:9px;
}
.h5-burger span{width:22px;height:2.5px;background:var(--h5-ac);border-radius:2px}
.h5-navtog{position:absolute;opacity:0;pointer-events:none}
.h5-mnav{
  display:none;padding:6px 22px 18px;background:var(--h5-deep);
  border-top:1px dashed var(--h5-line);
}
.h5-mgrp h3{margin:.7em 0 .25em;color:var(--h5-ac);font-size:.95rem;letter-spacing:.06em}
.h5-mgrp a{display:block;padding:7px 2px;color:var(--h5-ink);border-bottom:1px dotted rgba(244,208,111,.14)}
.h5-mgrp a:hover{color:var(--h5-ac)}

/* ============ 首页 · 工坊檐 hero ============ */
.h5-main{max-width:1180px;margin:0 auto;padding:0 22px}
.h5-eaves{
  position:relative;margin-top:20px;border-radius:0 0 20px 20px;overflow:hidden;
  background:linear-gradient(175deg,#2A1E13,#20160D 68%);
  border:1px solid var(--h5-line);border-top:none;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  padding:64px 34px 38px;
}
/* 木檐板（扇贝垂边） */
.h5-awning{
  position:absolute;top:0;left:0;right:0;height:46px;
  background:repeating-linear-gradient(90deg,#43301B 0 96px,#382713 96px 192px);
  box-shadow:0 8px 16px rgba(0,0,0,.55), inset 0 -6px 10px rgba(0,0,0,.4);
}
.h5-awrow{
  position:absolute;left:0;right:0;bottom:-15px;height:30px;
  background-image:
    radial-gradient(circle at 34px 0,#43301B 28px,transparent 29px),
    radial-gradient(circle at 130px 0,#382713 28px,transparent 29px);
  background-size:192px 30px;background-repeat:repeat-x;
}
.h5-awrow + .h5-awrow{bottom:-19px;height:30px;opacity:.55;filter:brightness(.75)}
.h5-eavesin{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
.h5-kicker{
  display:inline-block;margin:0 0 10px;padding:4px 14px;border-radius:999px;
  border:1px dashed var(--h5-ac);color:var(--h5-ac);
  font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.h5-lead{color:var(--h5-ink);font-size:1.04rem}
.h5-heroact{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}

/* 霓虹灯箱（CSS 零位图 slot 母题 ②） */
.h5-neonbox{
  justify-self:center;text-align:center;
  background:var(--h5-deep);
  border:2px solid rgba(244,208,111,.55);border-radius:18px;
  padding:22px 26px 18px;min-width:280px;
  box-shadow:0 0 40px rgba(244,208,111,.22), inset 0 0 26px rgba(244,208,111,.1);
}
.h5-neontitle{
  display:block;color:var(--h5-ac);font-size:1.06rem;font-weight:600;letter-spacing:.3em;
  text-shadow:0 0 10px rgba(244,208,111,.9),0 0 28px rgba(244,208,111,.5);
  animation:h5-flicker 4.2s infinite;
}
.h5-neonreels{display:flex;gap:12px;justify-content:center;margin:16px 0 10px}
.h5-reelcol{
  list-style:none;margin:0;padding:8px 6px;display:flex;flex-direction:column;gap:7px;
  background:#100A05;border:1px solid var(--h5-line);border-radius:10px;
  box-shadow:inset 0 0 14px rgba(0,0,0,.8);
}
.h5-rsym{
  font-size:1.32rem;line-height:1.5;text-align:center;border-radius:6px;
  color:var(--h5-ac2);background:linear-gradient(180deg,#241A12,#1A120C);
  border:1px solid rgba(244,208,111,.16);min-width:52px;
  animation:h5-bob 5.5s ease-in-out infinite alternate;
}
.h5-reelcol:nth-child(2) .h5-rsym{animation-delay:.6s}
.h5-reelcol:nth-child(3) .h5-rsym{animation-delay:1.2s}
.h5-rsym small{display:block;font-size:.56rem;color:var(--h5-mut);letter-spacing:.12em}
.h5-neonpay{display:flex;align-items:center;gap:8px;margin:2px 6px 10px;color:var(--h5-ac)}
.h5-neonpay i{font-style:normal;font-size:.8rem;line-height:1}
.h5-neonpay i:nth-child(2){flex:1;height:0;border-top:3px dashed rgba(244,208,111,.55)}
.h5-neonsub{display:block;color:var(--h5-mut);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase}

/* 檐下挂牌词 */
.h5-tagline{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.h5-tagw{
  font-style:normal;font-size:.85rem;color:var(--h5-mut);
  border:1.5px dashed rgba(244,208,111,.35);border-radius:8px;padding:4px 14px 4px 26px;
  background:
    radial-gradient(circle at 11px 50%, var(--h5-bg) 4px, rgba(244,208,111,.4) 4.5px, transparent 6px) no-repeat,
    rgba(0,0,0,.2);
}
.h5-tagline .h5-tagw:nth-child(odd){transform:rotate(-1.6deg)}
.h5-tagline .h5-tagw:nth-child(even){transform:rotate(1.3deg)}

/* ============ Dinding Minat 瀑布墙 ============ */
.h5-wall{margin-top:56px}
.h5-wallp{color:var(--h5-mut);max-width:820px}
.h5-masonry{
  position:relative;margin-top:34px;
  columns:3;column-gap:26px;
  border-top:2px dashed rgba(244,208,111,.35);   /* slot 母题 ③：中奖线做墙缝 */
  padding-top:30px;
}
.h5-masonry::before{content:"◆";position:absolute;top:-12px;left:-4px;color:var(--h5-ac);font-size:15px;text-shadow:0 0 10px var(--h5-glow)}
.h5-masonry::after{content:"🔔";position:absolute;top:-13px;right:-3px;font-size:16px;filter:drop-shadow(0 0 8px var(--h5-glow))}
/* 墙体背景：多条水平虚线墙缝（低亮度中奖线群） */
.h5-wall .h5-masonry{
  background-image:repeating-linear-gradient(to bottom, rgba(244,208,111,.055) 0 2px, transparent 2px 132px);
}
.h5-card{
  break-inside:avoid;position:relative;margin:0 0 26px;
  padding:24px 22px 18px;border-radius:12px;
  background:
    repeating-linear-gradient(to bottom, rgba(244,208,111,.3) 0 9px, transparent 9px 18px) right 60px top 0 / 2px 100% no-repeat,
    linear-gradient(162deg,#332517,#271B10);
  border:1px solid var(--h5-line);
  box-shadow:0 12px 28px rgba(0,0,0,.38);
}
/* 门票打孔（撕票线两端半圆缺口） */
.h5-card::before,.h5-card::after{
  content:"";position:absolute;right:52px;width:16px;height:16px;border-radius:50%;
  background:var(--h5-bg);border:1px solid rgba(244,208,111,.3);
}
.h5-card::before{top:-9px}
.h5-card::after{bottom:-9px}
/* slot 符号角标（母题 ①） */
.h5-badge{
  position:absolute;top:-13px;left:-11px;z-index:2;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,var(--h5-ac2),var(--h5-ac) 62%,#C89B33);
  color:var(--h5-bg);font-family:Fredoka;font-weight:700;font-size:15px;
  box-shadow:0 0 16px var(--h5-glow), inset 0 -3px 6px rgba(0,0,0,.25);
}
.h5-card h3{margin:8px 0 6px;color:var(--h5-ac2)}
.h5-card p{margin:.3em 0 .9em;color:var(--h5-ink);font-size:.95rem}
.h5-cardfig{margin:2px 0 12px;border-radius:9px;overflow:hidden;border:1px solid var(--h5-line)}
.h5-cardfig img{display:block;width:100%}
.h5-cardlink{
  display:inline-block;padding-right:66px;color:var(--h5-ac);font-weight:600;font-size:.9rem;
}
.h5-cardlink:hover{text-decoration:underline}
.h5-card:nth-of-type(even){padding-top:30px}
.h5-card:nth-of-type(3n){padding-right:84px}
.h5-card:nth-of-type(3n) .h5-cardlink{padding-right:20px}

/* 墙底引言条（通栏票根） */
.h5-quote{
  margin:30px 0 0;padding:26px 34px;position:relative;
  border:1.5px dashed rgba(244,208,111,.4);border-radius:14px;
  background:linear-gradient(90deg,rgba(244,208,111,.08),rgba(244,208,111,.02));
}
.h5-quote p{font-size:1.12rem;color:var(--h5-ac2);margin:0}
.h5-quote cite{display:block;margin-top:8px;color:var(--h5-mut);font-style:normal;font-size:.9rem}

/* ============ 工具格 ============ */
.h5-tools{margin-top:64px}
.h5-toolsp{color:var(--h5-mut);max-width:820px}
.h5-tooldl{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:30px 0 0;padding:0;
}
.h5-tool{
  background:linear-gradient(170deg,#2C2013,#231910);border:1px solid var(--h5-line);
  border-top:3px solid rgba(244,208,111,.5);border-radius:10px;padding:16px 15px 13px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);transition:transform .18s,box-shadow .18s;
}
.h5-tool:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(0,0,0,.45)}
.h5-tool dt{
  font-family:Fredoka;color:var(--h5-ac2);font-weight:600;margin-bottom:8px;
}
.h5-tool dt::before{ /* 投币口造型 */
  content:"";display:block;width:36px;height:7px;margin-bottom:10px;border-radius:4px;
  background:#0F0903;box-shadow:inset 0 2px 3px #000, 0 1px 0 rgba(244,208,111,.25);
}
.h5-tool dd{margin:0;color:var(--h5-ink);font-size:.86rem}
.h5-toolgo{margin-top:10px !important}
.h5-toolgo a{font-weight:600;font-size:.85rem}

/* ============ 叙述 + 优势 ============ */
.h5-story{margin-top:64px;max-width:900px}
.h5-storyfig{margin:26px 0;border-radius:14px;overflow:hidden;border:1px solid var(--h5-line);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.h5-storyfig img{display:block;width:100%}
.h5-storyfig figcaption{padding:10px 16px;color:var(--h5-mut);font-size:.85rem;background:var(--h5-bg2)}
.h5-advh{margin-top:34px}
.h5-adv{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.h5-adv li{
  padding:14px 16px;border-radius:10px;border:1px solid var(--h5-line);
  background:rgba(244,208,111,.04);font-size:.92rem;
}
.h5-adv b{display:block;color:var(--h5-ac);margin-bottom:4px}

/* ============ FAQ ============ */
.h5-faqsec{margin-top:64px;max-width:900px}
.h5-q{
  border:1px solid var(--h5-line);border-radius:11px;margin-bottom:12px;
  background:linear-gradient(170deg,#2A1E12,#221810);overflow:hidden;
}
.h5-q summary{
  cursor:pointer;list-style:none;padding:15px 20px;font-weight:600;color:var(--h5-ac2);
  display:flex;align-items:center;gap:10px;
}
.h5-q summary::-webkit-details-marker{display:none}
.h5-q summary::after{content:"+";margin-left:auto;color:var(--h5-ac);font-size:1.3rem;line-height:1}
.h5-q[open] summary{border-bottom:1px dashed var(--h5-line)}
.h5-q[open] summary::after{content:"–"}
.h5-q[open]{box-shadow:0 0 18px rgba(244,208,111,.12)}
.h5-q p{padding:12px 20px 16px;margin:0;color:var(--h5-ink);font-size:.95rem}

/* ============ 信任区 ============ */
.h5-trust{
  margin:64px 0 30px;padding:28px 30px;border-radius:16px;position:relative;
  border:1.5px solid rgba(226,96,76,.4);
  background:linear-gradient(170deg,rgba(226,96,76,.08),rgba(244,208,111,.03));
}
.h5-18{
  display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;
  border:2.5px solid var(--h5-red);color:var(--h5-red);font-weight:700;font-size:.95rem;
  margin-bottom:10px;background:rgba(226,96,76,.08);
}
.h5-trust h2{margin-top:0}
.h5-trust p{max-width:860px}
.h5-trustlink{font-weight:600}

/* ============ 内容纸页（导航/教育/支持页共用） ============ */
.h5-paper{max-width:880px;margin:0 auto;padding:34px 22px 10px}
.h5-crumbs{font-size:.85rem;color:var(--h5-mut);margin-bottom:14px}
.h5-crumbs a{color:var(--h5-mut)}
.h5-crumbs a:hover{color:var(--h5-ac)}
.h5-navintro,.h5-edulead{font-size:1.06rem;color:var(--h5-ink)}
.h5-fig{margin:24px 0;border-radius:13px;overflow:hidden;border:1px solid var(--h5-line);box-shadow:0 16px 40px rgba(0,0,0,.42)}
.h5-fig img{display:block;width:100%}
.h5-fig figcaption{padding:9px 15px;color:var(--h5-mut);font-size:.84rem;background:var(--h5-bg2)}
.h5-steps{list-style:none;counter-reset:h5s;margin:18px 0;padding:0}
.h5-steps>li{
  counter-increment:h5s;position:relative;padding:14px 16px 14px 58px;margin-bottom:12px;
  border:1px solid var(--h5-line);border-radius:11px;background:rgba(244,208,111,.04);
}
.h5-steps>li::before{
  content:counter(h5s);position:absolute;left:14px;top:16px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:radial-gradient(circle at 34% 28%,var(--h5-ac2),var(--h5-ac) 65%);
  color:var(--h5-bg);font-family:Fredoka;font-weight:700;
}
.h5-steps h3,.h5-steps p{margin:0}
.h5-steps h3{font-size:1.02rem;margin-bottom:3px}
.h5-steps p{font-size:.93rem}
.h5-navlist li{margin:7px 0;font-size:.95rem}
.h5-note{
  padding:14px 18px;border-left:3px solid var(--h5-ac);border-radius:0 10px 10px 0;
  background:rgba(244,208,111,.06);font-size:.95rem;
}
.h5-aside{
  margin-top:30px;padding:18px 20px;border:1.5px dashed var(--h5-line);border-radius:12px;
  background:rgba(0,0,0,.18);
}
.h5-aside h3{margin:.2em 0 .5em;font-size:.95rem;letter-spacing:.08em;color:var(--h5-ac)}
.h5-aside a{display:block;padding:5px 0;font-size:.93rem}
.h5-resp{margin-top:26px;color:var(--h5-mut);font-size:.86rem}

/* ============ 页脚 ============ */
.h5-foot{
  margin-top:70px;border-top:1px solid var(--h5-line);
  background:linear-gradient(180deg,rgba(23,16,9,.4),#150E07);
}
.h5-fgrid{
  max-width:1180px;margin:0 auto;padding:38px 22px 24px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;
}
.h5-fbrand p{color:var(--h5-mut);font-size:.9rem;margin:12px 0}
.h5-fcol h3{color:var(--h5-ac);font-size:.95rem;letter-spacing:.06em;margin:0 0 10px}
.h5-fcol a{display:block;padding:4.5px 0;color:var(--h5-ink);font-size:.92rem}
.h5-fcol a:hover{color:var(--h5-ac)}
.h5-fbot{border-top:1px dashed var(--h5-line);padding:16px 22px 20px;text-align:center;color:var(--h5-mut);font-size:.85rem}
.h5-fbot p{margin:4px 0}
.h5-foot .h5-18{width:44px;height:44px;font-size:.85rem}

/* ============ 底部悬浮条（唯一外链 · 闪烁） ============ */
.h5-float{
  position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:90;
  width:min(640px,calc(100% - 24px));
}
.h5-floatin{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  padding:10px 16px;border-radius:16px;
  background:rgba(23,16,9,.96);border:1.5px solid var(--h5-ac);
  box-shadow:0 10px 34px rgba(0,0,0,.6);
  animation:h5-pulse 2.2s ease-in-out infinite;
}
.h5-jp{color:var(--h5-ink);font-size:.92rem;display:inline-flex;align-items:center;gap:8px}
.h5-blink{color:var(--h5-ac2);animation:h5-blink 1.6s steps(2,start) infinite}
.h5-enter{padding:8px 22px;font-size:.95rem}

/* ============ 404 ============ */
.h5-404body{display:flex;flex-direction:column;min-height:100vh}
.h5-404{flex:1;text-align:center;padding:90px 22px}
.h5-404reels{display:flex;gap:14px;justify-content:center;font-size:2.2rem;margin-bottom:20px}
.h5-404reels span{
  width:74px;height:74px;display:grid;place-items:center;border-radius:12px;
  background:var(--h5-deep);border:1px solid var(--h5-line);
  box-shadow:inset 0 0 18px rgba(0,0,0,.7), 0 0 14px rgba(244,208,111,.15);
}
.h5-404act{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}

/* ============ 动画 ============ */
@keyframes h5-flicker{
  0%,18%,22%,100%{opacity:1}
  20%{opacity:.55}
  60%{opacity:.92}
}
@keyframes h5-bob{
  from{transform:translateY(0)}
  to{transform:translateY(-7px)}
}
@keyframes h5-pulse{
  0%,100%{box-shadow:0 10px 34px rgba(0,0,0,.6), 0 0 0 0 rgba(244,208,111,.45)}
  50%{box-shadow:0 10px 34px rgba(0,0,0,.6), 0 0 26px 6px rgba(244,208,111,.28)}
}
@keyframes h5-blink{50%{opacity:.25}}

/* ============ 响应式 ============ */
@media (max-width:1023px){
  .h5-eavesin{grid-template-columns:1fr;gap:24px}
  .h5-neonbox{justify-self:start}
  .h5-masonry{columns:2;column-gap:20px}
  .h5-tooldl{grid-template-columns:repeat(3,1fr)}
  .h5-fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:899px){
  .h5-nav,.h5-hact{display:none}
  .h5-burger{display:flex}
  .h5-navtog:checked~.h5-mnav{display:block;animation:h5-drop .22s ease-out}
}
@keyframes h5-drop{from{opacity:.2;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:639px){
  body{font-size:15.5px;padding-bottom:126px}
  h1{font-size:1.6rem}
  h2{font-size:1.28rem}
  .h5-headin{padding:10px 14px;gap:12px}
  .h5-main{padding:0 14px}
  .h5-eaves{padding:56px 18px 26px}
  .h5-awning{background-size:96px 100%}
  .h5-awrow{background-size:96px 30px;height:24px}
  .h5-neonbox{min-width:0;width:100%;padding:18px 14px 14px}
  .h5-neonreels{gap:8px}
  .h5-rsym{min-width:44px;font-size:1.15rem}
  .h5-masonry{columns:1;border-top-style:dashed}
  .h5-card{margin-right:2px}
  .h5-tooldl{grid-template-columns:1fr 1fr}
  .h5-adv{grid-template-columns:1fr}
  .h5-fgrid{grid-template-columns:1fr;gap:20px}
  .h5-quote{padding:20px 18px}
  .h5-floatin{gap:10px;padding:9px 12px}
  .h5-jp{font-size:.82rem}
  .h5-404reels span{width:58px;height:58px;font-size:1.7rem}
}
@media (prefers-reduced-motion:reduce){
  .h5-neontitle,.h5-rsym,.h5-floatin,.h5-blink{animation:none}
}