/* roulang page: index */
:root{
  --bg:#f4f8fd;
  --bg-soft:#eef4fb;
  --panel:#ffffff;
  --panel-soft:#f8fbff;
  --text:#10314d;
  --muted:#637791;
  --line:#d9e3ef;
  --primary:#2f6df6;
  --primary-strong:#2458c7;
  --primary-soft:#dfeaff;
  --accent:#1eb3a5;
  --warm:#f59e0b;
  --shadow:0 16px 38px rgba(20,49,88,.08);
  --shadow-hover:0 22px 52px rgba(20,49,88,.12);
  --radius:20px;
  --radius-lg:30px;
  --container:1180px;
}
*,
*::before,
*::after{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
}
body{
  margin:0;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  line-height:1.75;
  background:
    radial-gradient(900px 450px at 8% -10%, rgba(47,109,246,.08), transparent 68%),
    radial-gradient(760px 420px at 100% 0%, rgba(30,179,165,.08), transparent 72%),
    linear-gradient(180deg, #f7fbff 0%, #f4f8fd 28%, #f4f8fd 100%);
}
a{
  color:inherit;
  text-decoration:none;
  transition:color .18s ease, transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
a:hover{
  color:var(--primary-strong);
}
img{
  max-width:100%;
  display:block;
}
button,
input,
textarea{
  font:inherit;
}
::selection{
  background:rgba(47,109,246,.14);
  color:var(--text);
}
:focus{
  outline:none;
}
:focus-visible{
  outline:3px solid rgba(47,109,246,.22);
  outline-offset:3px;
  border-radius:10px;
}
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:1rem;
  top:1rem;
  width:auto;
  height:auto;
  padding:.75rem 1rem;
  z-index:200;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
}
.grid-container{
  max-width:var(--container);
}
.site-header{
  position:sticky;
  top:0;
  z-index:120;
  background:rgba(244,248,253,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(217,227,239,.88);
}
.header-inner{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  font-size:1.08rem;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--text);
  white-space:nowrap;
}
.brand-mark{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  letter-spacing:.04em;
  background:linear-gradient(135deg, var(--primary), #6d98ff);
  box-shadow:0 10px 22px rgba(47,109,246,.22);
  flex:0 0 auto;
}
.brand-text{
  display:inline-flex;
  align-items:center;
  min-height:40px;
}
.button{
  margin:0;
  border:1px solid transparent;
  border-radius:999px;
  font-weight:700;
  line-height:1;
  padding:1rem 1.35rem;
  background:transparent;
  color:var(--text);
  box-shadow:none;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
.button:hover{
  transform:translateY(-2px);
}
.button:active{
  transform:translateY(0);
}
.button.primary,
.button.site-button{
  background:linear-gradient(135deg, var(--primary), #5d8ff7);
  color:#fff;
  box-shadow:0 14px 30px rgba(47,109,246,.22);
}
.button.primary:hover,
.button.site-button:hover{
  color:#fff;
  box-shadow:0 18px 34px rgba(47,109,246,.25);
}
.button.hollow{
  background:rgba(255,255,255,.75);
  border-color:var(--line);
  color:var(--text);
}
.button.hollow:hover{
  background:#fff;
  border-color:rgba(47,109,246,.2);
  color:var(--primary-strong);
}
.nav-cta{
  white-space:nowrap;
}
main{
  overflow:hidden;
}
.section-block{
  padding:clamp(3.6rem, 5vw, 5.6rem) 0;
}
.section-soft{
  background:
    linear-gradient(180deg, rgba(238,244,251,.82), rgba(238,244,251,.82));
}
.section-head{
  margin-bottom:1.7rem;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.42rem .82rem;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary-strong);
  border:1px solid rgba(47,109,246,.1);
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.02em;
}
.section-head h2{
  margin:.9rem 0 .55rem;
  font-size:clamp(1.5rem, 2.2vw, 2.35rem);
  line-height:1.18;
  letter-spacing:-.02em;
  font-weight:800;
}
.section-head p{
  margin:0;
  max-width:44rem;
  color:var(--muted);
  font-size:1rem;
}
.hero-section{
  padding:clamp(2rem, 4.2vw, 4.7rem) 0 3.4rem;
}
.hero-shell{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.98));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:clamp(1.25rem, 2.6vw, 2rem);
}
.hero-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(47,109,246,.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(47,109,246,.05) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,0) 70%);
  pointer-events:none;
}
.hero-copy{
  position:relative;
  z-index:1;
}
.hero-copy h1{
  margin:0 0 1rem;
  font-size:clamp(2.1rem, 4.2vw, 4.25rem);
  line-height:1.06;
  letter-spacing:-.04em;
  font-weight:900;
  max-width:12ch;
}
.hero-copy .lead{
  margin:0;
  max-width:42rem;
  font-size:1.05rem;
  color:var(--muted);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin-top:1.7rem;
}
.hero-tags{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  padding:0;
  margin:1.35rem 0 0;
}
.hero-tags li{
  display:inline-flex;
  align-items:center;
  padding:.55rem .9rem;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.92rem;
  box-shadow:0 8px 20px rgba(20,49,88,.04);
}
.hero-stage{
  position:relative;
  z-index:1;
  min-height:520px;
  border-radius:28px;
  overflow:hidden;
  padding:1rem;
  border:1px solid rgba(255,255,255,.7);
  background:
    radial-gradient(480px 320px at 20% 8%, rgba(255,255,255,.65), transparent 65%),
    linear-gradient(135deg, #dceaff 0%, #eef5ff 37%, #f7fbff 58%, #d8e7ff 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), var(--shadow);
}
.hero-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.17) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.17) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.28;
  pointer-events:none;
}
.stage-top{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.25rem .1rem .9rem;
  color:var(--text);
  font-weight:700;
}
.stage-top .status{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.92rem;
}
.status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 6px rgba(30,179,165,.12);
}
.stage-top .label{
  display:inline-flex;
  align-items:center;
  padding:.3rem .7rem;
  border-radius:999px;
  border:1px solid rgba(47,109,246,.16);
  background:rgba(255,255,255,.82);
  color:var(--primary-strong);
  font-size:.82rem;
}
.stage-screen{
  position:relative;
  border-radius:24px;
  min-height:360px;
  overflow:hidden;
  padding:1rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.45), rgba(255,255,255,.15)),
    linear-gradient(140deg, #bcd5ff 0%, #edf4ff 35%, #f7fbff 72%, #d7e5ff 100%);
  border:1px solid rgba(255,255,255,.52);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
.stage-screen::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 20%, rgba(47,109,246,.17), transparent 22%),
    radial-gradient(circle at 82% 26%, rgba(30,179,165,.18), transparent 18%),
    radial-gradient(circle at 60% 76%, rgba(245,158,11,.12), transparent 22%);
  pointer-events:none;
}
.play-spot{
  position:absolute;
  inset:auto;
  left:50%;
  top:52%;
  transform:translate(-50%, -50%);
  width:92px;
  height:92px;
  border-radius:50%;
  background:rgba(16,49,77,.92);
  box-shadow:0 18px 36px rgba(16,49,77,.2), 0 0 0 18px rgba(255,255,255,.24);
  z-index:2;
}
.play-spot::before{
  content:"";
  position:absolute;
  left:38px;
  top:31px;
  border-left:22px solid #fff;
  border-top:15px solid transparent;
  border-bottom:15px solid transparent;
}
.screen-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:1rem;
  height:100%;
}
.screen-card{
  border-radius:20px;
  padding:1rem;
  border:1px solid rgba(255,255,255,.66);
  background:rgba(255,255,255,.76);
  box-shadow:0 10px 24px rgba(20,49,88,.08);
}
.screen-card.dark{
  background:linear-gradient(180deg, rgba(17,43,79,.92), rgba(21,61,112,.9));
  color:#fff;
}
.screen-card h3{
  margin:0 0 .55rem;
  font-size:1.02rem;
  font-weight:800;
  letter-spacing:-.02em;
}
.screen-card p{
  margin:0;
  color:inherit;
  opacity:.84;
  font-size:.94rem;
}
.progress{
  margin-top:.9rem;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  overflow:hidden;
}
.progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #8cc0ff, #fff);
  width:68%;
}
.info-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.9rem;
}
.info-badges span{
  display:inline-flex;
  align-items:center;
  padding:.34rem .6rem;
  border-radius:999px;
  background:rgba(255,255,255,.76);
  color:var(--text);
  border:1px solid rgba(255,255,255,.75);
  font-size:.82rem;
  font-weight:700;
}
.panel-stack{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
.panel-stack .mini{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.9rem 1rem;
}
.panel-stack .mini strong{
  display:block;
  font-size:1.1rem;
  line-height:1.1;
}
.panel-stack .mini small{
  display:block;
  color:var(--muted);
  margin-top:.2rem;
}
.panel-stack .mini .tag{
  white-space:nowrap;
  padding:.4rem .65rem;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary-strong);
  font-size:.8rem;
  font-weight:700;
}
.feature-card,
.metric-card,
.case-card,
.step-card,
.matrix-card,
.rank-card,
.update-card,
.cta-panel{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(180deg, #fff, #fbfdff);
  box-shadow:var(--shadow);
}
.feature-card,
.metric-card,
.case-card,
.step-card{
  height:100%;
}
.feature-card{
  padding:1.4rem;
  min-height:232px;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover,
.metric-card:hover,
.case-card:hover,
.step-card:hover,
.update-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(47,109,246,.18);
}
.feature-icon{
  width:50px;
  height:50px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:var(--primary-soft);
  color:var(--primary-strong);
  font-weight:900;
  font-size:1rem;
  box-shadow:inset 0 0 0 1px rgba(47,109,246,.08);
}
.feature-card h3{
  margin:1rem 0 .5rem;
  font-size:1.2rem;
  line-height:1.2;
  font-weight:800;
}
.feature-card p{
  margin:0;
  color:var(--muted);
  font-size:.96rem;
}
.feature-foot{
  margin-top:auto;
  padding-top:1rem;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
.badge-mini{
  display:inline-flex;
  align-items:center;
  padding:.35rem .65rem;
  border-radius:999px;
  background:#f3f7fd;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.8rem;
  font-weight:700;
}
.metric-card{
  padding:1.4rem;
  min-height:192px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.metric-number{
  font-size:clamp(2rem, 4vw, 3.05rem);
  line-height:1;
  font-weight:900;
  letter-spacing:-.05em;
  color:var(--primary-strong);
}
.metric-label{
  margin-top:.7rem;
  font-size:1.02rem;
  font-weight:800;
}
.metric-desc{
  margin:.42rem 0 0;
  color:var(--muted);
  font-size:.95rem;
}
.metric-tag{
  display:inline-flex;
  align-items:center;
  margin-top:1rem;
  padding:.36rem .7rem;
  border-radius:999px;
  background:rgba(47,109,246,.08);
  color:var(--primary-strong);
  border:1px solid rgba(47,109,246,.12);
  font-size:.8rem;
  font-weight:700;
}
.case-card{
  padding:1.1rem;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.case-thumb{
  height:168px;
  border-radius:18px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.88), transparent 26%),
    radial-gradient(circle at 70% 35%, rgba(30,179,165,.22), transparent 24%),
    linear-gradient(135deg, #d9e8ff 0%, #edf4ff 40%, #f8fbff 72%, #d2e1ff 100%);
  border:1px solid rgba(255,255,255,.72);
}
.case-thumb::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:56%;
  background:linear-gradient(180deg, transparent, rgba(16,49,77,.16));
}
.case-chip{
  position:absolute;
  left:1rem;
  top:1rem;
  z-index:1;
  padding:.35rem .7rem;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.72);
  color:var(--primary-strong);
  font-size:.8rem;
  font-weight:700;
}
.case-card h3{
  margin:1rem 0 .45rem;
  font-size:1.15rem;
  font-weight:800;
  line-height:1.25;
}
.case-card p{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}
.case-link{
  margin-top:auto;
  padding-top:1rem;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--primary-strong);
  font-weight:800;
}
.case-link::after{
  content:"→";
  transition:transform .18s ease;
}
.case-card:hover .case-link::after{
  transform:translateX(3px);
}
.step-card{
  padding:1.35rem;
  min-height:100%;
}
.step-num{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--primary), #6f9af8);
  color:#fff;
  font-weight:900;
  box-shadow:0 12px 24px rgba(47,109,246,.22);
}
.step-card h3{
  margin:1rem 0 .45rem;
  font-size:1.1rem;
  font-weight:800;
}
.step-card p{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}
.step-tag{
  display:inline-flex;
  margin-top:1rem;
  padding:.36rem .68rem;
  border-radius:999px;
  background:#f3f7fd;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.8rem;
  font-weight:700;
}
.topics-wrap{
  display:grid;
  grid-template-columns:1.5fr .95fr;
  gap:1rem;
}
.topic-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:.4rem;
}
.topic-chip{
  display:inline-flex;
  align-items:center;
  padding:.78rem 1.02rem;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(20,49,88,.05);
  color:var(--text);
  font-weight:700;
}
.topic-chip:hover{
  border-color:rgba(47,109,246,.2);
  transform:translateY(-2px);
}
.matrix-card{
  padding:1.3rem;
  height:100%;
}
.matrix-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.85rem;
  margin-top:1rem;
}
.matrix-item{
  min-height:108px;
  padding:1rem;
  border-radius:18px;
  background:linear-gradient(180deg, #fbfdff, #f3f7fd);
  border:1px solid var(--line);
}
.matrix-item strong{
  display:block;
  font-size:1.02rem;
  font-weight:800;
}
.matrix-item span{
  display:block;
  margin-top:.35rem;
  color:var(--muted);
  font-size:.92rem;
}
.rank-card{
  padding:1.3rem;
  height:100%;
}
.rank-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.8rem;
}
.rank-item{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  padding-bottom:.8rem;
  border-bottom:1px solid var(--line);
}
.rank-item:last-child{
  border-bottom:0;
  padding-bottom:0;
}
.rank-num{
  flex:0 0 auto;
  min-width:2rem;
  color:var(--primary-strong);
  font-weight:900;
  font-size:1.15rem;
  line-height:1.2;
}
.rank-item strong{
  display:block;
  font-size:1rem;
  line-height:1.25;
}
.rank-item span{
  display:block;
  color:var(--muted);
  font-size:.92rem;
  margin-top:.25rem;
}
.latest-layout{
  display:grid;
  grid-template-columns:1.4fr .85fr;
  gap:1rem;
  align-items:start;
}
.update-list{
  display:grid;
  gap:1rem;
}
.update-card{
  display:block;
  padding:1.2rem 1.25rem;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.update-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.7rem 1rem;
  margin-bottom:.7rem;
}
.update-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.meta-pill{
  display:inline-flex;
  align-items:center;
  padding:.34rem .65rem;
  border-radius:999px;
  background:rgba(47,109,246,.08);
  border:1px solid rgba(47,109,246,.12);
  color:var(--primary-strong);
  font-size:.8rem;
  font-weight:700;
}
.update-time{
  color:var(--muted);
  font-size:.86rem;
}
.update-card h3{
  margin:0 0 .45rem;
  font-size:1.18rem;
  line-height:1.35;
  font-weight:800;
}
.update-card p{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}
.update-link{
  margin-top:1rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  color:var(--primary-strong);
  font-weight:800;
}
.update-link::after{
  content:"→";
  transition:transform .18s ease;
}
.update-card:hover .update-link::after{
  transform:translateX(3px);
}
.empty-state{
  min-height:240px;
  display:grid;
  place-items:center;
  padding:1.5rem;
  border-radius:24px;
  border:1px dashed rgba(47,109,246,.18);
  background:linear-gradient(180deg, #fff, #fbfdff);
  color:var(--muted);
  font-weight:700;
}
.quick-panel{
  padding:1.3rem;
}
.quick-panel h3{
  margin:0 0 .5rem;
  font-size:1.12rem;
  font-weight:800;
}
.quick-panel p{
  margin:0;
  color:var(--muted);
  font-size:.94rem;
}
.quick-links{
  display:grid;
  gap:.75rem;
  margin-top:1rem;
}
.quick-links .button{
  width:100%;
  justify-content:center;
  display:inline-flex;
}
.quick-note{
  margin-top:1rem;
  padding:1rem;
  border-radius:18px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.92rem;
}
.accordion{
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.accordion-item{
  border-bottom:1px solid var(--line);
}
.accordion-item:last-child{
  border-bottom:0;
}
.accordion-title{
  padding:1.05rem 1.25rem;
  color:var(--text);
  background:#fff;
  font-size:1rem;
  font-weight:800;
  line-height:1.45;
  transition:background-color .18s ease, color .18s ease;
}
.accordion-title:hover{
  background:rgba(47,109,246,.04);
  color:var(--primary-strong);
}
.accordion-title::before{
  display:none;
}
.accordion-content{
  padding:0 1.25rem 1.2rem;
  color:var(--muted);
  background:#fff;
  line-height:1.85;
}
.cta-panel{
  padding:clamp(1.25rem, 2.5vw, 2rem);
  background:
    radial-gradient(520px 320px at 0% 0%, rgba(47,109,246,.09), transparent 55%),
    radial-gradient(420px 240px at 100% 0%, rgba(30,179,165,.08), transparent 50%),
    linear-gradient(180deg, #fff, #f6f9ff);
}
.cta-panel::after{
  content:"";
  position:absolute;
  inset:auto -70px -70px auto;
  width:210px;
  height:210px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(47,109,246,.12), rgba(47,109,246,0) 70%);
  pointer-events:none;
}
.cta-copy{
  position:relative;
  z-index:1;
}
.cta-copy h2{
  margin:0 0 .6rem;
  font-size:clamp(1.5rem, 2.2vw, 2.3rem);
  line-height:1.15;
  font-weight:900;
}
.cta-copy p{
  margin:0;
  max-width:46rem;
  color:var(--muted);
}
.cta-grid{
  position:relative;
  z-index:1;
  margin-top:1.25rem;
}
.cta-form{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
}
.cta-form input{
  flex:1 1 260px;
  min-height:54px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  padding:0 1rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.cta-form input::placeholder{
  color:#90a1b7;
}
.cta-form .button{
  min-height:54px;
  padding:0 1.35rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.cta-bullets{
  list-style:none;
  padding:0;
  margin:1rem 0 0;
  display:grid;
  gap:.45rem;
  color:var(--muted);
}
.cta-bullets li{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
}
.cta-bullets li::before{
  content:"•";
  color:var(--primary-strong);
  font-weight:900;
  line-height:1.4;
}
.site-footer{
  padding:1.6rem 0 2.4rem;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-top:1.2rem;
  border-top:1px solid var(--line);
  color:var(--muted);
}
.footer-brand{
  display:inline-flex;
  flex-direction:column;
  gap:.2rem;
}
.footer-brand strong{
  color:var(--text);
  font-size:1rem;
  font-weight:800;
}
.footer-brand span{
  font-size:.92rem;
}
.footer-links{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.footer-links a{
  color:var(--muted);
  font-weight:700;
}
.footer-links a:hover{
  color:var(--primary-strong);
}
.footer-top{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.6rem .85rem;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--text);
  font-weight:700;
  box-shadow:0 8px 20px rgba(20,49,88,.05);
}
.footer-top:hover{
  border-color:rgba(47,109,246,.18);
}
@media screen and (max-width: 1024px){
  .hero-stage{
    min-height:460px;
  }
  .screen-grid,
  .topics-wrap,
  .latest-layout{
    grid-template-columns:1fr;
  }
  .quick-panel{
    margin-top:1rem;
  }
}
@media screen and (max-width: 768px){
  .header-inner{
    min-height:68px;
  }
  .brand{
    font-size:1rem;
    gap:.65rem;
  }
  .brand-mark{
    width:36px;
    height:36px;
    border-radius:12px;
  }
  .button{
    padding:.9rem 1.1rem;
  }
  .hero-shell{
    padding:1rem;
  }
  .hero-copy h1{
    max-width:14ch;
  }
  .hero-stage{
    min-height:420px;
    margin-top:1rem;
  }
  .stage-screen{
    min-height:330px;
  }
  .section-block{
    padding:3.1rem 0;
  }
  .feature-card,
  .metric-card,
  .case-card,
  .step-card,
  .matrix-card,
  .rank-card,
  .update-card,
  .cta-panel{
    border-radius:22px;
  }
  .matrix-grid{
    grid-template-columns:1fr;
  }
}
@media screen and (max-width: 520px){
  .header-inner{
    gap:.6rem;
  }
  .nav-cta{
    padding:.82rem .95rem;
    font-size:.94rem;
  }
  .hero-copy h1{
    font-size:2.1rem;
  }
  .hero-copy .lead{
    font-size:1rem;
  }
  .hero-actions .button{
    width:100%;
    justify-content:center;
  }
  .hero-tags{
    gap:.5rem;
  }
  .hero-tags li{
    width:100%;
    justify-content:center;
  }
  .play-spot{
    width:78px;
    height:78px;
  }
  .play-spot::before{
    left:31px;
    top:26px;
    border-left-width:18px;
    border-top-width:12px;
    border-bottom-width:12px;
  }
  .stage-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-inner{
    align-items:flex-start;
  }
  .footer-links{
    gap:.75rem;
  }
}

/* roulang page: article */
:root{
  --bg:#f4f8fd;
  --bg-soft:#eef4fb;
  --panel:#ffffff;
  --panel-soft:#f8fbff;
  --text:#10314d;
  --muted:#637791;
  --line:#d9e3ef;
  --primary:#2f6df6;
  --primary-strong:#2458c7;
  --primary-soft:#dfeaff;
  --accent:#1eb3a5;
  --warm:#f59e0b;
  --danger:#ef4444;
  --shadow:0 16px 38px rgba(20,49,88,.08);
  --shadow-hover:0 22px 52px rgba(20,49,88,.12);
  --radius:20px;
  --radius-lg:30px;
  --container:1180px;
}
*,
*::before,
*::after{
  box-sizing:border-box;
}
html{
  scroll-behavior:smooth;
  text-size-adjust:100%;
}
body{
  margin:0;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  line-height:1.75;
  background:
    radial-gradient(900px 450px at 8% -10%, rgba(47,109,246,.08), transparent 68%),
    radial-gradient(760px 420px at 100% 0%, rgba(30,179,165,.08), transparent 72%),
    linear-gradient(180deg, #f7fbff 0%, #f4f8fd 28%, #f4f8fd 100%);
  -webkit-font-smoothing:antialiased;
}
body::selection{
  background:rgba(47,109,246,.18);
  color:var(--text);
}
a{
  color:inherit;
  text-decoration:none;
  transition:color .18s ease, transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease;
}
a:hover{
  color:var(--primary-strong);
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(47,109,246,.25);
  outline-offset:3px;
  border-radius:14px;
}
img{
  max-width:100%;
  height:auto;
  display:block;
}
button,
input,
textarea{
  font:inherit;
}
p{
  margin-top:0;
}
.grid-container{
  max-width:var(--container);
}
.site-header{
  position:sticky;
  top:0;
  z-index:120;
  background:rgba(244,248,253,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(217,227,239,.88);
}
.header-inner{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  font-size:1.08rem;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--text);
  white-space:nowrap;
}
.brand-mark{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  letter-spacing:.04em;
  background:linear-gradient(135deg, var(--primary), #6d98ff);
  box-shadow:0 10px 22px rgba(47,109,246,.22);
  flex:0 0 auto;
}
.brand-text{
  display:inline-flex;
  align-items:center;
  min-height:40px;
}
.button{
  margin:0;
  border:1px solid transparent;
  border-radius:999px;
  font-weight:700;
  line-height:1;
  padding:1rem 1.35rem;
  background:transparent;
  color:var(--text);
  box-shadow:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
.button:hover{
  transform:translateY(-2px);
}
.button:active{
  transform:translateY(0);
}
.button.primary,
.button.site-button{
  background:linear-gradient(135deg, var(--primary), #5d8ff7);
  color:#fff;
  box-shadow:0 14px 30px rgba(47,109,246,.22);
}
.button.primary:hover,
.button.site-button:hover{
  color:#fff;
  box-shadow:0 18px 34px rgba(47,109,246,.25);
}
.button.hollow{
  background:rgba(255,255,255,.75);
  border-color:var(--line);
  color:var(--text);
}
.button.hollow:hover{
  background:#fff;
  border-color:rgba(47,109,246,.2);
  color:var(--primary-strong);
}
.nav-cta{
  white-space:nowrap;
}
main{
  overflow:hidden;
}
.section-block{
  padding:clamp(3.6rem, 5vw, 5.6rem) 0;
}
.section-soft{
  background:linear-gradient(180deg, rgba(238,244,251,.82), rgba(238,244,251,.82));
}
.section-head{
  margin-bottom:1.7rem;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.42rem .82rem;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary-strong);
  border:1px solid rgba(47,109,246,.1);
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.02em;
}
.section-head h2{
  margin:.9rem 0 .55rem;
  font-size:clamp(1.5rem, 2.2vw, 2.35rem);
  line-height:1.18;
  letter-spacing:-.02em;
  font-weight:800;
}
.section-head p{
  margin:0;
  max-width:44rem;
  color:var(--muted);
  font-size:1rem;
}
.article-hero{
  padding:clamp(2rem, 4vw, 4.2rem) 0 2.4rem;
}
.article-shell{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.98));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:clamp(1.2rem, 3vw, 2.2rem);
}
.article-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(47,109,246,.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(47,109,246,.045) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,0) 74%);
  pointer-events:none;
}
.breadcrumb{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem;
  margin:0 0 1.2rem;
  color:var(--muted);
  font-size:.92rem;
}
.breadcrumb a{
  color:var(--primary-strong);
  font-weight:700;
}
.breadcrumb .split{
  color:#9aabba;
}
.article-title-wrap{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(300px, .8fr);
  gap:clamp(1.2rem, 3vw, 2.2rem);
  align-items:stretch;
}
.article-kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--primary-strong);
  background:var(--primary-soft);
  border:1px solid rgba(47,109,246,.1);
  border-radius:999px;
  padding:.45rem .86rem;
  font-size:.86rem;
  font-weight:800;
}
.article-title{
  margin:1rem 0 .9rem;
  font-size:clamp(2rem, 4.2vw, 3.85rem);
  line-height:1.08;
  letter-spacing:-.045em;
  font-weight:900;
  color:var(--text);
}
.article-desc{
  margin:0;
  max-width:50rem;
  color:var(--muted);
  font-size:1.05rem;
}
.meta-row{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  padding:0;
  margin:1.35rem 0 0;
}
.meta-row li{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.56rem .85rem;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.9rem;
  box-shadow:0 8px 18px rgba(20,49,88,.04);
}
.meta-row strong{
  color:var(--text);
}
.article-panel{
  position:relative;
  min-height:300px;
  border-radius:26px;
  padding:1rem;
  overflow:hidden;
  border:1px solid rgba(217,227,239,.92);
  background:
    radial-gradient(300px 220px at 20% 10%, rgba(47,109,246,.16), transparent 70%),
    radial-gradient(260px 190px at 90% 80%, rgba(30,179,165,.12), transparent 68%),
    linear-gradient(135deg, #eff6ff 0%, #ffffff 58%, #e8f1ff 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75), 0 18px 36px rgba(20,49,88,.07);
}
.panel-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
}
.panel-dot{
  display:flex;
  gap:.4rem;
}
.panel-dot span{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(47,109,246,.28);
}
.panel-dot span:nth-child(2){
  background:rgba(30,179,165,.32);
}
.panel-dot span:nth-child(3){
  background:rgba(245,158,11,.34);
}
.panel-status{
  display:inline-flex;
  align-items:center;
  padding:.33rem .68rem;
  border-radius:999px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(47,109,246,.14);
  color:var(--primary-strong);
  font-size:.82rem;
  font-weight:800;
}
.panel-card{
  position:relative;
  z-index:1;
  border-radius:20px;
  padding:1rem;
  margin-bottom:.8rem;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(217,227,239,.82);
  box-shadow:0 12px 26px rgba(20,49,88,.06);
}
.panel-card h3{
  margin:0 0 .55rem;
  font-size:1rem;
  font-weight:900;
}
.panel-card p{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.7;
}
.progress-line{
  height:9px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(217,227,239,.8);
  margin-top:.8rem;
}
.progress-line span{
  display:block;
  width:72%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
}
.article-layout{
  padding:1.6rem 0 clamp(3.8rem, 6vw, 6rem);
}
.reader-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 320px;
  gap:1.5rem;
  align-items:start;
}
.reader-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.reader-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1rem clamp(1.1rem, 2.6vw, 2rem);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, #fff, var(--panel-soft));
}
.reader-toolbar strong{
  font-size:1rem;
}
.reader-toolbar span{
  color:var(--muted);
  font-size:.9rem;
}
.article-content{
  padding:clamp(1.25rem, 3vw, 2.3rem);
  color:#173c5c;
  font-size:1.06rem;
  line-height:1.95;
}
.article-content > *:first-child{
  margin-top:0;
}
.article-content h2{
  margin:2.2rem 0 .85rem;
  padding-top:.25rem;
  color:var(--text);
  font-size:clamp(1.45rem, 2.2vw, 2rem);
  line-height:1.28;
  font-weight:900;
  letter-spacing:-.02em;
}
.article-content h3{
  margin:1.7rem 0 .65rem;
  color:var(--text);
  font-size:1.28rem;
  line-height:1.35;
  font-weight:850;
}
.article-content h4{
  margin:1.45rem 0 .5rem;
  color:var(--text);
  font-size:1.1rem;
  font-weight:850;
}
.article-content p{
  margin:0 0 1.15rem;
}
.article-content a{
  color:var(--primary-strong);
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:rgba(47,109,246,.25);
  text-underline-offset:4px;
}
.article-content a:hover{
  text-decoration-color:rgba(47,109,246,.65);
}
.article-content ul,
.article-content ol{
  margin:0 0 1.2rem 1.25rem;
  padding:0;
}
.article-content li{
  margin:.38rem 0;
  padding-left:.2rem;
}
.article-content blockquote{
  margin:1.5rem 0;
  padding:1rem 1.1rem 1rem 1.2rem;
  border-left:4px solid var(--primary);
  border-radius:0 18px 18px 0;
  background:linear-gradient(90deg, rgba(223,234,255,.8), rgba(248,251,255,.9));
  color:#234962;
}
.article-content img{
  margin:1.4rem auto;
  border-radius:22px;
  border:1px solid var(--line);
  box-shadow:0 14px 30px rgba(20,49,88,.08);
}
.article-content table{
  width:100%;
  margin:1.5rem 0;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 24px rgba(20,49,88,.04);
}
.article-content th,
.article-content td{
  padding:.85rem .95rem;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
.article-content th{
  background:var(--panel-soft);
  color:var(--text);
  font-weight:850;
}
.article-content tr:last-child td{
  border-bottom:0;
}
.article-content code{
  padding:.12rem .38rem;
  border-radius:8px;
  background:#eef4fb;
  color:#2458c7;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:.92em;
}
.article-content pre{
  overflow:auto;
  padding:1rem;
  border-radius:18px;
  background:#10243a;
  color:#eaf2ff;
  line-height:1.7;
}
.article-content pre code{
  padding:0;
  background:transparent;
  color:inherit;
}
.article-content hr{
  border:0;
  border-top:1px solid var(--line);
  margin:2rem 0;
}
.not-found{
  padding:clamp(1.25rem, 3vw, 2rem);
  border-radius:24px;
  background:var(--panel-soft);
  border:1px dashed rgba(47,109,246,.28);
  text-align:center;
}
.not-found h2{
  margin:.2rem 0 .6rem;
  font-size:1.55rem;
}
.not-found p{
  color:var(--muted);
  margin:0 0 1.2rem;
}
.side-stack{
  display:grid;
  gap:1rem;
}
.side-card{
  padding:1.15rem;
  border-radius:var(--radius);
  background:rgba(255,255,255,.88);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.side-card h2,
.side-card h3{
  margin:0 0 .65rem;
  font-size:1.05rem;
  font-weight:900;
}
.side-card p{
  margin:0;
  color:var(--muted);
  font-size:.94rem;
}
.side-list{
  list-style:none;
  margin:.8rem 0 0;
  padding:0;
  display:grid;
  gap:.55rem;
}
.side-list li{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  color:var(--muted);
  font-size:.93rem;
}
.side-list li::before{
  content:"";
  width:8px;
  height:8px;
  margin-top:.62rem;
  border-radius:999px;
  background:var(--accent);
  flex:0 0 auto;
}
.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.9rem;
}
.badge{
  display:inline-flex;
  align-items:center;
  padding:.38rem .68rem;
  border-radius:999px;
  border:1px solid rgba(47,109,246,.13);
  background:var(--primary-soft);
  color:var(--primary-strong);
  font-size:.82rem;
  font-weight:800;
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
}
.info-card{
  display:flex;
  flex-direction:column;
  min-height:170px;
  padding:1.2rem;
  border-radius:var(--radius);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(20,49,88,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.info-card:hover{
  transform:translateY(-4px);
  border-color:rgba(47,109,246,.22);
  box-shadow:var(--shadow-hover);
}
.info-card .tag{
  align-self:flex-start;
  display:inline-flex;
  padding:.32rem .62rem;
  border-radius:999px;
  background:rgba(30,179,165,.1);
  color:#087b72;
  font-size:.8rem;
  font-weight:850;
}
.info-card h3{
  margin:.85rem 0 .45rem;
  font-size:1.08rem;
  line-height:1.35;
  font-weight:900;
}
.info-card p{
  margin:0;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.7;
}
.info-card a{
  margin-top:auto;
  padding-top:1rem;
  color:var(--primary-strong);
  font-weight:850;
}
.faq-list{
  display:grid;
  gap:.8rem;
}
.faq-item{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 24px rgba(20,49,88,.04);
  overflow:hidden;
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:1rem 1.15rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-weight:850;
  color:var(--text);
}
.faq-item summary::-webkit-details-marker{
  display:none;
}
.faq-item summary::after{
  content:"+";
  width:26px;
  height:26px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:var(--primary-strong);
  background:var(--primary-soft);
  flex:0 0 auto;
  transition:transform .18s ease;
}
.faq-item[open] summary::after{
  content:"−";
  transform:rotate(180deg);
}
.faq-item .faq-body{
  padding:0 1.15rem 1rem;
  color:var(--muted);
  border-top:1px solid rgba(217,227,239,.72);
}
.cta-panel{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid rgba(47,109,246,.15);
  background:
    radial-gradient(500px 240px at 5% 0%, rgba(47,109,246,.13), transparent 68%),
    linear-gradient(135deg, #ffffff, #eef5ff);
  box-shadow:var(--shadow);
  padding:clamp(1.35rem, 3vw, 2rem);
}
.cta-panel::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-80px;
  bottom:-110px;
  border-radius:50%;
  background:rgba(30,179,165,.12);
}
.cta-content{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.2rem;
}
.cta-content h2{
  margin:0 0 .45rem;
  font-size:clamp(1.45rem, 2.3vw, 2.2rem);
  line-height:1.2;
  font-weight:900;
}
.cta-content p{
  margin:0;
  color:var(--muted);
  max-width:42rem;
}
.cta-actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  flex:0 0 auto;
}
.site-footer{
  padding:2.2rem 0;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.58);
}
.footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.2rem;
}
.footer-brand{
  display:grid;
  gap:.25rem;
}
.footer-brand strong{
  color:var(--text);
  font-size:1.05rem;
}
.footer-brand span{
  color:var(--muted);
  font-size:.94rem;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:.75rem 1rem;
}
.footer-links a{
  color:var(--muted);
  font-size:.94rem;
  font-weight:700;
}
.footer-links a:hover{
  color:var(--primary-strong);
}
.footer-top{
  color:var(--primary-strong)!important;
}
@media (max-width:1024px){
  .article-title-wrap,
  .reader-grid{
    grid-template-columns:1fr;
  }
  .article-panel{
    min-height:240px;
  }
  .side-stack{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:768px){
  .header-inner{
    min-height:68px;
  }
  .brand{
    gap:.6rem;
    font-size:1rem;
  }
  .brand-mark{
    width:36px;
    height:36px;
    border-radius:12px;
  }
  .button{
    padding:.9rem 1rem;
  }
  .nav-cta{
    padding:.82rem 1rem;
    font-size:.92rem;
  }
  .article-shell{
    border-radius:24px;
  }
  .article-title{
    letter-spacing:-.035em;
  }
  .meta-row li{
    width:100%;
    justify-content:space-between;
  }
  .reader-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .side-stack,
  .card-grid{
    grid-template-columns:1fr;
  }
  .cta-content{
    align-items:flex-start;
    flex-direction:column;
  }
  .cta-actions,
  .cta-actions .button{
    width:100%;
  }
  .footer-inner{
    flex-direction:column;
  }
  .footer-links{
    justify-content:flex-start;
  }
}
@media (max-width:520px){
  .grid-container{
    padding-left:1rem;
    padding-right:1rem;
  }
  .brand-text{
    max-width:11.5rem;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .nav-cta{
    font-size:0;
    padding:.8rem .95rem;
  }
  .nav-cta::after{
    content:"最新";
    font-size:.88rem;
  }
  .article-hero{
    padding-top:1.35rem;
  }
  .article-shell,
  .reader-card,
  .cta-panel{
    border-radius:22px;
  }
  .article-content{
    font-size:1rem;
    line-height:1.9;
  }
  .article-content table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }
  .breadcrumb{
    font-size:.86rem;
  }
}