/* roulang page: index */
:root{
  --bg:#f4f7fb;
  --surface:#ffffff;
  --ink:#0b1220;
  --ink-soft:#3b4a5f;
  --muted:#6b7a90;
  --line:#e2e9f2;
  --line-strong:#cbd8e6;
  --brand:#0e7490;
  --brand-2:#0891b2;
  --brand-deep:#07222f;
  --brand-mid:#0b3c50;
  --accent:#f59e0b;
  --accent-2:#ffb020;
  --accent-soft:#fff5dc;
  --mint:#12b8a0;
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:20px;
  --shadow-sm:0 2px 10px rgba(11,18,32,.06);
  --shadow-md:0 14px 34px rgba(11,18,32,.10);
  --shadow-lg:0 28px 64px rgba(7,34,47,.20);
  --container:1180px;
  --ff:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--ff);
  font-size:15px;
  line-height:1.75;
  color:var(--ink-soft);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--brand);text-decoration:none;transition:color .2s ease,opacity .2s ease;}
a:hover{color:var(--brand-2);}
h1,h2,h3,h4,h5,p,ul,ol,figure{margin:0;}
ul,ol{padding:0;list-style:none;}
button,input{font-family:inherit;font-size:inherit;}
button{cursor:pointer;}
:focus-visible{outline:3px solid rgba(14,116,144,.45);outline-offset:3px;border-radius:6px;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 22px;border-radius:8px;border:1px solid transparent;
  font-size:14.5px;font-weight:600;letter-spacing:.3px;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease;
  min-height:42px;
}
.btn-primary{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;box-shadow:0 8px 20px rgba(8,145,178,.28);}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 26px rgba(8,145,178,.36);}
.btn-accent{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#3a2400;box-shadow:0 8px 20px rgba(245,158,11,.30);}
.btn-accent:hover{color:#3a2400;transform:translateY(-2px);box-shadow:0 14px 28px rgba(245,158,11,.38);}
.btn-ghost{background:transparent;color:#dff0f7;border-color:rgba(223,240,247,.42);}
.btn-ghost:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.10);transform:translateY(-2px);}
.btn-outline{background:#fff;color:var(--brand);border-color:var(--line-strong);}
.btn-outline:hover{color:var(--brand-2);border-color:var(--brand-2);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.btn-sm{padding:8px 16px;font-size:13.5px;min-height:36px;}
.btn-lg{padding:14px 30px;font-size:16px;min-height:50px;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.site-header.scrolled{box-shadow:0 10px 28px rgba(11,18,32,.10);}
.header-top{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  height:64px;
}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;}
.brand-mark{
  width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand-2),var(--brand-deep));
  color:#fff;font-weight:800;font-size:17px;letter-spacing:0;
  box-shadow:0 6px 16px rgba(8,58,80,.28);
}
.brand-text{display:flex;flex-direction:column;line-height:1.2;}
.brand-text strong{font-size:16.5px;color:var(--ink);font-weight:800;letter-spacing:.4px;}
.brand-text em{font-style:normal;font-size:11.5px;color:var(--muted);letter-spacing:1.4px;}
.header-tools{display:flex;align-items:center;gap:12px;}
.search-box{display:flex;align-items:center;background:#eef3f9;border:1px solid transparent;border-radius:999px;padding:4px 4px 4px 16px;transition:border-color .2s,background-color .2s;}
.search-box:focus-within{background:#fff;border-color:var(--brand-2);box-shadow:0 0 0 4px rgba(8,145,178,.12);}
.search-box input{
  border:0;background:transparent;outline:none;width:190px;font-size:13.5px;color:var(--ink);padding:4px 0;
}
.search-box input::placeholder{color:#93a3b8;}
.search-box button{
  border:0;border-radius:999px;background:var(--brand);color:#fff;
  font-size:13px;padding:6px 15px;transition:background-color .2s;
}
.search-box button:hover{background:var(--brand-2);}
.nav-toggle{
  display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line-strong);
  background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;
}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.channel-nav{border-top:1px solid var(--line);background:rgba(255,255,255,.72);}
.channel-track{display:flex;align-items:center;gap:8px;padding:8px 0 10px;overflow-x:auto;scrollbar-width:none;}
.channel-track::-webkit-scrollbar{display:none;}
.channel{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  padding:8px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-soft);
  border:1px solid transparent;white-space:nowrap;transition:all .2s ease;min-height:38px;
}
.channel:hover{color:var(--brand);background:#e8f4f8;border-color:#cfe6ee;}
.channel.active{background:var(--brand-deep);color:#fff;box-shadow:0 8px 18px rgba(7,34,47,.24);}
.channel.active:hover{color:#fff;background:var(--brand-mid);}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;color:#e6f2f8;
  padding:66px 0 74px;
  background:
    linear-gradient(112deg,rgba(6,26,38,.95) 0%,rgba(8,44,60,.90) 46%,rgba(8,72,96,.74) 100%),
    url('/assets/images/捕鱼大咖找这么半天_你又来个大破吞_.webp') center/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:auto -10% -60% -10%;height:220px;
  background:radial-gradient(ellipse at center,rgba(18,184,160,.30),transparent 70%);
  pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center;position:relative;z-index:2;}
.region-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 15px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:1px;
  color:#9ce9dc;background:rgba(18,184,160,.14);border:1px solid rgba(18,184,160,.42);
}
.region-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(18,184,160,.20);}
.hero h1{
  margin-top:20px;font-size:clamp(28px,3.3vw,42px);line-height:1.30;font-weight:800;
  color:#fff;letter-spacing:.5px;
}
.hero p.lead{
  margin-top:18px;font-size:15.5px;line-height:1.85;color:#c4d9e4;max-width:640px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.pill{
  display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:999px;
  font-size:13px;color:#cfe6f0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--accent-2);display:block;}

.hero-map{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius-lg);
  padding:22px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:var(--shadow-lg);
}
.map-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px dashed rgba(255,255,255,.22);}
.map-head strong{font-size:15px;color:#fff;font-weight:700;}
.map-live{
  margin-left:auto;font-size:11.5px;color:#0a2b1d;background:var(--mint);
  padding:2px 10px;border-radius:999px;font-weight:700;letter-spacing:.5px;
}
.map-dot{width:10px;height:10px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 5px rgba(245,158,11,.20);}
.sea-list{margin-top:6px;}
.sea-item{
  display:grid;grid-template-columns:1fr auto;gap:2px 12px;
  padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.10);
  transition:background-color .2s,padding-left .2s;
  border-radius:8px;
}
.sea-item:last-child{border-bottom:0;}
.sea-item:hover{background:rgba(255,255,255,.07);padding-left:10px;}
.sea-name{font-size:14.5px;font-weight:700;color:#fff;}
.sea-meta{font-size:12.5px;color:var(--accent-2);font-weight:700;align-self:center;}
.sea-desc{font-size:12.5px;color:#a9c6d4;grid-column:1 / -1;}
.map-cta{
  display:block;text-align:center;margin-top:14px;padding:10px;border-radius:10px;
  background:rgba(255,255,255,.12);color:#eaf6fb;font-size:13.5px;font-weight:600;
  border:1px solid rgba(255,255,255,.20);transition:background-color .2s;
}
.map-cta:hover{background:rgba(255,255,255,.22);color:#fff;}

/* ---------- sections ---------- */
.section{padding:70px 0;}
.section-alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-deep{background:var(--brand-deep);color:#d3e6ef;}
.section-head{max-width:720px;margin-bottom:38px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;
  letter-spacing:2px;color:var(--brand);text-transform:uppercase;
}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--brand-2));}
.section-deep .eyebrow{color:#7fe0d2;}
.section-title{
  margin-top:12px;font-size:clamp(23px,2.4vw,31px);font-weight:800;line-height:1.34;
  color:var(--ink);letter-spacing:.4px;
}
.section-deep .section-title{color:#fff;}
.section-sub{margin-top:12px;font-size:14.8px;line-height:1.8;color:var(--muted);}
.section-deep .section-sub{color:#a8c6d4;}

/* ---------- entry matrix ---------- */
.entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.entry-tile{
  display:block;padding:24px 22px;border-radius:var(--radius);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.entry-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#bfdce8;color:inherit;}
.entry-icon{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:#e7f4f8;color:var(--brand);margin-bottom:16px;
}
.entry-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.entry-tile h3{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:7px;}
.entry-tile p{font-size:13.8px;line-height:1.72;color:var(--muted);}
.entry-tile .arrow{
  display:inline-block;margin-top:14px;font-size:13px;font-weight:700;color:var(--brand-2);
}
.entry-tile .arrow::after{content:" →";transition:margin-left .2s;}
.entry-tile:hover .arrow::after{margin-left:5px;}

/* ---------- post cards ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.post-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#bfdce8;}
.post-card h3{font-size:16.5px;line-height:1.55;font-weight:700;margin-bottom:10px;}
.post-card h3 a{color:var(--ink);}
.post-card h3 a:hover{color:var(--brand-2);}
.post-card p{font-size:13.8px;line-height:1.75;color:var(--muted);flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.post-meta{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);}
.tag{
  display:inline-flex;align-items:center;padding:3px 11px;border-radius:999px;
  font-size:12px;font-weight:600;color:var(--brand);background:#e7f4f8;border:1px solid #d3e8f0;
}
.post-meta time{font-size:12.5px;color:#93a3b8;margin-left:auto;}
.empty-note{
  grid-column:1 / -1;padding:34px;text-align:center;border-radius:var(--radius);
  border:1px dashed var(--line-strong);background:#f8fbfd;color:var(--muted);font-size:14px;
}

/* ---------- feature trio ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.feature-card{
  position:relative;padding:28px 24px;border-radius:var(--radius);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.feature-card::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--brand-2),var(--accent));
}
.feature-num{font-size:12.5px;font-weight:800;letter-spacing:2px;color:var(--accent);}
.feature-card h3{margin-top:10px;font-size:18px;font-weight:800;color:var(--ink);}
.feature-card p{margin-top:10px;font-size:14px;line-height:1.78;color:var(--muted);}

/* ---------- category wall ---------- */
.cat-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.cat-card{
  position:relative;padding:30px 26px;border-radius:var(--radius-lg);
  background:linear-gradient(165deg,#0b3244,#072230 78%);
  color:#cfe4ee;border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow-md);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.cat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
.cat-card::after{
  content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,184,160,.28),transparent 70%);
}
.cat-index{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:3px;color:var(--accent-2);
}
.cat-card h3{margin-top:12px;font-size:19px;font-weight:800;color:#fff;}
.cat-card p{margin-top:10px;font-size:13.8px;line-height:1.75;color:#a8c6d4;}
.cat-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:20px;padding:8px 18px;
  border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  font-size:13px;font-weight:600;color:#fff;transition:background-color .2s,border-color .2s;
}
.cat-link:hover{background:var(--mint);border-color:var(--mint);color:#03222b;}

/* ---------- scenario ---------- */
.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.scene-item{
  display:flex;gap:14px;padding:20px;border-radius:var(--radius);background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s;
}
.scene-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#bfdce8;}
.scene-badge{
  flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-soft);color:#a56a00;font-weight:800;font-size:13px;
}
.scene-item h3{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:5px;}
.scene-item p{font-size:13.5px;line-height:1.68;color:var(--muted);}

/* ---------- showcase ---------- */
.showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.shot{
  border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease;
}
.shot:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.shot figure{margin:0;position:relative;aspect-ratio:16/10;overflow:hidden;background:#dbe7ef;}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease;}
.shot:hover img{transform:scale(1.05);}
.shot figcaption{padding:16px 18px 18px;}
.shot figcaption strong{display:block;font-size:15px;color:var(--ink);font-weight:700;}
.shot figcaption span{display:block;margin-top:6px;font-size:13.2px;line-height:1.7;color:var(--muted);}

/* ---------- metrics ---------- */
.metric-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.metric{
  padding:28px 22px;text-align:center;border-right:1px solid var(--line);
  transition:background-color .2s;
}
.metric:last-child{border-right:0;}
.metric:hover{background:#f7fbfd;}
.metric b{display:block;font-size:28px;font-weight:800;color:var(--brand);letter-spacing:.5px;line-height:1.2;}
.metric span{display:block;margin-top:8px;font-size:13.2px;color:var(--muted);}

/* ---------- news list ---------- */
.news-layout{display:grid;grid-template-columns:1.6fr .9fr;gap:28px;align-items:start;}
.news-list{display:flex;flex-direction:column;gap:14px;}
.news-row{
  display:flex;gap:18px;padding:20px;border-radius:var(--radius);background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s;
}
.news-row:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#bfdce8;}
.news-date{
  flex:0 0 auto;width:64px;text-align:center;padding:8px 0;border-radius:10px;
  background:#eef7fa;border:1px solid #d5eaf2;color:var(--brand);font-size:12.5px;font-weight:700;
  line-height:1.4;
}
.news-body h3{font-size:16px;font-weight:700;line-height:1.55;}
.news-body h3 a{color:var(--ink);}
.news-body h3 a:hover{color:var(--brand-2);}
.news-body p{margin-top:7px;font-size:13.6px;line-height:1.72;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-tags{display:flex;align-items:center;gap:10px;margin-top:12px;}
.news-side{
  padding:24px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.news-side h3{font-size:16.5px;font-weight:800;color:var(--ink);padding-bottom:14px;border-bottom:1px solid var(--line);}
.side-list{margin-top:6px;}
.side-list li{padding:13px 0;border-bottom:1px dashed var(--line);font-size:13.8px;line-height:1.68;color:var(--ink-soft);}
.side-list li:last-child{border-bottom:0;}
.side-list li::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-right:10px;vertical-align:middle;
}

/* ---------- version log ---------- */
.version-list{display:flex;flex-direction:column;gap:14px;}
.version-row{
  display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:start;
  padding:22px 24px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s;
}
.version-row:hover{border-color:#bfdce8;box-shadow:var(--shadow-md);}
.version-tag{
  display:inline-flex;justify-content:center;padding:7px 12px;border-radius:999px;
  background:var(--brand-deep);color:#fff;font-size:13px;font-weight:700;letter-spacing:.5px;
}
.version-row h3{font-size:16px;font-weight:700;color:var(--ink);}
.version-row p{margin-top:7px;font-size:13.8px;line-height:1.75;color:var(--muted);}
.version-note{display:inline-block;margin-top:10px;font-size:12.5px;color:var(--muted);}

/* ---------- platform ---------- */
.platform-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:44px;align-items:center;}
.platform-img{
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.14);aspect-ratio:4/3;
}
.platform-img img{width:100%;height:100%;object-fit:cover;}
.platform-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px;}
.plat-card{
  padding:18px 16px;border-radius:var(--radius);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);transition:background-color .2s,transform .2s;
}
.plat-card:hover{background:rgba(255,255,255,.13);transform:translateY(-3px);}
.plat-card strong{display:block;font-size:14.5px;color:#fff;font-weight:700;}
.plat-card span{display:block;margin-top:6px;font-size:12.6px;line-height:1.6;color:#a8c6d4;}

/* ---------- cases ---------- */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.case-card{
  padding:26px 24px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s;
}
.case-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#bfdce8;}
.case-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.avatar{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(140deg,#0e7490,#072230);color:#fff;font-weight:800;font-size:15px;
}
.case-head strong{display:block;font-size:14.8px;color:var(--ink);}
.case-head em{display:block;font-style:normal;font-size:12.4px;color:var(--muted);}
.case-card p{font-size:13.8px;line-height:1.76;color:var(--muted);}
.case-foot{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:12.6px;color:var(--brand);font-weight:600;}

/* ---------- reviews ---------- */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.review-card{
  position:relative;padding:26px 24px 22px;border-radius:var(--radius);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s;
}
.review-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.review-card::before{
  content:"”";position:absolute;top:6px;right:22px;font-size:56px;line-height:1;
  color:#dcecf3;font-family:Georgia,serif;
}
.review-card p{position:relative;font-size:14px;line-height:1.8;color:var(--ink-soft);}
.review-user{display:flex;align-items:center;gap:10px;margin-top:18px;}
.review-user .avatar{width:34px;height:34px;border-radius:10px;font-size:13px;}
.review-user strong{font-size:13.5px;color:var(--ink);}
.stars{color:var(--accent);font-size:13px;letter-spacing:2px;margin-left:auto;}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step;}
.step{
  position:relative;padding:30px 24px 26px;border-radius:var(--radius);background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s;
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.step::before{
  counter-increment:step;content:"0" counter(step);
  display:inline-block;font-size:13px;font-weight:800;letter-spacing:2px;
  color:#fff;background:var(--brand);padding:4px 12px;border-radius:999px;margin-bottom:16px;
}
.step h3{font-size:16.5px;font-weight:700;color:var(--ink);}
.step p{margin-top:9px;font-size:13.8px;line-height:1.75;color:var(--muted);}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:12px;max-width:920px;margin:0 auto;}
.faq-item{
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color .2s,box-shadow .2s;
}
.faq-item[open]{border-color:#bfdce8;box-shadow:var(--shadow-md);}
.faq-item summary{
  list-style:none;cursor:pointer;padding:19px 54px 19px 24px;position:relative;
  font-size:15.5px;font-weight:700;color:var(--ink);transition:color .2s;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--brand-2);}
.faq-item summary::after{
  content:"";position:absolute;right:24px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq-body{padding:0 24px 22px;font-size:14px;line-height:1.85;color:var(--muted);}

/* ---------- cta band ---------- */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:52px 44px;
  background:linear-gradient(120deg,#072230 0%,#0b3c50 55%,#0e7490 100%);
  box-shadow:var(--shadow-lg);color:#dcecf3;
  display:grid;grid-template-columns:1.4fr auto;gap:30px;align-items:center;
}
.cta-band::after{
  content:"";position:absolute;right:-80px;bottom:-100px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,158,11,.28),transparent 68%);
}
.cta-band h2{position:relative;font-size:clamp(21px,2.2vw,28px);font-weight:800;color:#fff;line-height:1.4;}
.cta-band p{position:relative;margin-top:12px;font-size:14.2px;line-height:1.8;color:#a8c6d4;max-width:640px;}
.cta-actions{position:relative;display:flex;flex-wrap:wrap;gap:12px;}

/* ---------- footer ---------- */
.site-footer{background:#061a24;color:#93b2c2;padding:56px 0 0;margin-top:0;}
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:40px;padding-bottom:38px;}
.footer-brand{display:flex;align-items:center;gap:11px;margin-bottom:16px;}
.footer-brand .brand-mark{width:36px;height:36px;font-size:16px;border-radius:10px;}
.footer-brand strong{font-size:16px;color:#fff;font-weight:800;}
.site-footer p{font-size:13.6px;line-height:1.8;color:#8ba9ba;}
.footer-col h4{font-size:14px;color:#fff;font-weight:700;margin-bottom:16px;letter-spacing:.6px;}
.footer-links{display:flex;flex-direction:column;gap:10px;}
.footer-links a{font-size:13.6px;color:#8ba9ba;transition:color .2s,padding-left .2s;}
.footer-links a:hover{color:var(--accent-2);padding-left:4px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.10);padding:20px 0 26px;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-size:12.6px;color:#6d8b9c;
}
.footer-bottom span{line-height:1.7;}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:34px;}
  .hero{padding:52px 0 58px;}
  .entry-grid,.post-grid,.feature-grid,.cat-wall,.scene-grid,.showcase-grid,.case-grid,.review-grid,.steps{grid-template-columns:repeat(2,1fr);}
  .platform-grid{grid-template-columns:1fr;gap:30px;}
  .news-layout{grid-template-columns:1fr;}
  .metric-strip{grid-template-columns:repeat(2,1fr);}
  .metric:nth-child(2){border-right:0;}
  .metric:nth-child(1),.metric:nth-child(2){border-bottom:1px solid var(--line);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px;}
  .search-box{display:none;}
}
@media (max-width:860px){
  .nav-toggle{display:flex;}
  .channel-nav{max-height:0;overflow:hidden;transition:max-height .28s ease;border-top:1px solid transparent;}
  .channel-nav.open{max-height:320px;border-top-color:var(--line);}
  .channel-track{flex-direction:column;align-items:stretch;gap:6px;padding:10px 0 14px;overflow:visible;}
  .channel{padding:12px 16px;border-radius:10px;justify-content:flex-start;}
  .header-cta{display:none;}
  .cta-band{grid-template-columns:1fr;padding:38px 26px;}
}
@media (max-width:768px){
  .section{padding:52px 0;}
  .entry-grid,.post-grid,.feature-grid,.cat-wall,.scene-grid,.showcase-grid,.case-grid,.review-grid,.steps{grid-template-columns:1fr;}
  .version-row{grid-template-columns:1fr;gap:12px;}
  .metric-strip{grid-template-columns:1fr;}
  .metric{border-right:0;border-bottom:1px solid var(--line);}
  .metric:last-child{border-bottom:0;}
  .footer-grid{grid-template-columns:1fr;gap:26px;}
  .hero-map{padding:18px;}
}
@media (max-width:520px){
  .container{padding:0 15px;}
  .hero h1{font-size:26px;}
  .hero p.lead{font-size:14.5px;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{width:100%;}
  .section-title{font-size:21px;}
  .news-row{flex-direction:column;gap:12px;}
  .news-date{width:auto;display:inline-flex;padding:5px 12px;align-self:flex-start;}
  .footer-bottom{flex-direction:column;}
  .cta-actions .btn{width:100%;}
}

/* roulang page: article */
:root{
 --bg:#f4f7fb;
 --surface:#ffffff;
 --ink:#0b1220;
 --ink-soft:#3b4a5f;
 --muted:#6b7a90;
 --line:#e2e9f2;
 --line-strong:#cbd8e6;
 --brand:#0e7490;
 --brand-2:#0891b2;
 --brand-deep:#07222f;
 --brand-mid:#0b3c50;
 --accent:#f59e0b;
 --accent-2:#ffb020;
 --accent-soft:#fff5dc;
 --mint:#12b8a0;
 --radius:14px;
 --radius-sm:10px;
 --radius-lg:20px;
 --shadow-sm:0 2px 10px rgba(11,18,32,.06);
 --shadow-md:0 14px 34px rgba(11,18,32,.10);
 --shadow-lg:0 28px 64px rgba(7,34,47,.20);
 --container:1180px;
 --ff:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
 margin:0;
 font-family:var(--ff);
 font-size:15px;
 line-height:1.78;
 color:var(--ink-soft);
 background:var(--bg);
 -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--brand);text-decoration:none;transition:color .2s ease,opacity .2s ease;}
a:hover{color:var(--brand-2);}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid rgba(8,145,178,.38);outline-offset:2px;}
button,input{font-family:inherit;font-size:inherit;}
button{cursor:pointer;}
h1,h2,h3,h4,p,ul,ol{margin:0;}
ul,ol{padding:0;list-style:none;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;}
/* ---------- buttons ---------- */
.btn{
 display:inline-flex;align-items:center;justify-content:center;gap:7px;
 padding:11px 22px;border-radius:8px;border:1px solid transparent;
 font-size:14.5px;font-weight:600;letter-spacing:.3px;
 transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease;
 min-height:42px;
}
.btn-primary{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;box-shadow:0 8px 20px rgba(8,145,178,.28);}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 26px rgba(8,145,178,.36);}
.btn-accent{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#3a2400;box-shadow:0 8px 20px rgba(245,158,11,.30);}
.btn-accent:hover{color:#3a2400;transform:translateY(-2px);box-shadow:0 14px 28px rgba(245,158,11,.38);}
.btn-ghost{background:transparent;color:#dff0f7;border-color:rgba(223,240,247,.42);}
.btn-ghost:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.10);transform:translateY(-2px);}
.btn-outline{background:#fff;color:var(--brand);border-color:var(--line-strong);}
.btn-outline:hover{color:var(--brand-2);border-color:var(--brand-2);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.btn-sm{padding:8px 16px;font-size:13.5px;min-height:36px;}
.btn-lg{padding:14px 30px;font-size:16px;min-height:50px;}
/* ---------- header ---------- */
.site-header{
 position:sticky;top:0;z-index:60;
 background:rgba(255,255,255,.94);
 backdrop-filter:blur(12px);
 -webkit-backdrop-filter:blur(12px);
 border-bottom:1px solid var(--line);
 transition:box-shadow .25s ease;
}
.site-header.scrolled{box-shadow:0 10px 28px rgba(11,18,32,.10);}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:18px;height:64px;}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;}
.brand-mark{
 width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
 background:linear-gradient(140deg,var(--brand-2),var(--brand-deep));
 color:#fff;font-weight:800;font-size:17px;letter-spacing:0;
 box-shadow:0 6px 16px rgba(8,58,80,.28);
}
.brand-text{display:flex;flex-direction:column;line-height:1.2;}
.brand-text strong{font-size:16.5px;color:var(--ink);font-weight:800;letter-spacing:.4px;}
.brand-text em{font-style:normal;font-size:11.5px;color:var(--muted);letter-spacing:1.4px;}
.header-tools{display:flex;align-items:center;gap:12px;}
.search-box{display:flex;align-items:center;background:#eef3f9;border:1px solid transparent;border-radius:999px;padding:4px 4px 4px 16px;transition:border-color .2s,background-color .2s;}
.search-box:focus-within{background:#fff;border-color:var(--brand-2);box-shadow:0 0 0 4px rgba(8,145,178,.12);}
.search-box input{border:0;background:transparent;outline:none;width:190px;font-size:13.5px;color:var(--ink);padding:4px 0;}
.search-box input::placeholder{color:#93a3b8;}
.search-box button{border:0;border-radius:999px;background:var(--brand);color:#fff;font-size:13px;padding:6px 15px;transition:background-color .2s;}
.search-box button:hover{background:var(--brand-2);}
.nav-toggle{
 display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line-strong);
 background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;
}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.channel-nav{border-top:1px solid var(--line);background:rgba(255,255,255,.72);}
.channel-track{display:flex;align-items:center;gap:6px;height:46px;overflow-x:auto;scrollbar-width:none;}
.channel-track::-webkit-scrollbar{display:none;}
.channel{
 display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;
 font-size:14px;font-weight:600;color:var(--ink-soft);white-space:nowrap;
 transition:background-color .2s,color .2s,box-shadow .2s;
}
.channel:hover{background:#eef3f9;color:var(--brand);}
.channel.active{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;box-shadow:0 6px 16px rgba(8,145,178,.26);}
.channel.active:hover{color:#fff;}
/* ---------- article hero ---------- */
.article-hero{
 position:relative;overflow:hidden;color:#e6f2f8;
 padding:44px 0 54px;
 background:
 linear-gradient(112deg,rgba(6,26,38,.95) 0%,rgba(8,44,60,.91) 52%,rgba(8,72,96,.78) 100%),
 url('/assets/images/捕鱼大咖补更一个x3黑洞.webp') center/cover no-repeat;
}
.article-hero::after{
 content:"";position:absolute;inset:auto -12% -70% -12%;height:230px;
 background:radial-gradient(ellipse at center,rgba(18,184,160,.28),transparent 70%);
 pointer-events:none;
}
.article-hero .container{position:relative;z-index:2;}
.breadcrumb-nav{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#8fb0c0;margin-bottom:20px;flex-wrap:wrap;}
.breadcrumb-nav a{color:#a8c8d6;}
.breadcrumb-nav a:hover{color:#fff;}
.breadcrumb-nav .sep{color:#5f8496;}
.breadcrumb-nav .current{color:#d8ecf4;max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.article-hero h1{
 font-size:clamp(24px,3vw,36px);line-height:1.36;font-weight:800;color:#fff;
 letter-spacing:.4px;max-width:900px;
}
.article-lead{
 margin-top:18px;font-size:15px;line-height:1.9;color:#bfd6e2;max-width:840px;
}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;}
.chip{
 display:inline-flex;align-items:center;gap:6px;
 padding:5px 13px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.4px;
 color:#9ce9dc;background:rgba(18,184,160,.14);border:1px solid rgba(18,184,160,.40);
}
.chip-cat{color:#ffe0a8;background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.42);}
.meta-item{font-size:12.5px;color:#9bb8c7;letter-spacing:.4px;}
.meta-item time{color:#d6e9f2;}
/* ---------- section ---------- */
.section{padding:54px 0;}
.section-alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-head{margin-bottom:28px;max-width:780px;}
.section-head .eyebrow{
 display:inline-flex;align-items:center;gap:8px;
 font-size:12.5px;font-weight:700;letter-spacing:1.6px;color:var(--brand-2);
 text-transform:uppercase;margin-bottom:10px;
}
.section-head .eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand-2),var(--mint));}
.section-head h2{font-size:clamp(20px,2.1vw,26px);font-weight:800;color:var(--ink);letter-spacing:.4px;line-height:1.4;}
.section-head p{margin-top:10px;font-size:14.5px;color:var(--muted);}
/* ---------- quick panel ---------- */
.quick-panel{
 border-radius:var(--radius-lg);padding:30px 34px;
 background:linear-gradient(135deg,var(--brand-deep),var(--brand-mid));
 color:#c9e2ec;box-shadow:var(--shadow-md);
 display:grid;grid-template-columns:.9fr 1.6fr;gap:34px;align-items:start;
}
.quick-panel h2{font-size:20px;font-weight:800;color:#fff;line-height:1.45;}
.quick-panel h2 span{display:block;font-size:13px;font-weight:500;color:#8fb8c8;letter-spacing:.6px;margin-top:8px;}
.quick-list{display:grid;gap:14px;}
.quick-list li{
 position:relative;padding-left:16px;font-size:14px;line-height:1.8;color:#c1dbe6;
}
.quick-list li::before{
 content:"";position:absolute;left:0;top:9px;width:3px;height:14px;border-radius:2px;
 background:linear-gradient(180deg,var(--mint),var(--brand-2));
}
.quick-list strong{color:#fff;font-weight:700;}
/* ---------- article body ---------- */
.article-shell{
 background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
 padding:36px 40px;box-shadow:var(--shadow-sm);max-width:920px;margin:0 auto;
}
.article-body{font-size:15.5px;line-height:1.85;color:var(--ink-soft);}
.article-body > * + *{margin-top:16px;}
.article-body h2{
 font-size:22px;font-weight:800;color:var(--ink);line-height:1.45;
 margin-top:32px;padding-left:14px;border-left:4px solid var(--brand-2);
}
.article-body h3{font-size:17.5px;font-weight:700;color:var(--ink);margin-top:26px;}
.article-body h4{font-size:16px;font-weight:700;color:var(--ink-mid,#0b3c50);margin-top:22px;}
.article-body p{font-size:15.5px;line-height:1.88;color:var(--ink-soft);}
.article-body strong{color:var(--ink);font-weight:700;}
.article-body em{color:var(--brand);font-style:normal;}
.article-body ul,.article-body ol{margin-top:14px;padding-left:2px;}
.article-body ul li,.article-body ol li{
 position:relative;padding-left:18px;margin-top:9px;font-size:15px;line-height:1.85;color:var(--ink-soft);
}
.article-body ul li::before{
 content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:2px;
 background:var(--brand-2);opacity:.75;
}
.article-body ol{counter-reset:artol;}
.article-body ol li{counter-increment:artol;padding-left:26px;}
.article-body ol li::before{
 content:counter(artol);position:absolute;left:0;top:5px;
 width:19px;height:19px;border-radius:6px;display:grid;place-items:center;
 background:var(--accent-soft);color:#a86a00;font-size:11.5px;font-weight:800;
}
.article-body img{border-radius:var(--radius);margin:24px 0;box-shadow:var(--shadow-sm);width:100%;height:auto;}
.article-body figure{margin:24px 0;}
.article-body figcaption{font-size:12.5px;color:var(--muted);text-align:center;margin-top:8px;}
.article-body blockquote{
 margin:24px 0;padding:18px 22px;border-radius:var(--radius);
 background:#f1f7fa;border-left:4px solid var(--mint);color:#22475a;font-size:15px;line-height:1.85;
}
.article-body blockquote p{margin:0;color:#22475a;}
.article-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14px;border-radius:var(--radius);overflow:hidden;}
.article-body th{background:#eaf2f7;color:var(--ink);font-weight:700;text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-strong);}
.article-body td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--ink-soft);}
.article-body tr:hover td{background:#f7fbfd;}
.article-body a{color:var(--brand);font-weight:600;border-bottom:1px dashed rgba(14,116,144,.4);}
.article-body a:hover{color:var(--brand-2);border-bottom-color:var(--brand-2);}
.not-found{text-align:center;padding:26px 10px 34px;}
.not-found h2{font-size:22px;font-weight:800;color:var(--ink);}
.not-found p{margin-top:12px;color:var(--muted);font-size:14.5px;}
.not-found .btn{margin-top:22px;}
/* ---------- stat cards ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.stat-card{
 background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 padding:22px 20px;box-shadow:var(--shadow-sm);
 transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-strong);}
.stat-num{
 display:inline-block;font-size:22px;font-weight:800;color:var(--brand);
 letter-spacing:.5px;line-height:1.2;
}
.stat-card h3{margin-top:10px;font-size:15px;font-weight:700;color:var(--ink);}
.stat-card p{margin-top:8px;font-size:13.5px;line-height:1.75;color:var(--muted);}
/* ---------- steps ---------- */
.step-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.step-card{
 display:flex;gap:16px;background:var(--surface);border:1px solid var(--line);
 border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);
 transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.step-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-strong);}
.step-num{
 flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
 background:linear-gradient(140deg,rgba(8,145,178,.14),rgba(18,184,160,.16));
 color:var(--brand);font-weight:800;font-size:15px;border:1px solid rgba(8,145,178,.18);
}
.step-card h3{font-size:15.5px;font-weight:700;color:var(--ink);}
.step-card p{margin-top:8px;font-size:13.8px;line-height:1.78;color:var(--muted);}
/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.faq-item{
 background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 padding:4px 20px;box-shadow:var(--shadow-sm);transition:border-color .2s ease,box-shadow .2s ease;
}
.faq-item:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md);}
.faq-item summary{
 list-style:none;cursor:pointer;padding:16px 26px 16px 0;position:relative;
 font-size:15px;font-weight:700;color:var(--ink);line-height:1.6;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
 content:"";position:absolute;right:2px;top:23px;width:9px;height:9px;
 border-right:2px solid var(--brand-2);border-bottom:2px solid var(--brand-2);
 transform:rotate(45deg);transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg);}
.faq-item p{padding:0 0 18px;font-size:14px;line-height:1.85;color:var(--muted);}
/* ---------- link list ---------- */
.link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.link-card{
 display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 overflow:hidden;box-shadow:var(--shadow-sm);color:inherit;
 transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.link-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-strong);color:inherit;}
.link-card figure{margin:0;aspect-ratio:16/9;overflow:hidden;background:#e7eff5;}
.link-card figure img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.link-card:hover figure img{transform:scale(1.05);}
.link-card .link-body{padding:18px 20px 22px;}
.link-card h3{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.5;}
.link-card p{margin-top:8px;font-size:13.5px;line-height:1.78;color:var(--muted);}
.link-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:700;color:var(--brand-2);}
.link-card:hover .link-more{color:var(--brand);}
/* ---------- cta band ---------- */
.cta-band{padding:12px 0 64px;}
.cta-inner{
 position:relative;overflow:hidden;border-radius:var(--radius-lg);
 padding:44px 46px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
 background:
 linear-gradient(120deg,rgba(6,26,38,.96),rgba(8,60,80,.92)),
 url('/assets/images/捕鱼大咖找这么半天_你又来个大破吞_.webp') center/cover no-repeat;
 box-shadow:var(--shadow-lg);color:#e2f1f7;
}
.cta-inner h2{font-size:clamp(20px,2.2vw,26px);font-weight:800;color:#fff;line-height:1.45;max-width:620px;}
.cta-inner p{margin-top:12px;font-size:14px;line-height:1.85;color:#a8cad8;max-width:600px;}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;}
/* ---------- footer ---------- */
.site-footer{background:var(--brand-deep);color:#a9c4d2;padding:52px 0 0;border-top:1px solid rgba(255,255,255,.08);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:38px;}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.footer-brand strong{color:#fff;font-size:16px;letter-spacing:.4px;}
.footer-brand .brand-mark{background:linear-gradient(140deg,var(--brand-2),rgba(7,34,47,.9));border:1px solid rgba(255,255,255,.16);box-shadow:none;}
.site-footer p{font-size:13.5px;line-height:1.85;color:#94b0c0;max-width:430px;}
.footer-col h4{color:#fff;font-size:14.5px;margin-bottom:14px;font-weight:700;letter-spacing:.6px;}
.footer-links{display:flex;flex-direction:column;gap:9px;}
.footer-links a{color:#a9c4d2;font-size:13.5px;}
.footer-links a:hover{color:#fff;}
.footer-bottom{
 display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
 border-top:1px solid rgba(255,255,255,.10);padding:18px 0;font-size:12.5px;color:#7f9cae;
}
/* ---------- responsive ---------- */
@media (max-width:1024px){
 .quick-panel{grid-template-columns:1fr;gap:22px;padding:28px;}
 .stat-grid{grid-template-columns:repeat(2,1fr);}
 .link-grid{grid-template-columns:repeat(2,1fr);}
 .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
 .article-shell{padding:30px 26px;}
}
@media (max-width:860px){
 .search-box{display:none;}
 .nav-toggle{display:flex;}
 .channel-nav{display:none;}
 .channel-nav.open{display:block;}
 .channel-track{flex-direction:column;align-items:stretch;height:auto;padding:10px 0 16px;gap:4px;}
 .channel{width:100%;justify-content:flex-start;padding:11px 16px;min-height:42px;}
 .header-cta{display:none;}
 .article-hero{padding:32px 0 42px;}
 .section{padding:42px 0;}
}
@media (max-width:768px){
 .step-grid{grid-template-columns:1fr;}
 .faq-grid{grid-template-columns:1fr;}
 .stat-grid{grid-template-columns:1fr 1fr;gap:14px;}
 .link-grid{grid-template-columns:1fr;}
 .footer-grid{grid-template-columns:1fr;gap:28px;}
 .cta-inner{padding:32px 24px;}
 .article-shell{padding:24px 18px;border-radius:var(--radius);}
 .article-body h2{font-size:19.5px;}
 .footer-bottom{flex-direction:column;gap:6px;}
}
@media (max-width:520px){
 .brand-text strong{font-size:15px;}
 .brand-text em{display:none;}
 .stat-grid{grid-template-columns:1fr;}
 .article-hero h1{font-size:22px;}
 .breadcrumb-nav .current{max-width:240px;}
 .cta-actions{width:100%;}
 .cta-actions .btn{width:100%;}
 .quick-panel{padding:22px 18px;}
 .section-head h2{font-size:19px;}
}

/* roulang page: category1 */
:root{
 --bg:#f4f7fb;
 --surface:#ffffff;
 --ink:#0b1220;
 --ink-soft:#3b4a5f;
 --muted:#6b7a90;
 --line:#e2e9f2;
 --line-strong:#cbd8e6;
 --brand:#0e7490;
 --brand-2:#0891b2;
 --brand-deep:#07222f;
 --brand-mid:#0b3c50;
 --accent:#f59e0b;
 --accent-2:#ffb020;
 --accent-soft:#fff5dc;
 --mint:#12b8a0;
 --radius:14px;
 --radius-sm:10px;
 --radius-lg:20px;
 --shadow-sm:0 2px 10px rgba(11,18,32,.06);
 --shadow-md:0 14px 34px rgba(11,18,32,.10);
 --shadow-lg:0 28px 64px rgba(7,34,47,.20);
 --container:1180px;
 --ff:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
 margin:0;
 font-family:var(--ff);
 font-size:15px;
 line-height:1.78;
 color:var(--ink-soft);
 background:var(--bg);
 -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--brand);text-decoration:none;transition:color .2s ease,opacity .2s ease;}
a:hover{color:var(--brand-2);}
button,input{font-family:inherit;font-size:inherit;}
button{cursor:pointer;}
ul,ol{margin:0;padding:0;list-style:none;}
p{margin:0 0 14px;}
p:last-child{margin-bottom:0;}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:800;line-height:1.35;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;}
.hl{color:var(--brand);font-weight:700;}
/* ---------- buttons ---------- */
.btn{
 display:inline-flex;align-items:center;justify-content:center;gap:7px;
 padding:11px 22px;border-radius:8px;border:1px solid transparent;
 font-size:14.5px;font-weight:600;letter-spacing:.3px;
 transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease;
 min-height:42px;
}
.btn-primary{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;box-shadow:0 8px 20px rgba(8,145,178,.28);}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 26px rgba(8,145,178,.36);}
.btn-accent{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#3a2400;box-shadow:0 8px 20px rgba(245,158,11,.30);}
.btn-accent:hover{color:#3a2400;transform:translateY(-2px);box-shadow:0 14px 28px rgba(245,158,11,.38);}
.btn-ghost{background:transparent;color:#dff0f7;border-color:rgba(223,240,247,.42);}
.btn-ghost:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.10);transform:translateY(-2px);}
.btn-outline{background:#fff;color:var(--brand);border-color:var(--line-strong);}
.btn-outline:hover{color:var(--brand-2);border-color:var(--brand-2);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.btn-sm{padding:8px 16px;font-size:13.5px;min-height:36px;}
.btn-lg{padding:14px 30px;font-size:16px;min-height:50px;}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid rgba(8,145,178,.38);outline-offset:2px;}
/* ---------- header ---------- */
.site-header{
 position:sticky;top:0;z-index:60;
 background:rgba(255,255,255,.94);
 backdrop-filter:blur(12px);
 -webkit-backdrop-filter:blur(12px);
 border-bottom:1px solid var(--line);
 transition:box-shadow .25s ease;
}
.site-header.scrolled{box-shadow:0 10px 28px rgba(11,18,32,.10);}
.header-top{
 display:flex;align-items:center;justify-content:space-between;gap:18px;
 height:64px;
}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;}
.brand-mark{
 width:38px;height:38px;border-radius:11px;
 display:grid;place-items:center;
 background:linear-gradient(140deg,var(--brand-2),var(--brand-deep));
 color:#fff;font-weight:800;font-size:17px;
 box-shadow:0 6px 16px rgba(8,58,80,.28);
 flex:0 0 auto;
}
.brand-text{display:flex;flex-direction:column;line-height:1.2;}
.brand-text strong{font-size:16.5px;color:var(--ink);font-weight:800;letter-spacing:.4px;}
.brand-text em{font-style:normal;font-size:11.5px;color:var(--muted);letter-spacing:1.4px;}
.header-tools{display:flex;align-items:center;gap:12px;}
.search-box{display:flex;align-items:center;background:#eef3f9;border:1px solid transparent;border-radius:999px;padding:4px 4px 4px 16px;transition:border-color .2s,background-color .2s,box-shadow .2s;}
.search-box:focus-within{background:#fff;border-color:var(--brand-2);box-shadow:0 0 0 4px rgba(8,145,178,.12);}
.search-box input{border:0;background:transparent;outline:none;width:190px;font-size:13.5px;color:var(--ink);padding:4px 0;}
.search-box input::placeholder{color:#93a3b8;}
.search-box button{border:0;border-radius:999px;background:var(--brand);color:#fff;font-size:13px;padding:6px 15px;transition:background-color .2s;}
.search-box button:hover{background:var(--brand-2);}
.nav-toggle{
 display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line-strong);
 background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;
}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.channel-nav{border-top:1px solid var(--line);background:rgba(255,255,255,.72);}
.channel-track{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:9px 20px;scrollbar-width:none;}
.channel-track::-webkit-scrollbar{display:none;}
.channel{
 display:inline-flex;align-items:center;
 padding:8px 18px;border-radius:999px;border:1px solid transparent;
 font-size:14px;font-weight:600;color:var(--ink-soft);white-space:nowrap;
 transition:background-color .2s,color .2s,box-shadow .2s;
 min-height:38px;
}
.channel:hover{background:#eef3f9;color:var(--brand);}
.channel.active{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;box-shadow:0 6px 16px rgba(8,145,178,.28);}
.channel.active:hover{color:#fff;}
/* ---------- hero ---------- */
.hero{
 position:relative;overflow:hidden;color:#e6f2f8;
 padding:64px 0 58px;
 background:
 linear-gradient(112deg,rgba(6,26,38,.95) 0%,rgba(8,44,60,.91) 46%,rgba(8,72,96,.76) 100%),
 url('/assets/images/捕鱼大咖补更一个x3黑洞.webp') center/cover no-repeat;
}
.hero::after{
 content:"";position:absolute;inset:auto -10% -62% -10%;height:230px;
 background:radial-gradient(ellipse at center,rgba(18,184,160,.30),transparent 70%);
 pointer-events:none;
}
.hero-inner{position:relative;z-index:2;}
.region-tag{
 display:inline-flex;align-items:center;gap:8px;
 padding:6px 15px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:1px;
 color:#9ce9dc;background:rgba(18,184,160,.14);border:1px solid rgba(18,184,160,.42);
}
.region-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(18,184,160,.20);}
.hero h1{
 margin-top:20px;font-size:clamp(27px,3.2vw,42px);line-height:1.30;font-weight:800;
 color:#fff;letter-spacing:.5px;max-width:860px;
}
.hero .lead{
 margin-top:18px;font-size:15.5px;line-height:1.85;color:#c4d9e4;max-width:720px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;}
.metric-strip{
 margin-top:38px;
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
 background:rgba(255,255,255,.14);
 border:1px solid rgba(255,255,255,.16);
 border-radius:var(--radius);
 overflow:hidden;
}
.metric{
 padding:18px 20px;background:rgba(6,32,44,.55);
 backdrop-filter:blur(4px);
}
.metric b{display:block;font-size:22px;font-weight:800;color:#fff;line-height:1.25;letter-spacing:.5px;}
.metric span{display:block;margin-top:4px;font-size:12.5px;color:#9dbccc;letter-spacing:.6px;}
/* ---------- sections ---------- */
.section{padding:72px 0;}
.section-alt{background:#eef4f9;}
.section-dark{background:linear-gradient(150deg,var(--brand-deep),var(--brand-mid));color:#c9dde8;}
.section-dark h2,.section-dark h3{color:#fff;}
.section-head{max-width:760px;margin-bottom:40px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.eyebrow{
 display:inline-flex;align-items:center;gap:8px;
 font-size:12.5px;font-weight:700;letter-spacing:2px;color:var(--brand);
 text-transform:uppercase;margin-bottom:12px;
}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--accent);}
.section-dark .eyebrow{color:#7fd8ea;}
.section-dark .eyebrow::before{background:var(--accent-2);}
.section-title{font-size:clamp(21px,2.3vw,29px);line-height:1.38;letter-spacing:.3px;}
.section-sub{margin-top:14px;font-size:15px;line-height:1.85;color:var(--muted);}
.section-dark .section-sub{color:#a8c6d4;}
/* ---------- grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
/* ---------- cards ---------- */
.card{
 background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 padding:26px 24px;box-shadow:var(--shadow-sm);
 transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
 height:100%;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-strong);}
.card-icon{
 width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
 background:linear-gradient(140deg,rgba(8,145,178,.14),rgba(18,184,160,.10));
 color:var(--brand);margin-bottom:16px;
}
.card-icon svg{width:22px;height:22px;}
.card h3{font-size:17px;margin-bottom:10px;letter-spacing:.2px;}
.card p{font-size:14.5px;line-height:1.8;color:var(--ink-soft);}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.tag{
 display:inline-flex;align-items:center;
 padding:4px 12px;border-radius:999px;
 font-size:12px;font-weight:600;letter-spacing:.4px;
 color:var(--brand);background:rgba(8,145,178,.09);border:1px solid rgba(8,145,178,.16);
}
.tag-accent{color:#8a5a00;background:var(--accent-soft);border-color:rgba(245,158,11,.32);}
/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
.split-media{position:relative;}
.split-media img{
 width:100%;aspect-ratio:16/11;object-fit:cover;
 border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
 border:1px solid rgba(255,255,255,.16);
}
.split-media figcaption{
 margin-top:12px;font-size:12.5px;color:#8fb2c2;letter-spacing:.4px;
}
.section:not(.section-dark) .split-media figcaption{color:var(--muted);}
.bullet-list{margin-top:22px;}
.bullet-list li{
 position:relative;padding-left:26px;margin-bottom:12px;
 font-size:14.5px;line-height:1.8;
}
.bullet-list li::before{
 content:"";position:absolute;left:0;top:9px;
 width:10px;height:10px;border-radius:3px;
 background:linear-gradient(140deg,var(--brand-2),var(--mint));
}
.section-dark .bullet-list li{color:#b9d3de;}
/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:step;}
.step{
 position:relative;background:var(--surface);border:1px solid var(--line);
 border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow-sm);
 transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-strong);}
.step-no{
 display:inline-flex;align-items:center;justify-content:center;
 width:38px;height:38px;border-radius:11px;
 font-weight:800;font-size:15px;
 color:#fff;background:linear-gradient(140deg,var(--brand-2),var(--brand));
 box-shadow:0 6px 14px rgba(8,145,178,.26);
 margin-bottom:16px;letter-spacing:.5px;
}
.step h3{font-size:16px;margin-bottom:8px;}
.step p{font-size:14px;line-height:1.78;color:var(--ink-soft);}
/* ---------- spec table ---------- */
.spec-wrap{
 margin-top:26px;overflow-x:auto;
 border:1px solid var(--line);border-radius:var(--radius);
 background:#fff;box-shadow:var(--shadow-sm);
}
table.spec{width:100%;border-collapse:collapse;min-width:680px;font-size:14.5px;}
.spec thead th{
 background:#eef4f9;color:var(--ink);font-weight:700;
 text-align:left;padding:15px 20px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.spec td{padding:14px 20px;border-bottom:1px solid var(--line);color:var(--ink-soft);line-height:1.7;}
.spec tbody tr:last-child td{border-bottom:0;}
.spec tbody tr:hover{background:#f7fbfd;}
.spec td strong{color:var(--ink);font-weight:700;}
.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px;}
.stat{
 background:#fff;border:1px solid var(--line);border-radius:var(--radius);
 padding:22px 22px;box-shadow:var(--shadow-sm);
 transition:transform .2s ease,box-shadow .2s ease;
}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.stat b{display:block;font-size:26px;font-weight:800;color:var(--brand);line-height:1.2;letter-spacing:.5px;}
.stat span{display:block;margin-top:6px;font-size:13px;color:var(--muted);}
/* ---------- reviews ---------- */
.quote{
 background:#fff;border:1px solid var(--line);border-radius:var(--radius);
 padding:26px 24px;box-shadow:var(--shadow-sm);height:100%;
 transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.quote:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-strong);}
.quote p{font-size:14.5px;line-height:1.85;color:var(--ink-soft);font-style:normal;}
.quote footer{margin-top:18px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);}
.quote footer .dot{
 width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
 background:rgba(8,145,178,.10);color:var(--brand);font-weight:800;font-size:13px;
}
/* ---------- post list ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.post-card{
 display:flex;flex-direction:column;height:100%;
 background:#fff;border:1px solid var(--line);border-radius:var(--radius);
 padding:24px 22px;box-shadow:var(--shadow-sm);color:inherit;
 transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-strong);color:inherit;}
.post-card h3{font-size:16.5px;line-height:1.55;margin-bottom:10px;transition:color .2s;}
.post-card:hover h3{color:var(--brand);}
.post-card p{font-size:14px;line-height:1.78;color:var(--ink-soft);}
.post-meta{
 display:flex;align-items:center;gap:12px;flex-wrap:wrap;
 margin-top:auto;padding-top:16px;font-size:12.5px;color:var(--muted);
 border-top:1px dashed var(--line);
}
.post-meta .pm-cat{color:var(--brand);font-weight:600;}
.empty-tip{
 padding:26px 24px;border:1px dashed var(--line-strong);border-radius:var(--radius);
 background:#fff;color:var(--muted);font-size:14.5px;text-align:center;
}
/* ---------- faq ---------- */
.faq-list{display:grid;gap:14px;max-width:900px;}
.faq-item{
 background:#fff;border:1px solid var(--line);border-radius:var(--radius);
 padding:24px 26px;box-shadow:var(--shadow-sm);
 transition:border-color .2s ease,box-shadow .2s ease;
}
.faq-item:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md);}
.faq-item h3{
 font-size:16px;margin-bottom:10px;display:flex;gap:10px;align-items:flex-start;
}
.faq-item h3::before{
 content:"Q";flex:0 0 auto;
 width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
 background:rgba(8,145,178,.10);color:var(--brand);font-size:12.5px;font-weight:800;
 margin-top:2px;
}
.faq-item p{font-size:14.5px;line-height:1.82;color:var(--ink-soft);padding-left:34px;}
/* ---------- cta band ---------- */
.cta-band{
 position:relative;overflow:hidden;
 background:
 linear-gradient(115deg,rgba(6,26,38,.96),rgba(8,72,96,.88)),
 url('/assets/images/捕鱼大咖30万倍的能量器-_捕鱼大咖-_捕鱼大作战-_鱼乐达人.webp') center/cover no-repeat;
 color:#dceef5;padding:66px 0;
}
.cta-inner{
 display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;
 position:relative;z-index:2;
}
.cta-inner h2{color:#fff;font-size:clamp(21px,2.4vw,29px);line-height:1.4;max-width:640px;}
.cta-inner p{margin-top:12px;font-size:14.5px;line-height:1.82;color:#b7d2e0;max-width:660px;}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;}
/* ---------- footer ---------- */
.site-footer{
 background:#061a24;color:#8ea9b8;padding:58px 0 26px;font-size:14px;
 border-top:1px solid rgba(255,255,255,.08);
}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px;padding-bottom:38px;}
.footer-brand{display:flex;align-items:center;gap:11px;margin-bottom:16px;}
.footer-brand .brand-mark{width:36px;height:36px;font-size:16px;border-radius:10px;}
.footer-brand strong{color:#fff;font-size:16.5px;font-weight:800;letter-spacing:.4px;}
.site-footer p{font-size:13.8px;line-height:1.85;color:#87a3b3;max-width:430px;}
.footer-col h4{color:#fff;font-size:14.5px;font-weight:700;letter-spacing:.6px;margin-bottom:16px;}
.footer-links{display:grid;gap:10px;}
.footer-links a{color:#8ea9b8;font-size:13.8px;transition:color .2s,transform .2s;display:inline-block;}
.footer-links a:hover{color:#7fd8ea;transform:translateX(3px);}
.footer-bottom{
 border-top:1px solid rgba(255,255,255,.10);padding-top:22px;
 display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
 font-size:12.8px;color:#6f8b9b;letter-spacing:.4px;
}
/* ---------- responsive ---------- */
@media (max-width:1024px){
 .hero{padding:52px 0 48px;}
 .metric-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
 .grid-3,.grid-4,.steps,.post-grid,.stat-row{grid-template-columns:repeat(2,minmax(0,1fr));}
 .split{grid-template-columns:1fr;gap:32px;}
 .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
 .search-box input{width:140px;}
}
@media (max-width:768px){
 .section{padding:52px 0;}
 .header-top{height:60px;gap:12px;}
 .brand-text em{display:none;}
 .search-box{display:none;}
 .nav-toggle{display:flex;}
 .channel-nav{display:none;}
 .channel-nav.open{display:block;}
 .channel-track{flex-wrap:wrap;padding:12px 20px;gap:8px;overflow-x:visible;}
 .channel{font-size:13.5px;padding:7px 15px;}
 .grid-2{grid-template-columns:1fr;}
 .cta-inner{flex-direction:column;align-items:flex-start;}
 .footer-grid{grid-template-columns:1fr;gap:28px;}
}
@media (max-width:560px){
 .container{padding:0 16px;}
 .hero{padding:44px 0 42px;}
 .hero .lead{font-size:14.5px;}
 .hero-actions .btn{width:100%;}
 .metric-strip{grid-template-columns:1fr;margin-top:28px;}
 .grid-3,.grid-4,.steps,.post-grid,.stat-row{grid-template-columns:1fr;}
 .card,.step,.quote{padding:22px 20px;}
 .faq-item{padding:20px 18px;}
 .faq-item p{padding-left:0;}
 .section-title{font-size:21px;}
 .footer-bottom{flex-direction:column;gap:8px;}
}

/* roulang page: category2 */
:root{
 --bg:#f4f7fb;
 --surface:#ffffff;
 --ink:#0b1220;
 --ink-soft:#3b4a5f;
 --muted:#6b7a90;
 --line:#e2e9f2;
 --line-strong:#cbd8e6;
 --brand:#0e7490;
 --brand-2:#0891b2;
 --brand-deep:#07222f;
 --brand-mid:#0b3c50;
 --accent:#f59e0b;
 --accent-2:#ffb020;
 --accent-soft:#fff5dc;
 --mint:#12b8a0;
 --radius:14px;
 --radius-sm:10px;
 --radius-lg:20px;
 --shadow-sm:0 2px 10px rgba(11,18,32,.06);
 --shadow-md:0 14px 34px rgba(11,18,32,.10);
 --shadow-lg:0 28px 64px rgba(7,34,47,.20);
 --container:1180px;
 --ff:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
 margin:0;font-family:var(--ff);font-size:15px;line-height:1.75;
 color:var(--ink-soft);background:var(--bg);
 -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:var(--brand);text-decoration:none;transition:color .2s ease,opacity .2s ease;}
a:hover{color:var(--brand-2);}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:800;line-height:1.35;letter-spacing:.2px;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
button,input{font-family:inherit;font-size:inherit;}
button{cursor:pointer;}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;border-radius:6px;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;}
/* ---------- buttons ---------- */
.btn{
 display:inline-flex;align-items:center;justify-content:center;gap:7px;
 padding:11px 22px;border-radius:8px;border:1px solid transparent;
 font-size:14.5px;font-weight:600;letter-spacing:.3px;
 transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease;
 min-height:42px;
}
.btn-primary{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;box-shadow:0 8px 20px rgba(8,145,178,.28);}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 26px rgba(8,145,178,.36);}
.btn-accent{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#3a2400;box-shadow:0 8px 20px rgba(245,158,11,.30);}
.btn-accent:hover{color:#3a2400;transform:translateY(-2px);box-shadow:0 14px 28px rgba(245,158,11,.38);}
.btn-ghost{background:transparent;color:#dff0f7;border-color:rgba(223,240,247,.42);}
.btn-ghost:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.10);transform:translateY(-2px);}
.btn-outline{background:#fff;color:var(--brand);border-color:var(--line-strong);}
.btn-outline:hover{color:var(--brand-2);border-color:var(--brand-2);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.btn-sm{padding:8px 16px;font-size:13.5px;min-height:36px;}
.btn-lg{padding:14px 30px;font-size:16px;min-height:50px;}
/* ---------- header ---------- */
.site-header{
 position:sticky;top:0;z-index:60;
 background:rgba(255,255,255,.94);
 backdrop-filter:blur(12px);
 -webkit-backdrop-filter:blur(12px);
 border-bottom:1px solid var(--line);
 transition:box-shadow .25s ease;
}
.site-header.scrolled{box-shadow:0 10px 28px rgba(11,18,32,.10);}
.header-top{
 display:flex;align-items:center;justify-content:space-between;gap:18px;
 height:64px;
}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;}
.brand-mark{
 width:38px;height:38px;border-radius:11px;
 display:grid;place-items:center;
 background:linear-gradient(140deg,var(--brand-2),var(--brand-deep));
 color:#fff;font-weight:800;font-size:17px;
 box-shadow:0 6px 16px rgba(8,58,80,.28);
}
.brand-text{display:flex;flex-direction:column;line-height:1.2;}
.brand-text strong{font-size:16.5px;color:var(--ink);font-weight:800;letter-spacing:.4px;}
.brand-text em{font-style:normal;font-size:11.5px;color:var(--muted);letter-spacing:1.4px;}
.header-tools{display:flex;align-items:center;gap:12px;}
.search-box{display:flex;align-items:center;background:#eef3f9;border:1px solid transparent;border-radius:999px;padding:4px 4px 4px 16px;transition:border-color .2s,background-color .2s;}
.search-box:focus-within{background:#fff;border-color:var(--brand-2);box-shadow:0 0 0 4px rgba(8,145,178,.12);}
.search-box input{border:0;background:transparent;outline:none;width:190px;font-size:13.5px;color:var(--ink);padding:4px 0;}
.search-box input::placeholder{color:#93a3b8;}
.search-box button{border:0;border-radius:999px;background:var(--brand);color:#fff;font-size:13px;padding:6px 15px;transition:background-color .2s;}
.search-box button:hover{background:var(--brand-2);}
.nav-toggle{
 display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line-strong);
 background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;
}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.channel-nav{border-top:1px solid var(--line);background:rgba(255,255,255,.72);}
.channel-track{display:flex;align-items:center;gap:8px;padding:9px 20px;overflow-x:auto;scrollbar-width:none;}
.channel-track::-webkit-scrollbar{display:none;}
.channel{
 display:inline-flex;align-items:center;white-space:nowrap;
 padding:8px 18px;border-radius:999px;font-size:14px;font-weight:600;
 color:var(--ink-soft);border:1px solid transparent;
 transition:background-color .2s,color .2s,border-color .2s;
}
.channel:hover{background:#eef4fa;color:var(--brand);}
.channel.active{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;box-shadow:0 6px 16px rgba(8,145,178,.26);}
/* ---------- hero stack ---------- */
.hero-stack{
 position:relative;overflow:hidden;color:#e6f2f8;
 padding:54px 0 64px;
 background:
 linear-gradient(112deg,rgba(6,26,38,.96) 0%,rgba(8,44,60,.92) 48%,rgba(8,72,96,.78) 100%),
 url('/assets/images/捕鱼大咖找这么半天_你又来个大破吞_.webp') center/cover no-repeat;
}
.hero-stack::after{
 content:"";position:absolute;inset:auto -10% -55% -10%;height:260px;
 background:radial-gradient(ellipse at center,rgba(18,184,160,.30),transparent 70%);
 pointer-events:none;
}
.stack-grid{display:grid;grid-template-columns:1.28fr .72fr;gap:28px;align-items:start;position:relative;z-index:2;}
.hero-main{
 background:rgba(255,255,255,.07);
 border:1px solid rgba(255,255,255,.16);
 border-radius:var(--radius-lg);
 padding:34px 34px 30px;
 box-shadow:var(--shadow-lg);
 backdrop-filter:blur(6px);
 -webkit-backdrop-filter:blur(6px);
}
.region-tag{
 display:inline-flex;align-items:center;gap:8px;
 padding:6px 15px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:1px;
 color:#9ce9dc;background:rgba(18,184,160,.14);border:1px solid rgba(18,184,160,.42);
}
.region-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(18,184,160,.20);}
.hero-main h1{margin-top:18px;font-size:clamp(25px,2.9vw,38px);line-height:1.32;color:#fff;}
.hero-main p.lead{margin-top:16px;font-size:15px;line-height:1.85;color:#c4d9e4;max-width:660px;}
.hero-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
.pill{
 display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;
 font-size:12.5px;font-weight:600;color:#bfe6f1;
 background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:26px;}
.hero-side{display:grid;gap:18px;padding-right:6px;}
.side-card{
 background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.6);
 border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);
 transition:transform .2s ease,box-shadow .2s ease;
}
.side-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(7,34,47,.28);}
.side-card img{width:100%;height:128px;object-fit:cover;}
.side-body{padding:15px 17px 17px;}
.side-body h3{font-size:14.5px;color:var(--ink);}
.side-body p{margin-top:7px;font-size:13px;line-height:1.7;color:var(--muted);}
.side-card.shift{transform:translateX(-26px);}
.side-card.shift:hover{transform:translateX(-26px) translateY(-3px);}
/* ---------- sections ---------- */
.section{padding:62px 0;}
.section-alt{background:#eef4fa;}
.section-dark{
 background:linear-gradient(160deg,var(--brand-deep) 0%,#0a3446 60%,#0b4258 100%);
 color:#c7dde7;
}
.section-head{max-width:740px;margin-bottom:32px;}
.eyebrow{
 display:inline-flex;align-items:center;gap:9px;
 font-size:12.5px;font-weight:700;letter-spacing:1.6px;color:var(--brand);
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--brand-2);}
.section-head h2{font-size:clamp(21px,2.3vw,29px);margin-top:12px;}
.section-head p{margin-top:12px;font-size:15px;line-height:1.8;color:var(--muted);}
.section-dark .section-head h2{color:#fff;}
.section-dark .section-head p{color:#a9c8d6;}
.section-dark .eyebrow{color:var(--mint);}
.section-dark .eyebrow::before{background:var(--mint);}
/* ---------- cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.card-grid.two{grid-template-columns:repeat(2,1fr);}
.info-card{
 background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 padding:24px;box-shadow:var(--shadow-sm);
 display:flex;flex-direction:column;gap:12px;
 transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.info-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-strong);}
.icon-box{
 width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
 background:linear-gradient(140deg,#e6f6fb,#d5ecf5);color:var(--brand);
 border:1px solid #cfe6f0;
}
.icon-box svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.info-card h3{font-size:16.5px;}
.info-card p{font-size:14px;line-height:1.8;color:var(--muted);}
.tag-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:6px;}
.tag{
 display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;
 font-size:12px;font-weight:600;color:var(--brand);background:#eaf6fa;border:1px solid #d3e9f2;
}
.tag.warm{color:#8a5a00;background:var(--accent-soft);border-color:#f3ddae;}
/* ---------- timeline ---------- */
.timeline{display:grid;gap:15px;}
.step{
 display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
 background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 padding:20px 22px;box-shadow:var(--shadow-sm);
 transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-strong);}
.step-num{
 width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
 background:linear-gradient(140deg,var(--accent-2),var(--accent));
 color:#3a2400;font-weight:800;font-size:15px;
 box-shadow:0 6px 14px rgba(245,158,11,.28);
}
.step h3{font-size:16px;}
.step p{margin-top:7px;font-size:14px;line-height:1.8;color:var(--muted);}
/* ---------- stats ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.stat-card{
 background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
 border-radius:var(--radius);padding:22px 20px;
 transition:background-color .2s ease,border-color .2s ease,transform .2s ease;
}
.stat-card:hover{background:rgba(255,255,255,.11);border-color:rgba(156,233,220,.5);transform:translateY(-3px);}
.stat-card strong{display:block;font-size:26px;font-weight:800;color:#fff;letter-spacing:.5px;}
.stat-card span{display:block;margin-top:6px;font-size:13px;color:#9fc3d2;line-height:1.65;}
.dark-note{margin-top:26px;padding:18px 22px;border-radius:var(--radius);border:1px dashed rgba(156,233,220,.4);background:rgba(18,184,160,.08);color:#bfe0ea;font-size:14px;line-height:1.8;}
/* ---------- compare ---------- */
.compare-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.compare-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);}
.compare-card h3{display:flex;align-items:center;gap:10px;font-size:16.5px;margin-bottom:14px;}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.dot.ok{background:var(--mint);box-shadow:0 0 0 4px rgba(18,184,160,.16);}
.dot.bad{background:#f97316;box-shadow:0 0 0 4px rgba(249,115,22,.16);}
.compare-card ul{display:grid;gap:11px;}
.compare-card li{position:relative;padding-left:20px;font-size:14px;line-height:1.8;color:var(--muted);}
.compare-card li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:2px;background:var(--line-strong);}
.compare-card.ok-card{border-top:3px solid var(--mint);}
.compare-card.bad-card{border-top:3px solid #f97316;}
/* ---------- channel matrix ---------- */
.matrix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.matrix-card{
 display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 padding:24px;box-shadow:var(--shadow-sm);
 transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.matrix-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand-2);color:inherit;}
.matrix-card .m-index{font-size:12.5px;font-weight:700;letter-spacing:1.6px;color:var(--brand-2);}
.matrix-card h3{margin-top:10px;font-size:17px;}
.matrix-card p{margin-top:9px;font-size:14px;line-height:1.78;color:var(--muted);}
.matrix-card .m-more{margin-top:14px;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--brand);}
.matrix-card:hover .m-more{color:var(--brand-2);}
/* ---------- news ---------- */
.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.news-card{
 background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 box-shadow:var(--shadow-sm);overflow:hidden;
 transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-strong);}
.news-card a{display:block;padding:22px 24px;color:inherit;}
.news-card a:hover{color:inherit;}
.news-card h3{font-size:16px;line-height:1.6;}
.news-card p{margin-top:9px;font-size:13.5px;line-height:1.78;color:var(--muted);}
.news-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;font-size:12.5px;color:#8497ab;}
.news-meta span{color:var(--brand);font-weight:600;}
.news-empty{
 padding:26px;border-radius:var(--radius);border:1px dashed var(--line-strong);
 background:#fff;color:var(--muted);font-size:14px;text-align:center;
}
/* ---------- faq ---------- */
.faq-list{display:grid;gap:14px;max-width:900px;}
.faq-item{
 background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;
}
.faq-item[open]{border-color:var(--line-strong);box-shadow:var(--shadow-md);}
.faq-item summary{
 list-style:none;cursor:pointer;padding:18px 52px 18px 22px;position:relative;
 font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.6;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
 content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;
 border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
 transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq-item .faq-body{padding:0 22px 20px;font-size:14px;line-height:1.85;color:var(--muted);}
/* ---------- cta ---------- */
.cta-band{
 border-radius:var(--radius-lg);padding:44px 40px;
 background:
 linear-gradient(120deg,rgba(6,26,38,.94),rgba(8,72,96,.86)),
 url('/assets/images/捕鱼大咖全新版本_新人登录就有亿万金币和极品炮台_快来领_.webp') center/cover no-repeat;
 color:#dceef5;box-shadow:var(--shadow-lg);
 display:grid;grid-template-columns:1.4fr .6fr;gap:28px;align-items:center;
}
.cta-band h2{color:#fff;font-size:clamp(21px,2.4vw,28px);}
.cta-band p{margin-top:12px;font-size:14.5px;line-height:1.85;color:#c2dae5;max-width:640px;}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.cta-side{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.cta-chip{
 display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;
 font-size:13px;font-weight:600;color:#d8f1ec;background:rgba(18,184,160,.16);
 border:1px solid rgba(18,184,160,.44);
}
/* ---------- footer ---------- */
.site-footer{background:var(--brand-deep);color:#a9c3cf;padding:56px 0 0;}
.footer-grid{
 display:grid;grid-template-columns:1.5fr .8fr .8fr;gap:36px;
 padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.footer-brand strong{color:#fff;font-size:16px;letter-spacing:.4px;}
.site-footer p{font-size:14px;line-height:1.85;color:#a9c3cf;}
.footer-col h4{color:#fff;font-size:14px;letter-spacing:1.2px;margin-bottom:14px;}
.footer-links{display:grid;gap:9px;}
.footer-links a{color:#a9c3cf;font-size:14px;transition:color .2s ease,padding-left .2s ease;}
.footer-links a:hover{color:#fff;padding-left:4px;}
.footer-bottom{
 display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
 padding:20px 0;font-size:13px;color:#7f9ead;
}
/* ---------- responsive ---------- */
@media (max-width:1024px){
 .stack-grid{grid-template-columns:1fr;gap:24px;}
 .hero-side{grid-template-columns:1fr 1fr;padding-right:0;}
 .side-card.shift{transform:none;}
 .side-card.shift:hover{transform:translateY(-3px);}
 .card-grid{grid-template-columns:repeat(2,1fr);}
 .matrix-grid{grid-template-columns:repeat(2,1fr);}
 .stat-grid{grid-template-columns:repeat(2,1fr);}
 .cta-band{grid-template-columns:1fr;padding:36px 28px;}
}
@media (max-width:768px){
 .search-box{display:none;}
 .header-cta{display:none;}
 .nav-toggle{display:flex;}
 .channel-nav{display:none;}
 .channel-nav.open{display:block;}
 .channel-track{flex-direction:column;align-items:stretch;gap:4px;padding:10px 16px 16px;overflow:visible;}
 .channel{width:100%;justify-content:flex-start;min-height:42px;}
 .section{padding:48px 0;}
 .hero-stack{padding:38px 0 46px;}
 .hero-main{padding:26px 22px;}
 .hero-side{grid-template-columns:1fr;}
 .card-grid,.card-grid.two,.compare-grid,.news-grid,.matrix-grid{grid-template-columns:1fr;}
 .footer-grid{grid-template-columns:1fr;gap:26px;}
 .footer-bottom{flex-direction:column;align-items:flex-start;}
}
@media (max-width:520px){
 .container{padding:0 16px;}
 .brand-text em{display:none;}
 .hero-main h1{font-size:24px;}
 .hero-actions .btn,.cta-actions .btn{width:100%;}
 .stat-grid{grid-template-columns:1fr;}
 .step{grid-template-columns:1fr;gap:12px;}
 .cta-band{padding:28px 20px;}
}

/* roulang page: category3 */
:root{
 --bg:#f4f7fb;
 --surface:#ffffff;
 --ink:#0b1220;
 --ink-soft:#3b4a5f;
 --muted:#6b7a90;
 --line:#e2e9f2;
 --line-strong:#cbd8e6;
 --brand:#0e7490;
 --brand-2:#0891b2;
 --brand-deep:#07222f;
 --brand-mid:#0b3c50;
 --accent:#f59e0b;
 --accent-2:#ffb020;
 --accent-soft:#fff5dc;
 --mint:#12b8a0;
 --radius:14px;
 --radius-sm:10px;
 --radius-lg:20px;
 --shadow-sm:0 2px 10px rgba(11,18,32,.06);
 --shadow-md:0 14px 34px rgba(11,18,32,.10);
 --shadow-lg:0 28px 64px rgba(7,34,47,.20);
 --container:1180px;
 --ff:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
 margin:0;
 font-family:var(--ff);
 font-size:15px;
 line-height:1.75;
 color:var(--ink-soft);
 background:var(--bg);
 -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{margin:0;color:var(--ink);font-weight:800;line-height:1.32;letter-spacing:.2px;}
p{margin:0;}
img{max-width:100%;display:block;}
a{color:var(--brand);text-decoration:none;transition:color .2s ease,opacity .2s ease;}
a:hover{color:var(--brand-2);}
ul,ol{margin:0;padding:0;list-style:none;}
button,input{font-family:inherit;font-size:inherit;}
button{cursor:pointer;}
:focus-visible{outline:3px solid rgba(8,145,178,.45);outline-offset:2px;border-radius:6px;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;}
/* buttons */
.btn{
 display:inline-flex;align-items:center;justify-content:center;gap:7px;
 padding:11px 22px;border-radius:8px;border:1px solid transparent;
 font-size:14.5px;font-weight:600;letter-spacing:.3px;
 transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease;
 min-height:42px;
}
.btn-primary{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;box-shadow:0 8px 20px rgba(8,145,178,.28);}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 26px rgba(8,145,178,.36);}
.btn-accent{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#3a2400;box-shadow:0 8px 20px rgba(245,158,11,.30);}
.btn-accent:hover{color:#3a2400;transform:translateY(-2px);box-shadow:0 14px 28px rgba(245,158,11,.38);}
.btn-ghost{background:transparent;color:#dff0f7;border-color:rgba(223,240,247,.42);}
.btn-ghost:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.10);transform:translateY(-2px);}
.btn-outline{background:#fff;color:var(--brand);border-color:var(--line-strong);}
.btn-outline:hover{color:var(--brand-2);border-color:var(--brand-2);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.btn-sm{padding:8px 16px;font-size:13.5px;min-height:36px;}
.btn-lg{padding:14px 30px;font-size:16px;min-height:50px;}
/* header */
.site-header{
 position:sticky;top:0;z-index:60;
 background:rgba(255,255,255,.94);
 backdrop-filter:blur(12px);
 -webkit-backdrop-filter:blur(12px);
 border-bottom:1px solid var(--line);
 transition:box-shadow .25s ease;
}
.site-header.scrolled{box-shadow:0 10px 28px rgba(11,18,32,.10);}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:18px;height:64px;}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;}
.brand-mark{
 width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
 background:linear-gradient(140deg,var(--brand-2),var(--brand-deep));
 color:#fff;font-weight:800;font-size:17px;
 box-shadow:0 6px 16px rgba(8,58,80,.28);flex:0 0 auto;
}
.brand-text{display:flex;flex-direction:column;line-height:1.2;}
.brand-text strong{font-size:16.5px;color:var(--ink);font-weight:800;letter-spacing:.4px;}
.brand-text em{font-style:normal;font-size:11.5px;color:var(--muted);letter-spacing:1.4px;}
.header-tools{display:flex;align-items:center;gap:12px;}
.search-box{display:flex;align-items:center;background:#eef3f9;border:1px solid transparent;border-radius:999px;padding:4px 4px 4px 16px;transition:border-color .2s,background-color .2s;}
.search-box:focus-within{background:#fff;border-color:var(--brand-2);box-shadow:0 0 0 4px rgba(8,145,178,.12);}
.search-box input{border:0;background:transparent;outline:none;width:190px;font-size:13.5px;color:var(--ink);padding:4px 0;}
.search-box input::placeholder{color:#93a3b8;}
.search-box button{border:0;border-radius:999px;background:var(--brand);color:#fff;font-size:13px;padding:6px 15px;transition:background-color .2s;}
.search-box button:hover{background:var(--brand-2);}
.nav-toggle{
 display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line-strong);
 background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;
}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.channel-nav{border-top:1px solid var(--line);background:rgba(255,255,255,.72);}
.channel-track{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;}
.channel-track::-webkit-scrollbar{display:none;}
.channel{
 display:inline-flex;align-items:center;height:46px;padding:0 16px;
 font-size:14px;font-weight:600;color:var(--ink-soft);
 border-bottom:2px solid transparent;white-space:nowrap;
 transition:color .2s,border-color .2s,background-color .2s;
}
.channel:hover{color:var(--brand);background:rgba(8,145,178,.06);}
.channel.active{color:var(--brand);border-bottom-color:var(--brand);}
/* category hero */
.cat-hero{
 position:relative;overflow:hidden;color:#e6f2f8;
 padding:56px 0 62px;
 background:
  linear-gradient(112deg,rgba(6,26,38,.96) 0%,rgba(8,44,60,.92) 48%,rgba(8,72,96,.76) 100%),
  url('/assets/images/捕鱼大咖全新版本_新人登录就有亿万金币和极品炮台_快来领_.webp') center/cover no-repeat;
}
.cat-hero::after{
 content:"";position:absolute;inset:auto -10% -70% -10%;height:240px;
 background:radial-gradient(ellipse at center,rgba(18,184,160,.28),transparent 72%);
 pointer-events:none;
}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .7fr;gap:44px;align-items:center;}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;color:#8fb4c4;margin-bottom:16px;}
.breadcrumbs a{color:#a8c9d6;}
.breadcrumbs a:hover{color:#fff;}
.breadcrumbs span{color:#6f96a8;}
.region-tag{
 display:inline-flex;align-items:center;gap:8px;
 padding:6px 15px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:1px;
 color:#9ce9dc;background:rgba(18,184,160,.14);border:1px solid rgba(18,184,160,.42);
}
.region-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(18,184,160,.20);}
.cat-hero h1{margin-top:18px;font-size:clamp(27px,3.2vw,40px);color:#fff;line-height:1.3;letter-spacing:.4px;}
.cat-hero .hero-sub{margin-top:16px;font-size:15.5px;line-height:1.85;color:#c4d9e4;max-width:640px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.pill{
 display:inline-flex;align-items:center;gap:6px;
 padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;
 color:#cdeaf3;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.20);
}
.hero-panel{
 background:rgba(255,255,255,.08);
 border:1px solid rgba(255,255,255,.20);
 border-radius:var(--radius-lg);
 padding:22px 22px 20px;
 backdrop-filter:blur(10px);
 -webkit-backdrop-filter:blur(10px);
 box-shadow:var(--shadow-lg);
}
.hero-panel h2{font-size:15.5px;color:#fff;letter-spacing:.5px;}
.hero-panel .panel-hint{font-size:12.5px;color:#9fc0ce;margin-top:6px;}
.panel-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.16);font-size:13.5px;color:#c6dbe6;}
.panel-row:last-of-type{border-bottom:0;}
.panel-row strong{color:#fff;font-weight:700;font-size:14px;}
.countdown-strip{display:flex;gap:8px;margin-top:14px;}
.countdown-cell{
 flex:1;text-align:center;padding:10px 4px;border-radius:10px;
 background:rgba(18,184,160,.14);border:1px solid rgba(18,184,160,.34);
}
.countdown-cell b{display:block;font-size:19px;color:#fff;line-height:1.2;}
.countdown-cell span{font-size:11px;color:#8fbfcd;letter-spacing:.5px;}
/* sections */
.section{padding:64px 0;}
.section-tone{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-dark{
 background:linear-gradient(160deg,var(--brand-deep) 0%,var(--brand-mid) 100%);
 color:#c5dae5;
}
.section-head{max-width:760px;margin-bottom:34px;}
.eyebrow{
 display:inline-flex;align-items:center;gap:8px;
 font-size:12.5px;font-weight:700;letter-spacing:1.6px;color:var(--brand);
 text-transform:uppercase;
}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--brand-2);}
.section-head h2{margin-top:12px;font-size:clamp(22px,2.4vw,30px);}
.section-head p{margin-top:12px;font-size:14.5px;line-height:1.85;color:var(--muted);}
.section-dark .eyebrow{color:#7fded0;}
.section-dark .eyebrow::before{background:#7fded0;}
.section-dark .section-head h2{color:#fff;}
.section-dark .section-head p{color:#a9c6d4;}
/* grids */
.grid{display:grid;gap:20px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
/* cards */
.card{
 background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 box-shadow:var(--shadow-sm);overflow:hidden;
 transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
 display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-strong);}
.card-thumb{aspect-ratio:16/9;overflow:hidden;background:#dbe6ef;}
.card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.card:hover .card-thumb img{transform:scale(1.04);}
.card-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1;}
.card-body h3{font-size:16.5px;}
.card-body p{font-size:14px;line-height:1.78;color:var(--muted);}
.tag{
 display:inline-flex;align-items:center;
 padding:3px 11px;border-radius:999px;font-size:12px;font-weight:700;
 background:var(--accent-soft);color:#8a5a00;border:1px solid rgba(245,158,11,.28);
}
.tag-mint{background:rgba(18,184,160,.12);color:#0b7a6b;border-color:rgba(18,184,160,.3);}
.tag-blue{background:rgba(8,145,178,.10);color:#0b6b83;border-color:rgba(8,145,178,.28);}
/* split block */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:center;}
.split-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.split-text h2{font-size:clamp(21px,2.3vw,28px);}
.split-text > p{margin-top:14px;font-size:14.5px;line-height:1.85;color:var(--muted);}
.check-list{margin-top:22px;display:grid;gap:2px;}
.check-list li{
 display:flex;gap:12px;padding:13px 0;border-bottom:1px dashed var(--line);
 font-size:14px;line-height:1.75;color:var(--ink-soft);
}
.check-list li:last-child{border-bottom:0;}
.check-list li::before{
 content:"";flex:0 0 auto;width:18px;height:18px;margin-top:4px;border-radius:50%;
 background:rgba(18,184,160,.16);
 box-shadow:inset 0 0 0 3px rgba(18,184,160,.42);
}
.check-list strong{color:var(--ink);}
/* dark stats */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.stat{
 background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
 border-radius:var(--radius);padding:22px 20px;
 transition:transform .2s ease,border-color .2s ease,background-color .2s ease;
}
.stat:hover{transform:translateY(-3px);border-color:rgba(127,222,208,.55);background:rgba(255,255,255,.09);}
.stat b{display:block;font-size:26px;color:#fff;line-height:1.2;}
.stat span{display:block;margin-top:8px;font-size:13px;color:#a9c6d4;}
.dark-list{margin-top:26px;display:grid;gap:14px;}
.dark-list li{
 display:flex;gap:14px;padding:16px 18px;border-radius:var(--radius-sm);
 background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
 font-size:14px;line-height:1.8;color:#bfd6e1;
}
.dark-list li b{color:#fff;display:block;margin-bottom:4px;font-size:14.5px;}
.dark-list .num{
 flex:0 0 auto;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
 background:rgba(18,184,160,.20);color:#9ce9dc;font-weight:800;font-size:13px;
}
/* news list */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.news-card{
 display:flex;flex-direction:column;gap:10px;
 background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 padding:20px;box-shadow:var(--shadow-sm);color:inherit;
 transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-strong);color:inherit;}
.news-card h3{font-size:16px;line-height:1.55;}
.news-card p{
 font-size:13.5px;line-height:1.75;color:var(--muted);
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.news-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:#93a3b8;}
.empty-note{
 padding:22px;border:1px dashed var(--line-strong);border-radius:var(--radius);
 font-size:14px;color:var(--muted);background:#fff;
}
.news-foot{margin-top:28px;}
/* faq */
.faq{display:grid;gap:12px;max-width:920px;}
.faq details{
 background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 box-shadow:var(--shadow-sm);padding:0 20px;
 transition:border-color .2s ease,box-shadow .2s ease;
}
.faq details:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md);}
.faq summary{
 cursor:pointer;list-style:none;padding:17px 0;
 display:flex;align-items:center;justify-content:space-between;gap:16px;
 font-size:15px;font-weight:700;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
 content:"+";font-size:19px;font-weight:700;color:var(--brand);
 width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
 background:rgba(8,145,178,.10);transition:transform .2s ease,background-color .2s ease;
 flex:0 0 auto;
}
.faq details[open] summary::after{content:"−";background:rgba(8,145,178,.18);}
.faq .answer{padding:0 0 18px;font-size:14px;line-height:1.85;color:var(--muted);}
/* cta */
.cta-band{
 background:linear-gradient(120deg,var(--brand) 0%,var(--brand-deep) 100%);
 color:#e6f2f8;padding:56px 0;
}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.cta-inner h2{color:#fff;font-size:clamp(21px,2.3vw,28px);max-width:640px;}
.cta-inner p{margin-top:12px;font-size:14.5px;color:#b9d6e2;max-width:640px;}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;}
/* footer */
.site-footer{background:#071c26;color:#a9c0cd;padding-top:56px;}
.footer-grid{
 display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:38px;
 padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.10);
}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.footer-brand strong{color:#fff;font-size:16.5px;letter-spacing:.4px;}
.site-footer p{font-size:13.5px;line-height:1.85;color:#93aeba;max-width:420px;}
.footer-col h4{color:#fff;font-size:14.5px;margin-bottom:14px;letter-spacing:.4px;}
.footer-links{display:grid;gap:10px;}
.footer-links a{color:#a9c0cd;font-size:13.5px;transition:color .2s,transform .2s;}
.footer-links a:hover{color:#fff;transform:translateX(3px);}
.footer-bottom{
 display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
 padding:20px 0;font-size:12.5px;color:#7f9aa8;
}
/* responsive */
@media (max-width:1024px){
 .hero-inner{grid-template-columns:1fr;gap:32px;}
 .split{grid-template-columns:1fr;gap:30px;}
 .grid-4{grid-template-columns:repeat(2,1fr);}
 .grid-3{grid-template-columns:repeat(2,1fr);}
 .news-grid{grid-template-columns:repeat(2,1fr);}
 .stat-grid{grid-template-columns:repeat(3,1fr);}
 .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
 .nav-toggle{display:flex;}
 .search-box{display:none;}
 .header-cta{display:none;}
 .channel-nav{display:none;}
 .channel-nav.open{display:block;background:#fff;}
 .channel-track{flex-direction:column;align-items:stretch;gap:2px;padding:10px 20px 16px;overflow:visible;}
 .channel{height:auto;padding:11px 12px;border-bottom:0;border-radius:8px;}
 .channel.active{background:rgba(8,145,178,.10);}
}
@media (max-width:768px){
 .section{padding:48px 0;}
 .cat-hero{padding:42px 0 50px;}
 .grid-3,.grid-4,.news-grid,.stat-grid{grid-template-columns:1fr;}
 .footer-grid{grid-template-columns:1fr;gap:28px;}
 .cta-inner{flex-direction:column;align-items:flex-start;}
 .hero-panel{padding:18px;}
 .countdown-cell b{font-size:17px;}
}
@media (max-width:520px){
 .container{padding:0 16px;}
 .brand-text em{display:none;}
 .brand-text strong{font-size:15px;}
 .cat-hero h1{font-size:24px;}
 .cat-hero .hero-sub{font-size:14.5px;}
 .btn{width:100%;}
 .hero-actions,.cta-actions{width:100%;}
 .btn-lg{padding:13px 20px;}
 .card-body{padding:16px 16px 20px;}
 .news-card{padding:16px;}
 .footer-bottom{flex-direction:column;align-items:flex-start;}
}

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}