/* roulang page: index */
:root{
  --base:#0C0B0F;
  --surface:#16141B;
  --surface-2:#201D26;
  --footer:#08070A;
  --primary:#E4763C;
  --primary-hi:#EE854F;
  --primary-soft:rgba(228,118,60,0.14);
  --secondary:#1F4A3F;
  --ink:#F5F1EA;
  --ink-2:#A9A2A0;
  --ink-3:#6E6870;
  --line:rgba(245,241,234,0.08);
  --line-hi:rgba(228,118,60,0.6);
  --r-sm:2px;
  --r:4px;
  --r-lg:6px;
  --shadow:0 20px 44px -30px rgba(0,0,0,0.95);
  --sec-y:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--base);
  color:var(--ink);
  font-family:'Noto Sans SC','思源黑体','PingFang SC','Microsoft YaHei',sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-0.02em;font-weight:800;color:var(--ink)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
::selection{background:rgba(228,118,60,0.35)}

/* 容器 */
.container-site{width:100%;max-width:1200px;margin:0 auto;padding-left:20px;padding-right:20px}

/* 胶片颗粒与暗角 */
.grain-layer{
  position:fixed;inset:0;pointer-events:none;z-index:60;opacity:0.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(/%23n)' opacity='0.65'/></svg>");
}
.vignette::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(0,0,0,0.55) 100%);
}

/* 顶部导航 */
.site-header{
  position:sticky;top:0;z-index:50;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .28s ease,border-color .28s ease,backdrop-filter .28s ease;
}
.site-header.is-stuck{
  background:rgba(12,11,15,0.9);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.header-inner{display:flex;align-items:center;gap:20px;padding-top:16px;padding-bottom:16px}
.brand{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.brand-mark{width:12px;height:12px;background:var(--primary);box-shadow:0 0 0 4px rgba(228,118,60,0.16)}
.brand-text{font-size:20px;font-weight:900;letter-spacing:0.06em}
.main-nav{display:none;align-items:center;gap:4px;margin-left:8px}
.main-nav a{
  padding:8px 12px;font-size:14px;color:var(--ink-2);border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.main-nav a:hover{color:var(--ink)}
.main-nav a.active{color:var(--ink);border-bottom-color:var(--primary)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:38px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;
}
.nav-toggle span{display:block;width:16px;height:1px;background:var(--ink);box-shadow:0 5px 0 var(--ink),0 -5px 0 var(--ink)}
.header-steps{border-top:1px solid var(--line);background:rgba(8,7,10,0.6)}
.steps-inner{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none}
.steps-inner::-webkit-scrollbar{display:none}
.pstep{
  position:relative;display:flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:12px 18px 12px 0;font-size:13px;color:var(--ink-3);white-space:nowrap;
}
.pstep .dot{
  font-size:12px;font-weight:700;letter-spacing:0.08em;font-variant-numeric:tabular-nums;
  border:1px solid var(--line);padding:2px 7px;border-radius:var(--r-sm);
}
.pstep::after{content:"";position:absolute;left:0;right:18px;bottom:6px;height:1px;background:var(--line)}
.pstep:hover{color:var(--ink-2)}
.pstep.is-active{color:var(--primary)}
.pstep.is-active .dot{border-color:var(--line-hi);background:var(--primary-soft);color:var(--primary)}
.pstep.is-active::after{background:var(--primary)}
.mobile-nav{display:none;flex-direction:column;border-top:1px solid var(--line);background:rgba(12,11,15,0.97);padding:8px 20px 16px}
.mobile-nav.is-open{display:flex}
.mobile-nav a{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.mobile-nav a:last-child{border-bottom:0}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--r);border:1px solid transparent;
  font-size:15px;font-weight:600;letter-spacing:0.01em;cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
}
.btn-primary{background:var(--primary);color:#150A05}
.btn-primary:hover{background:var(--primary-hi);transform:translateY(1px)}
.btn-ghost{border-color:rgba(245,241,234,0.2);color:var(--ink);background:transparent}
.btn-ghost:hover{background:rgba(245,241,234,0.08)}
.btn-sm{padding:9px 16px;font-size:14px}

/* 标签 */
.tag{
  display:inline-block;padding:5px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:13px;color:var(--ink-2);background:rgba(245,241,234,0.03);
}
.tag-primary{border-color:var(--line-hi);color:var(--primary);background:var(--primary-soft)}

/* 首屏 */
.hero{position:relative;overflow:hidden;isolation:isolate}
.letterbox{position:absolute;left:0;right:0;height:8px;background:#000;z-index:6}
.letterbox-top{top:0}
.letterbox-bottom{bottom:0}
.hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center 30%;
  filter:grayscale(0.25) contrast(1.05);
}
.hero-mask{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(12,11,15,0.72) 0%, rgba(12,11,15,0.66) 45%, rgba(12,11,15,0.95) 100%);
}
.hero-glow{
  position:absolute;inset:0;
  background:radial-gradient(60% 48% at 22% 32%, rgba(228,118,60,0.22) 0%, rgba(228,118,60,0) 72%);
}
.hero-inner{
  position:relative;z-index:5;display:grid;gap:36px;
  padding-top:64px;padding-bottom:72px;
}
.hero-copy{max-width:44rem}
.hero-kicker{
  display:inline-block;margin:0 0 18px;padding:5px 12px;border:1px solid var(--line-hi);
  border-radius:var(--r-sm);color:var(--primary);font-size:13px;font-weight:700;letter-spacing:0.16em;
}
.hero-title{font-size:32px;font-weight:900;line-height:1.14;letter-spacing:-0.02em;margin-bottom:16px}
.hero-sub{font-size:17px;color:var(--ink);font-weight:500;margin-bottom:16px}
.hero-intro{font-size:16px;color:var(--ink-2);max-width:62ch;margin-bottom:22px}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-visual{position:relative;max-width:320px}
.hero-poster{
  position:relative;margin:0;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
}
.hero-poster img{width:100%;aspect-ratio:2/3;object-fit:cover}
.hero-poster figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 14px 12px;font-size:13px;color:var(--ink-2);
  background:linear-gradient(to top,rgba(12,11,15,1) 12%,rgba(12,11,15,0.65) 62%,rgba(12,11,15,0));
}
.hero-stat{
  margin-top:14px;display:flex;align-items:baseline;gap:10px;
  border-left:2px solid var(--primary);padding-left:12px;
}
.hero-stat b{font-size:26px;font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.hero-stat span{font-size:13px;color:var(--ink-3)}

/* 板块通用 */
.section{position:relative;padding:var(--sec-y) 0}
.section-line{border-top:1px solid var(--line)}
.section-line::before{
  content:"";position:absolute;top:-4px;left:20px;width:8px;height:8px;background:var(--primary);
}
.sec-head{margin-bottom:36px}
.kicker{
  font-size:13px;font-weight:700;letter-spacing:0.2em;color:var(--primary);
  text-transform:uppercase;margin-bottom:12px;
}
.sec-title{font-size:24px;font-weight:800;margin-bottom:12px}
.sec-sub{font-size:15px;color:var(--ink-2);max-width:62ch}
.sec-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.sec-link{font-size:14px;color:var(--primary);border-bottom:1px solid rgba(228,118,60,0.4);padding-bottom:2px}
.sec-link:hover{color:var(--primary-hi);border-bottom-color:var(--primary-hi)}

/* 卡片通用 */
.card{
  position:relative;display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--primary);
  transform:scaleX(0);transform-origin:left;transition:transform .28s ease;z-index:3;
}
.card:hover{transform:translateY(-4px);border-color:rgba(228,118,60,0.45);box-shadow:var(--shadow)}
.card:hover::before{transform:scaleX(1)}

/* 痛点 */
.pain-grid{display:grid;grid-template-columns:1fr;gap:16px}
.pain-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;transition:transform .25s ease,border-color .25s ease;
}
.pain-card:hover{transform:translateY(-4px);border-color:rgba(228,118,60,0.4)}
.pain-icon{width:34px;height:34px;margin-bottom:16px}
.pain-icon rect,.pain-icon circle,.pain-icon line{fill:none;stroke:var(--primary);stroke-width:1.4}
.pain-card h3{font-size:19px;margin-bottom:10px}
.pain-card p{font-size:15px;color:var(--ink-2)}
.pain-card-lg h3{font-size:22px}
.pain-card-lg{padding:28px}

/* 交替图文 */
.alt-row{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;margin-bottom:48px}
.alt-row:last-child{margin-bottom:0}
.alt-media{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
}
.alt-media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.alt-body h3{font-size:22px;margin-bottom:12px}
.alt-body p{color:var(--ink-2);font-size:16px;margin-bottom:18px}
.alt-index{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:0.2em;color:var(--primary);margin-bottom:10px;
}

/* 四步法时间轴 */
.steps-line{position:relative;display:grid;grid-template-columns:1fr;gap:16px}
.step-card{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;transition:border-color .25s ease,transform .25s ease;
}
.step-card:hover{border-color:rgba(228,118,60,0.45);transform:translateY(-4px)}
.step-num{
  font-size:40px;font-weight:900;color:var(--primary);line-height:1;font-variant-numeric:tabular-nums;
  letter-spacing:-0.03em;margin-bottom:14px;
}
.step-card h3{font-size:20px;margin-bottom:10px}
.step-card p{font-size:15px;color:var(--ink-2);margin-bottom:14px}
.step-time{font-size:13px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:12px;display:block}

/* 数据带 */
.data-band{background:var(--secondary);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.data-band .kicker{color:#F0C8A8}
.data-band .sec-title{color:var(--ink)}
.data-band .sec-sub{color:rgba(245,241,234,0.75)}
.data-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.stat{background:rgba(8,7,10,0.32);border:1px solid rgba(245,241,234,0.12);border-radius:var(--r-lg);padding:22px}
.stat-num{font-size:36px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-0.03em;color:var(--ink)}
.stat-unit{font-size:15px;font-weight:700;color:#F0C8A8;margin-left:4px}
.stat-label{font-size:14px;color:rgba(245,241,234,0.82);margin-top:8px}
.stat-note{font-size:12px;color:rgba(245,241,234,0.55);margin-top:10px;border-top:1px solid rgba(245,241,234,0.12);padding-top:10px}

/* 证言 */
.voice-grid{display:grid;grid-template-columns:1fr;gap:16px}
.voice-card{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
}
.voice-card::before{
  content:"“";position:absolute;top:6px;right:18px;font-size:76px;line-height:1;
  color:rgba(228,118,60,0.22);font-weight:900;
}
.voice-card blockquote{margin:0 0 18px;font-size:16px;color:var(--ink);line-height:1.8}
.voice-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--ink-3)}
.voice-meta strong{color:var(--ink-2);font-weight:700}

/* 适用人群 */
.aud-grid{display:grid;grid-template-columns:1fr;gap:16px}
.aud-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;transition:transform .25s ease,border-color .25s ease}
.aud-card:hover{transform:translateY(-4px);border-color:rgba(228,118,60,0.4)}
.aud-card h3{font-size:19px;margin:14px 0 10px}
.aud-fit{font-size:15px;color:var(--ink-2);margin-bottom:12px}
.aud-unfit{font-size:13px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:12px}

/* 专题条带 */
.rail-wrap{position:relative}
.topic-rail{
  display:flex;gap:16px;overflow-x:auto;padding-bottom:14px;
  scrollbar-width:thin;scrollbar-color:rgba(228,118,60,0.6) transparent;
}
.topic-rail::-webkit-scrollbar{height:6px}
.topic-rail::-webkit-scrollbar-thumb{background:rgba(228,118,60,0.5);border-radius:999px}
.topic-rail::-webkit-scrollbar-track{background:rgba(245,241,234,0.05)}
.topic-card{flex:0 0 210px;max-width:210px}
.pcard{display:block}
.pcard-img{position:relative;overflow:hidden;background:#000}
.pcard-img img{width:100%;aspect-ratio:2/3;object-fit:cover;transition:transform .4s ease}
.card:hover .pcard-img img{transform:scale(1.03)}
.pcard-body{
  position:absolute;left:0;right:0;bottom:0;padding:14px 12px 12px;
  background:linear-gradient(to top,rgba(12,11,15,1) 14%,rgba(12,11,15,0.7) 60%,rgba(12,11,15,0));
}
.pcard-title{font-size:15px;font-weight:700;line-height:1.45;margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard-meta{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pcard-tags{margin-top:10px}

/* 热榜 */
.rank-list{border-top:1px solid var(--line)}
.rank-item{
  display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--line);transition:background .2s ease;
}
.rank-item:hover{background:rgba(245,241,234,0.03)}
.rank-no{font-size:22px;font-weight:900;color:var(--primary);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.rank-main h3{font-size:17px;margin-bottom:8px}
.rank-main p{font-size:14px;color:var(--ink-2);margin:0}
.rank-bar{margin-top:10px;height:3px;background:rgba(245,241,234,0.08);border-radius:1px;overflow:hidden}
.rank-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),rgba(228,118,60,0.35))}
.rank-meta{font-size:12px;color:var(--ink-3);margin-top:8px;display:block}

/* 资讯 */
.news-grid{display:grid;grid-template-columns:1fr;gap:16px}
.news-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .25s ease,border-color .25s ease}
.news-card:hover{transform:translateY(-4px);border-color:rgba(228,118,60,0.42)}
.news-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.news-body{padding:20px}
.news-meta{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-bottom:10px;display:block}
.news-body h3{font-size:17px;margin-bottom:10px;line-height:1.45}
.news-body p{font-size:14px;color:var(--ink-2);margin:0}
.news-card-lg .news-body h3{font-size:21px}

/* 指标条 */
.metric-list{display:grid;gap:18px}
.metric-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:baseline}
.metric-name{font-size:15px;color:var(--ink)}
.metric-val{font-size:15px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}
.metric-track{grid-column:1 / -1;height:6px;background:rgba(245,241,234,0.07);border-radius:1px;overflow:hidden;margin-top:8px}
.metric-fill{display:block;height:100%;background:linear-gradient(90deg,var(--primary),rgba(228,118,60,0.4))}
.metric-note{font-size:12px;color:var(--ink-3);margin-top:18px}

/* 对比表 */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
.cmp-table{width:100%;border-collapse:collapse;min-width:640px;background:var(--surface)}
.cmp-table th,.cmp-table td{padding:16px 18px;text-align:left;font-size:15px;border-bottom:1px solid var(--line)}
.cmp-table thead th{background:var(--secondary);color:var(--ink);font-weight:700;font-size:14px;letter-spacing:0.04em}
.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table tbody tr:hover{background:rgba(245,241,234,0.03)}
.cmp-table td:first-child{color:var(--ink);font-weight:600}
.cmp-table td{color:var(--ink-2)}

/* 场景标签 */
.scene-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.scene-chip{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  font-size:15px;transition:border-color .2s ease,transform .2s ease,background .2s ease;
}
.scene-chip:hover{border-color:rgba(228,118,60,0.5);transform:translateY(-4px);background:var(--surface-2)}
.scene-chip span.arrow{color:var(--primary);font-size:14px}

/* FAQ */
.faq-list{display:grid;gap:10px;max-width:900px}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq-item[open]{border-color:rgba(228,118,60,0.38)}
.faq-item summary{
  cursor:pointer;padding:18px 20px;font-size:16px;font-weight:600;color:var(--ink);
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--primary);font-size:20px;font-weight:400;flex:0 0 auto}
.faq-item[open] summary::after{content:"−"}
.faq-item .faq-body{
  border-left:2px solid var(--primary);margin:0 20px 20px;padding-left:16px;
  font-size:15px;color:var(--ink-2);
}

/* 自测 */
.check-list{display:grid;gap:10px;max-width:820px}
.check-item{
  display:flex;align-items:flex-start;gap:12px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;
  font-size:15px;color:var(--ink-2);transition:border-color .2s ease,color .2s ease;
}
.check-item:hover{border-color:rgba(228,118,60,0.4)}
.check-item input{
  appearance:none;width:18px;height:18px;flex:0 0 auto;margin-top:3px;
  border:1px solid rgba(245,241,234,0.3);border-radius:var(--r-sm);background:transparent;cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.check-item input:checked{background:var(--primary);border-color:var(--primary)}
.check-item:has(input:checked){color:var(--ink);border-color:rgba(228,118,60,0.45)}
.check-result{
  margin-top:20px;max-width:820px;padding:18px 20px;border:1px solid var(--line-hi);
  border-radius:var(--r);background:var(--primary-soft);font-size:15px;color:var(--ink);
}

/* 订阅与收口 */
.join-band{
  position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--surface);
}
.join-glow{
  position:absolute;inset:0;
  background:radial-gradient(55% 70% at 70% 40%, rgba(228,118,60,0.26) 0%, rgba(228,118,60,0) 70%);
}
.join-inner{position:relative;z-index:2;display:grid;gap:32px;padding-top:56px;padding-bottom:56px}
.join-text h2{font-size:24px;margin-bottom:12px}
.join-text p{color:var(--ink-2);font-size:15px;max-width:56ch}
.join-form{display:grid;gap:12px;max-width:520px}
.field{display:grid;gap:8px}
.field label{font-size:13px;color:var(--ink-3);letter-spacing:0.04em}
.field input,.field select{
  width:100%;padding:12px 14px;background:var(--base);border:1px solid var(--line);
  border-radius:var(--r);color:var(--ink);font-size:15px;transition:border-color .2s ease;
}
.field input::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus{border-color:var(--primary);outline:none}
.form-hint{font-size:13px;color:var(--ink-3)}
.final-cta{
  position:relative;overflow:hidden;background:var(--secondary);border-top:1px solid var(--line);
}
.final-cta .glow{
  position:absolute;inset:0;background:radial-gradient(50% 90% at 50% 50%, rgba(228,118,60,0.35) 0%, rgba(228,118,60,0) 72%);
}
.final-inner{position:relative;z-index:2;text-align:center;padding:64px 0}
.final-inner h2{font-size:26px;margin-bottom:14px}
.final-inner p{color:rgba(245,241,234,0.82);max-width:56ch;margin:0 auto 24px;font-size:16px}

/* 页脚 */
.site-footer{
  position:relative;background:var(--footer);border-top:1px solid var(--line);
  color:var(--ink-2);font-size:14px;
}
.footer-grid{display:grid;grid-template-columns:1fr;gap:32px;padding:56px 0 36px}
.footer-brand h3{font-size:20px;letter-spacing:0.05em;margin-bottom:12px}
.footer-brand p{font-size:14px;color:var(--ink-3);max-width:36ch}
.footer-col h4{font-size:14px;letter-spacing:0.1em;color:var(--ink);margin-bottom:14px;text-transform:uppercase}
.footer-col a,.footer-col li{display:block;font-size:14px;color:var(--ink-2);padding:5px 0;transition:color .2s ease}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);padding:20px 0 28px;font-size:13px;color:var(--ink-3);
}

/* 响应式 */
@media (min-width:640px){
  .pain-grid{grid-template-columns:repeat(2,1fr)}
  .voice-grid{grid-template-columns:repeat(2,1fr)}
  .scene-grid{grid-template-columns:repeat(3,1fr)}
  .hero-title{font-size:40px}
}
@media (min-width:768px){
  :root{--sec-y:80px}
  .container-site{padding-left:24px;padding-right:24px}
  .sec-title{font-size:30px}
  .hero-inner{grid-template-columns:1fr 300px;align-items:center;padding-top:80px;padding-bottom:88px}
  .hero-title{font-size:48px}
  .alt-row{grid-template-columns:1fr 1fr;gap:40px}
  .alt-row.is-reverse .alt-media{order:2}
  .alt-row.is-reverse .alt-body{order:1}
  .aud-grid{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .news-card-lg{grid-column:span 1}
  .join-inner{grid-template-columns:1.1fr 1fr;align-items:center}
}
@media (min-width:1024px){
  :root{--sec-y:110px}
  .container-site{padding-left:40px;padding-right:40px}
  .main-nav{display:flex}
  .nav-toggle{display:none}
  .hero-title{font-size:56px}
  .sec-title{font-size:34px}
  .pain-grid{grid-template-columns:repeat(6,1fr)}
  .pain-card-lg{grid-column:span 3}
  .pain-card:not(.pain-card-lg){grid-column:span 3}
  .data-grid{grid-template-columns:repeat(4,1fr)}
  .voice-grid{grid-template-columns:repeat(3,1fr)}
  .steps-line{grid-template-columns:repeat(4,1fr)}
  .aud-grid{grid-template-columns:repeat(4,1fr)}
  .scene-grid{grid-template-columns:repeat(4,1fr)}
  .news-grid{grid-template-columns:2fr 1fr 1fr 1fr}
  .news-card-lg .news-body h3{font-size:23px}
  .topic-card{flex:0 0 230px;max-width:230px}
}
@media (min-width:1280px){
  :root{--sec-y:132px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}

/* roulang page: category1 */
:root{
  --base:#0C0B0F;
  --surface:#16141B;
  --surface-2:#201D26;
  --footer:#08070A;
  --primary:#E4763C;
  --primary-hi:#EE854F;
  --primary-soft:rgba(228,118,60,0.14);
  --secondary:#1F4A3F;
  --ink:#F5F1EA;
  --ink-2:#A9A2A0;
  --ink-3:#6E6870;
  --line:rgba(245,241,234,0.08);
  --line-hi:rgba(228,118,60,0.6);
  --r-sm:2px;
  --r:4px;
  --r-lg:6px;
  --shadow:0 20px 44px -30px rgba(0,0,0,0.95);
  --sec-y:64px;
}
@media (min-width:768px){ :root{ --sec-y:80px } }
@media (min-width:1024px){ :root{ --sec-y:100px } }
@media (min-width:1280px){ :root{ --sec-y:112px } }

/* 基础 reset */
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--base);
  color:var(--ink);
  font-family:'Noto Sans SC','思源黑体','PingFang SC','Microsoft YaHei',sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
h1,h2,h3,h4,p,figure,ul,ol{ margin:0; padding:0 }
ul,ol{ list-style:none }
button{ background:none; border:0; cursor:pointer }

/* 胶片颗粒 */
.grain{
  position:fixed; inset:0; z-index:9; pointer-events:none; opacity:0.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(/%23n)' opacity='0.55'/></svg>");
}

/* 容器 */
.container-site{ width:100%; max-width:1200px; margin:0 auto; padding-left:20px; padding-right:20px }
@media (min-width:768px){ .container-site{ padding-left:24px; padding-right:24px } }
@media (min-width:1024px){ .container-site{ padding-left:40px; padding-right:40px } }

/* 顶部导航 */
.site-header{
  position:sticky; top:0; z-index:50;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .28s ease,border-color .28s ease,backdrop-filter .28s ease;
}
.site-header.is-stuck{
  background:rgba(12,11,15,0.9);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.header-inner{ display:flex; align-items:center; gap:20px; padding-top:16px; padding-bottom:16px }
.brand{ display:inline-flex; align-items:center; gap:10px; flex:0 0 auto }
.brand-mark{ width:12px; height:12px; background:var(--primary); box-shadow:0 0 0 4px rgba(228,118,60,0.16) }
.brand-text{ font-size:20px; font-weight:900; letter-spacing:0.06em }
.main-nav{ display:none; align-items:center; gap:4px; margin-left:8px }
.main-nav a{
  padding:8px 12px; font-size:14px; color:var(--ink-2);
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.main-nav a:hover{ color:var(--ink) }
.main-nav a.active{ color:var(--ink); border-bottom-color:var(--primary) }
.header-actions{ margin-left:auto; display:flex; align-items:center; gap:10px }
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:38px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);
}
.nav-toggle span{ display:block; width:16px; height:1px; background:var(--ink); box-shadow:0 5px 0 var(--ink),0 -5px 0 var(--ink) }
.header-steps{ border-top:1px solid var(--line); background:rgba(8,7,10,0.6) }
.progress-steps{
  display:flex; align-items:center; gap:6px; padding:10px 0;
  overflow-x:auto; scrollbar-width:none;
}
.progress-steps::-webkit-scrollbar{ display:none }
.step{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:6px 10px; border-radius:var(--r);
  font-size:13px; color:var(--ink-3);
  border:1px solid transparent;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.step i{ font-style:normal; font-variant-numeric:tabular-nums; letter-spacing:0.14em; font-size:12px }
.step:hover{ color:var(--ink-2); background:rgba(245,241,234,0.05) }
.step.is-active{ color:var(--primary); border-color:var(--line-hi); background:var(--primary-soft) }
.step-line{ flex:1 0 16px; height:1px; background:var(--line); min-width:16px }
.mobile-nav{
  display:none; flex-direction:column;
  border-top:1px solid var(--line);
  background:rgba(12,11,15,0.97);
  padding:8px 20px 16px;
}
.mobile-nav.is-open{ display:flex }
.mobile-nav a{ padding:12px 0; border-bottom:1px solid var(--line); font-size:15px; color:var(--ink-2) }
.mobile-nav a:last-child{ border-bottom:0 }
@media (min-width:1024px){
  .main-nav{ display:flex }
  .nav-toggle{ display:none }
  .mobile-nav{ display:none !important }
}

/* 按钮 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--r); border:1px solid transparent;
  font-size:15px; font-weight:600; letter-spacing:0.01em; cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
}
.btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }
.btn-primary{ background:var(--primary); color:#150A05 }
.btn-primary:hover{ background:var(--primary-hi); transform:translateY(1px) }
.btn-ghost{ border-color:rgba(245,241,234,0.2); color:var(--ink); background:transparent }
.btn-ghost:hover{ background:rgba(245,241,234,0.08) }
.btn-sm{ padding:9px 16px; font-size:14px }
.btn-block{ width:100% }

/* 标签 */
.tag{
  display:inline-block; padding:5px 11px; border:1px solid var(--line);
  border-radius:var(--r-sm); font-size:13px; color:var(--ink-2);
  background:rgba(245,241,234,0.03);
}
.tag-primary{ border-color:var(--line-hi); color:var(--primary); background:var(--primary-soft) }

/* 分类标题带 */
.topic-banner{
  position:relative; overflow:hidden; isolation:isolate;
  border-bottom:1px solid var(--line);
}
.banner-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center 42%;
  filter:grayscale(0.32) contrast(1.06) brightness(0.9);
}
.banner-mask{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(12,11,15,0.86) 0%,rgba(12,11,15,0.8) 52%,rgba(12,11,15,0.96) 100%);
}
.banner-glow{
  position:absolute; inset:0;
  background:radial-gradient(52% 62% at 16% 46%,rgba(228,118,60,0.2) 0%,rgba(228,118,60,0) 72%);
}
.banner-letterbox{ position:absolute; left:0; right:0; height:8px; background:#050407; z-index:4 }
.banner-letterbox.top{ top:0 }
.banner-letterbox.bottom{ bottom:0 }
.banner-inner{
  position:relative; z-index:5;
  padding-top:72px; padding-bottom:56px; min-height:300px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
@media (min-width:1024px){
  .banner-inner{ padding-top:96px; padding-bottom:72px; min-height:320px }
}
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--ink-3); margin-bottom:18px }
.breadcrumb a{ color:var(--ink-3); transition:color .2s ease }
.breadcrumb a:hover{ color:var(--primary) }
.breadcrumb span{ color:var(--ink-3); opacity:0.6 }
.breadcrumb em{ font-style:normal; color:var(--ink-2) }
.banner-title{
  font-size:28px; font-weight:900; line-height:1.16; letter-spacing:-0.02em;
  max-width:26ch;
}
@media (min-width:768px){ .banner-title{ font-size:36px } }
@media (min-width:1024px){ .banner-title{ font-size:46px } }
.banner-sub{ margin-top:16px; font-size:16px; color:var(--ink-2); max-width:56ch }
.banner-meta{
  margin-top:22px; display:flex; flex-wrap:wrap; gap:10px 26px;
  font-size:13px; color:var(--ink-3);
}
.banner-meta span{ position:relative; padding-left:14px }
.banner-meta span::before{
  content:""; position:absolute; left:0; top:50%; width:5px; height:5px;
  background:var(--primary); transform:translateY(-50%);
}

/* 板块 */
.section{ position:relative; padding:var(--sec-y) 0 }
.section-line{ border-top:1px solid var(--line) }
.section-line::before{
  content:""; position:absolute; top:-4px; left:20px;
  width:8px; height:8px; background:var(--primary);
}
@media (min-width:768px){ .section-line::before{ left:24px } }
@media (min-width:1024px){ .section-line::before{ left:40px } }
.sec-head{ margin-bottom:38px; max-width:64ch }
.sec-kicker{
  display:block; font-size:13px; letter-spacing:0.22em; color:var(--primary);
  font-weight:700; margin-bottom:12px;
}
.sec-title{ font-size:24px; font-weight:800; line-height:1.2; letter-spacing:-0.02em }
@media (min-width:768px){ .sec-title{ font-size:30px } }
@media (min-width:1024px){ .sec-title{ font-size:34px } }
.sec-sub{ margin-top:12px; font-size:15px; color:var(--ink-2) }
.sec-head-row{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:38px;
}
.text-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; color:var(--primary); border-bottom:1px solid var(--line-hi);
  padding-bottom:2px; transition:color .2s ease,border-color .2s ease;
}
.text-link:hover{ color:var(--primary-hi); border-color:var(--primary-hi) }

/* 概览指标条 */
.stat-strip{
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stat-cell{ padding:22px 4px 22px 18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line) }
.stat-cell:nth-child(2n){ border-right:0 }
.stat-cell:nth-last-child(-n+2){ border-bottom:0 }
.stat-cell b{
  display:block; font-size:30px; font-weight:900; letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.stat-cell span{ display:block; margin-top:6px; font-size:13px; color:var(--ink-3) }
@media (min-width:768px){
  .stat-strip{ grid-template-columns:repeat(4,1fr) }
  .stat-cell{ border-bottom:0 }
  .stat-cell:nth-child(2n){ border-right:1px solid var(--line) }
  .stat-cell:nth-last-child(1){ border-right:0 }
}

/* 场景卡片网格 */
.scene-grid{ display:grid; grid-template-columns:1fr; gap:24px }
@media (min-width:768px){ .scene-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .scene-grid{ grid-template-columns:repeat(3,1fr); gap:28px } }
.scene-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.scene-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--primary); transform:scaleX(0); transform-origin:left;
  transition:transform .28s ease; z-index:3;
}
.scene-card:hover{ transform:translateY(-4px); border-color:rgba(245,241,234,0.2); box-shadow:var(--shadow) }
.scene-card:hover::before{ transform:scaleX(1) }
.scene-card:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }
.scene-cover{ position:relative; display:block; overflow:hidden; background:var(--surface-2) }
.scene-cover img{
  width:100%; aspect-ratio:2/3; object-fit:cover;
  transition:transform .38s ease;
}
.scene-card:hover .scene-cover img{ transform:scale(1.03) }
.cover-shade{
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(12,11,15,0.98) 6%,rgba(12,11,15,0.55) 46%,rgba(12,11,15,0.05) 82%);
}
.cover-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 16px 14px; font-size:16px; font-weight:700; line-height:1.45;
  letter-spacing:-0.01em; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.scene-body{ display:flex; flex-direction:column; gap:14px; padding:18px 16px 20px }
.scene-desc{ font-size:14px; color:var(--ink-2); line-height:1.7 }
.scene-meta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; padding-top:12px; border-top:1px solid var(--line);
}
.scene-meta em{
  font-style:normal; font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.scene-meta i{
  font-style:normal; font-size:12px; color:var(--primary);
  border:1px solid var(--line-hi); background:var(--primary-soft);
  padding:3px 9px; border-radius:var(--r-sm);
}
.list-foot{ margin-top:40px; display:flex; justify-content:center }

/* 编辑精选 横排大图卡 */
.feature-grid{ display:grid; grid-template-columns:1fr; gap:24px }
@media (min-width:1024px){ .feature-grid{ grid-template-columns:repeat(3,1fr) } }
.feature-card{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:280px; padding:22px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.feature-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--primary); transform:scaleX(0); transform-origin:left;
  transition:transform .28s ease; z-index:4;
}
.feature-card:hover{ transform:translateY(-4px); border-color:rgba(245,241,234,0.2); box-shadow:var(--shadow) }
.feature-card:hover::before{ transform:scaleX(1) }
.feature-card:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }
.feature-bg{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center;
  filter:grayscale(0.3) brightness(0.92);
  transition:transform .4s ease;
}
.feature-card:hover .feature-bg{ transform:scale(1.04) }
.feature-shade{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(12,11,15,0.5) 0%,rgba(12,11,15,0.88) 62%,rgba(12,11,15,0.98) 100%);
}
.feature-tag{ align-self:flex-start; margin-bottom:auto }
.feature-title{ font-size:19px; font-weight:800; line-height:1.4; letter-spacing:-0.01em; margin-top:16px }
.feature-desc{ margin-top:10px; font-size:14px; color:var(--ink-2) }
.feature-meta{ margin-top:16px; font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums }

/* 主题解读 */
.interpret-grid{ display:grid; grid-template-columns:1fr; gap:32px }
@media (min-width:1024px){ .interpret-grid{ grid-template-columns:1.15fr 1fr; gap:56px } }
.interpret-main{ border-left:1px solid var(--line); padding-left:24px }
.interpret-main p{ font-size:16px; color:var(--ink-2); margin-bottom:1em }
.interpret-main p:last-child{ margin-bottom:0 }
.interpret-main strong{ color:var(--ink); font-weight:700 }
.interpret-side{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px 24px;
}
.interpret-side h3{ font-size:17px; font-weight:800; margin-bottom:14px }
.order-list li{
  position:relative; padding:12px 0 12px 38px;
  border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-2);
}
.order-list li:last-child{ border-bottom:0; padding-bottom:0 }
.order-list li b{
  position:absolute; left:0; top:12px;
  font-size:13px; font-weight:700; color:var(--primary);
  font-variant-numeric:tabular-nums; letter-spacing:0.06em;
}
.order-list li b::after{
  content:""; position:absolute; left:20px; top:-12px; bottom:-12px;
  width:1px; background:var(--line); display:none;
}

/* FAQ */
.faq-list{ border-top:1px solid var(--line); max-width:900px }
.faq-item{ border-bottom:1px solid var(--line) }
.faq-item summary{
  display:flex; align-items:flex-start; gap:14px;
  padding:20px 0; cursor:pointer; list-style:none;
  font-size:16px; font-weight:600; color:var(--ink);
  transition:color .2s ease;
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::after{
  content:"+"; margin-left:auto; flex:0 0 auto;
  font-size:20px; font-weight:400; color:var(--primary); line-height:1.2;
}
.faq-item[open] summary::after{ content:"–" }
.faq-item summary:hover{ color:var(--primary) }
.faq-item summary:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }
.faq-body{
  border-left:2px solid var(--primary);
  padding:0 0 20px 18px; margin-left:2px;
  font-size:15px; color:var(--ink-2); max-width:66ch;
}

/* 分布可视化 */
.dist-wrap{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:28px 24px 22px;
}
.dist-list{ display:flex; flex-direction:column; gap:16px }
.dist-row{ display:grid; grid-template-columns:88px 1fr 52px; align-items:center; gap:14px }
.dist-name{ font-size:14px; color:var(--ink-2) }
.dist-track{ height:8px; background:var(--surface-2); border-radius:var(--r-sm); overflow:hidden }
.dist-track i{ display:block; height:100%; background:linear-gradient(90deg,var(--secondary),var(--primary)) }
.dist-val{ font-size:13px; color:var(--ink-3); text-align:right; font-variant-numeric:tabular-nums }
.dist-note{ margin-top:22px; padding-top:16px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3) }

/* 订阅条 */
.join-bar{
  position:relative; overflow:hidden;
  background:var(--secondary);
  border:1px solid rgba(228,118,60,0.45);
  border-radius:var(--r-lg);
  padding:32px 24px;
}
.join-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 120% at 88% 0%,rgba(228,118,60,0.32) 0%,rgba(228,118,60,0) 68%);
}
.join-inner{ position:relative; z-index:2; display:grid; gap:22px }
@media (min-width:1024px){
  .join-inner{ grid-template-columns:1.1fr 1fr; align-items:center; gap:40px }
  .join-bar{ padding:38px 40px }
}
.join-title{ font-size:20px; font-weight:800; line-height:1.35; letter-spacing:-0.01em }
@media (min-width:768px){ .join-title{ font-size:24px } }
.join-desc{ margin-top:10px; font-size:14px; color:rgba(245,241,234,0.76) }
.join-form{ display:flex; flex-direction:column; gap:10px }
@media (min-width:640px){ .join-form{ flex-direction:row; gap:12px } }
.field-input{
  flex:1 1 auto; min-width:0;
  background:rgba(12,11,15,0.66);
  border:1px solid rgba(245,241,234,0.18);
  border-radius:var(--r);
  padding:12px 14px; font-size:15px; color:var(--ink);
  transition:border-color .2s ease,background .2s ease;
}
.field-input::placeholder{ color:var(--ink-3) }
.field-input:focus{ outline:none; border-color:var(--primary); background:rgba(12,11,15,0.85) }
.join-tip{ margin-top:12px; font-size:13px; color:rgba(245,241,234,0.62) }

/* 页脚 */
.site-footer{
  position:relative; background:var(--footer);
  border-top:1px solid var(--line);
  padding:56px 0 24px;
}
.footer-grid{ display:grid; grid-template-columns:1fr; gap:32px }
@media (min-width:768px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px } }
.footer-brand h3{ font-size:20px; font-weight:900; letter-spacing:0.06em; margin-bottom:12px }
.footer-brand p{ font-size:14px; color:var(--ink-3); max-width:36ch; line-height:1.75 }
.footer-col h4{ font-size:14px; font-weight:700; color:var(--ink); margin-bottom:14px; letter-spacing:0.04em }
.footer-col a{ display:block; font-size:14px; color:var(--ink-3); padding:5px 0; transition:color .2s ease }
.footer-col a:hover{ color:var(--primary) }
.footer-bottom{
  margin-top:44px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  font-size:13px; color:var(--ink-3);
}

/* 通用焦点与滚动条 */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
::selection{ background:var(--primary); color:#150A05 }