/* roulang page: index */
:root {
      --ink: #172033;
      --muted: #687386;
      --soft: #f5f7fb;
      --paper: #ffffff;
      --line: #e5e9f1;
      --brand: #d44d71;
      --brand-dark: #ad3154;
      --accent: #f0b35d;
      --deep: #101827;
      --radius: 22px;
      --shadow: 0 18px 48px rgba(24, 36, 60, .10);
      --container: 1180px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.75;
      letter-spacing: 0;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; width: 100%; object-fit: cover; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    .container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
    .site-header {
      position: sticky; top: 0; z-index: 20;
      background: rgba(255,255,255,.92);
      border-bottom: 1px solid rgba(229,233,241,.85);
      backdrop-filter: blur(14px);
    }
    .nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; white-space: nowrap; }
    .brand-mark {
      width: 38px; height: 38px; border-radius: 12px;
      display: grid; place-items: center; color: #fff; font-weight: 900;
      background: linear-gradient(135deg, var(--brand), #e69b73);
      box-shadow: 0 9px 20px rgba(212,77,113,.25);
    }
    .brand-name { font-size: 17px; letter-spacing: .5px; }
    .nav-links { display: flex; align-items: center; gap: 6px; }
    .nav-links a {
      padding: 9px 13px; color: var(--muted); border-radius: 10px;
      transition: color .2s, background .2s;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--brand-dark); background: #fff1f4; }
    .nav-cta { padding: 11px 18px; border-radius: 12px; color: #fff; background: var(--deep); font-weight: 700; transition: transform .2s, background .2s; }
    .nav-cta:hover { transform: translateY(-2px); background: var(--brand-dark); }
    .menu-button { display: none; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 11px; color: var(--ink); }
    .hero { padding: 72px 0 86px; overflow: hidden; background: linear-gradient(135deg, #fff8f8 0%, #fff 55%, #f5f8ff 100%); }
    .hero-grid { display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: 54px; }
    .hero-copy { position: relative; z-index: 2; }
    .eyebrow, .section-kicker { color: var(--brand-dark); font-size: 13px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }
    h1, h2, h3, p { margin-top: 0; }
    h1 { margin: 14px 0 20px; max-width: 610px; font-size: clamp(36px, 5vw, 64px); line-height: 1.16; letter-spacing: 0; }
    h1 em { color: var(--brand); font-style: normal; }
    .hero-copy > p { max-width: 590px; color: var(--muted); font-size: 18px; }
    .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 30px; }
    .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 21px; border: 1px solid transparent; border-radius: 13px; font-weight: 750; transition: transform .2s, box-shadow .2s, background .2s; }
    .button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(24,36,60,.14); }
    .button-primary { color: #fff; background: var(--brand); }
    .button-primary:hover { background: var(--brand-dark); }
    .button-light { color: var(--ink); border-color: var(--line); background: #fff; }
    .hero-stats { display: flex; gap: 26px; flex-wrap: wrap; }
    .hero-stat strong { display: block; font-size: 22px; color: var(--ink); }
    .hero-stat span { color: var(--muted); font-size: 13px; }
    .hero-media { position: relative; transform: translate(18px, 16px) rotate(3deg); }
    .hero-media img { height: 510px; border-radius: 30px; box-shadow: 0 28px 60px rgba(28,39,62,.22); }
    .hero-media::after { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid #f0bbc7; border-radius: 30px; z-index: -1; }
    .media-note { position: absolute; left: -28px; bottom: 28px; max-width: 230px; padding: 18px; border-radius: 16px; color: #fff; background: var(--deep); box-shadow: var(--shadow); transform: rotate(-3deg); }
    .media-note strong { display: block; font-size: 18px; }
    .section { padding: 82px 0; }
    .section-tint { background: var(--soft); }
    .section-dark { color: #fff; background: var(--deep); }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
    .section-head h2 { margin: 8px 0 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.25; }
    .section-head p { max-width: 570px; margin: 0; color: var(--muted); }
    .section-dark .section-head p { color: #aab4c6; }
    .story-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center; }
    .story-grid p { color: var(--muted); }
    .story-quote { padding: 28px; border-left: 4px solid var(--brand); background: #fff; border-radius: 0 18px 18px 0; box-shadow: var(--shadow); }
    .story-quote strong { display: block; margin-top: 15px; }
    .channel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .channel { padding: 25px; min-height: 180px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform .2s, box-shadow .2s; }
    .channel:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
    .channel-number { color: var(--brand); font-weight: 800; }
    .channel h3 { margin: 17px 0 8px; font-size: 20px; }
    .channel p { color: var(--muted); font-size: 14px; }
    .content-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .content-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: transform .2s, box-shadow .2s; }
    .content-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
    .content-card img { aspect-ratio: 4 / 3; }
    .card-body { padding: 16px; }
    .card-title { margin: 0 0 8px; font-weight: 800; }
    .card-meta { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 13px; gap: 8px; }
    .badge { display: inline-flex; padding: 3px 8px; color: var(--brand-dark); background: #fff0f3; border-radius: 7px; font-size: 11px; font-weight: 800; }
    .rating { color: #c27a19; font-weight: 800; }
    .benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .benefit { padding: 26px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.06); }
    .benefit-icon { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; border-radius: 12px; background: var(--brand); font-weight: 900; }
    .benefit h3 { margin: 19px 0 8px; font-size: 20px; }
    .benefit p { margin: 0; color: #b9c2d0; font-size: 14px; }
    .ranking-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; }
    .ranking-list { margin: 0; padding: 0; list-style: none; }
    .ranking-item { display: grid; grid-template-columns: 42px 1fr auto auto; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
    .rank { color: var(--brand); font-size: 20px; font-weight: 900; }
    .rank-name { font-weight: 750; }
    .rank-type { color: var(--muted); font-size: 13px; }
    .rank-hot { color: #c27a19; font-size: 13px; }
    .feature-panel { padding: 30px; border-radius: 24px; color: #fff; background: linear-gradient(145deg, #202b43, #121827); }
    .feature-panel h3 { font-size: 26px; }
    .feature-panel p { color: #bac4d5; }
    .feature-panel .metric { display: flex; align-items: baseline; gap: 8px; margin: 24px 0; }
    .metric strong { font-size: 48px; color: #f5c27d; line-height: 1; }
    .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .news-item { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
    .news-item img { height: 100%; min-height: 92px; border-radius: 11px; }
    .news-item h3 { margin: 4px 0 8px; font-size: 16px; line-height: 1.45; }
    .news-item time { color: var(--muted); font-size: 12px; }
    .trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--line); }
    .trust-item { padding: 22px; background: #fff; }
    .trust-item strong { display: block; font-size: 25px; }
    .trust-item span { color: var(--muted); font-size: 13px; }
    .quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .quote-card { padding: 25px; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(24,36,60,.07); }
    .quote-card p { color: var(--muted); }
    .quote-card cite { color: var(--ink); font-style: normal; font-weight: 800; }
    .faq-list { max-width: 850px; margin: 0 auto; }
    details { padding: 19px 0; border-bottom: 1px solid var(--line); }
    summary { cursor: pointer; font-weight: 800; list-style: none; }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; float: right; color: var(--brand); font-size: 22px; }
    details[open] summary::after { content: "−"; }
    details p { max-width: 760px; margin: 12px 0 0; color: var(--muted); }
    .final-cta { padding: 60px 0; color: #fff; background: linear-gradient(110deg, #b93559, #dc7180); }
    .final-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .final-cta h2 { margin: 0 0 8px; font-size: 32px; }
    .final-cta p { margin: 0; color: #ffe8ed; }
    .final-cta .button { color: var(--brand-dark); background: #fff; }
    footer { padding: 58px 0 22px; color: #b8c1d1; background: #0d1421; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px; padding-bottom: 42px; }
    footer .brand { color: #fff; }
    footer h3 { margin: 0 0 14px; color: #fff; font-size: 15px; }
    footer p, footer a { color: #a8b2c3; font-size: 14px; }
    footer a { display: block; margin: 7px 0; transition: color .2s; }
    footer a:hover { color: #fff; }
    .footer-bottom { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; color: #8792a5; }
    :focus-visible { outline: 3px solid rgba(212,77,113,.38); outline-offset: 3px; }
    @media (max-width: 1024px) {
      .hero-grid, .story-grid, .ranking-layout { grid-template-columns: 1fr; }
      .hero-media { max-width: 680px; margin: 0 auto; transform: translate(0, 12px) rotate(2deg); }
      .channel-grid { grid-template-columns: repeat(2, 1fr); }
      .content-grid { grid-template-columns: repeat(3, 1fr); }
      .news-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .container { width: min(var(--container), calc(100% - 28px)); }
      .nav-wrap { min-height: 68px; }
      .menu-button { display: block; }
      .nav-links { display: none; position: absolute; left: 14px; right: 14px; top: 74px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
      .nav-links.open { display: grid; }
      .nav-links a { padding: 11px 13px; }
      .nav-cta { display: none; }
      .hero { padding: 50px 0 68px; }
      .hero-copy > p { font-size: 16px; }
      .hero-media img { height: 380px; }
      .content-grid { grid-template-columns: repeat(2, 1fr); }
      .benefit-grid, .quote-grid { grid-template-columns: 1fr; }
      .trust-bar { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
      .final-cta-inner { align-items: flex-start; flex-direction: column; }
    }
    @media (max-width: 520px) {
      h1 { font-size: 38px; }
      .section { padding: 58px 0; }
      .section-head { display: block; }
      .section-head p { margin-top: 12px; }
      .channel-grid, .content-grid, .news-grid { grid-template-columns: 1fr; }
      .hero-stats { gap: 16px; }
      .hero-media img { height: 300px; }
      .media-note { left: 12px; bottom: 16px; }
      .ranking-item { grid-template-columns: 32px 1fr auto; }
      .ranking-item .badge { display: none; }
      .trust-bar { grid-template-columns: 1fr 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
      .brand-name { font-size: 14px; }
    }

/* roulang page: category1 */
:root{
 --ink:#172033;--muted:#687386;--soft:#f5f7fb;--paper:#fff;--line:#e5e9f1;
 --brand:#d44d71;--brand-dark:#ad3154;--accent:#f0b35d;--deep:#101827;
 --radius:22px;--shadow:0 18px 48px rgba(24,36,60,.10);--container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:16px;line-height:1.75}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;object-fit:cover}
button,input{font:inherit}
button{cursor:pointer}
.container{width:min(var(--container),calc(100% - 40px));margin:0 auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.93);border-bottom:1px solid rgba(229,233,241,.85);backdrop-filter:blur(14px)}
.nav-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:800;white-space:nowrap}
.brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:900;background:linear-gradient(135deg,var(--brand),#e69b73);box-shadow:0 9px 20px rgba(212,77,113,.25)}
.brand-name{font-size:17px;letter-spacing:.5px}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{padding:9px 13px;color:var(--muted);border-radius:10px;transition:.2s}
.nav-links a:hover,.nav-links a.active{color:var(--brand-dark);background:#fff1f4}
.nav-cta{padding:11px 18px;border-radius:12px;color:#fff;background:var(--deep);font-weight:700;transition:.2s}
.nav-cta:hover{transform:translateY(-2px);background:var(--brand-dark)}
.menu-button{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 11px;color:var(--ink)}
.hero{padding:78px 0 84px;background:linear-gradient(135deg,#fff8f8 0%,#fff 56%,#f5f8ff 100%);overflow:hidden}
.hero-inner{max-width:850px;margin:auto;text-align:center}
.eyebrow,.section-kicker{color:var(--brand-dark);font-size:13px;font-weight:800;letter-spacing:1.8px}
.hero h1{margin:14px 0 16px;font-size:clamp(34px,5vw,64px);line-height:1.16;letter-spacing:-1px}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero-lead{max-width:700px;margin:0 auto;color:var(--muted);font-size:18px}
.search-box{display:flex;max-width:650px;margin:30px auto 18px;padding:7px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.search-box input{min-width:0;flex:1;padding:10px 16px;border:0;outline:0;color:var(--ink);background:transparent}
.search-box button{border:0;border-radius:11px;padding:12px 22px;color:#fff;background:var(--brand);font-weight:700;transition:.2s}
.search-box button:hover{background:var(--brand-dark)}
.chips{display:flex;justify-content:center;flex-wrap:wrap;gap:9px}
.chip{padding:7px 13px;border:1px solid #f0d6dc;border-radius:30px;color:var(--brand-dark);background:#fff7f8;font-size:13px}
.hero-note{display:inline-flex;margin-top:30px;padding:9px 15px;border-radius:30px;color:#596579;background:rgba(255,255,255,.72);border:1px solid var(--line);font-size:13px}
.section{padding:78px 0}
.section-tint{background:var(--soft)}
.section-dark{color:#fff;background:var(--deep)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}
.section-head h2{margin:8px 0 0;font-size:clamp(26px,3vw,38px);line-height:1.25}
.section-head p{max-width:570px;margin:0;color:var(--muted)}
.section-dark .section-head p{color:#aab4c6}
.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:35px;align-items:stretch}
.intro-copy{padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.intro-copy h2{margin:8px 0 16px;font-size:32px;line-height:1.3}
.intro-copy p{color:var(--muted)}
.signal-box{padding:32px;border-radius:var(--radius);color:#fff;background:linear-gradient(145deg,#26334e,#121827);box-shadow:var(--shadow)}
.signal-box h3{margin:0 0 18px;font-size:24px}
.signal-list{margin:0;padding:0;list-style:none}
.signal-list li{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.13);color:#c1cada}
.signal-list strong{color:#fff}
.channel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.channel-card{min-height:185px;padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff;transition:.2s}
.channel-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#f1c5cf}
.channel-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:var(--brand-dark);background:#fff0f3;font-weight:800}
.channel-card h3{margin:17px 0 8px;font-size:19px}
.channel-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.content-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.content-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;transition:.2s}
.content-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.content-card img{aspect-ratio:4/3}
.card-body{padding:16px}
.card-title{margin:0 0 8px;font-weight:800}
.card-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px;gap:8px}
.badge{display:inline-flex;padding:3px 8px;color:var(--brand-dark);background:#fff0f3;border-radius:7px;font-size:11px;font-weight:800}
.rating{color:#a16b22;font-weight:800}
.more-row{margin-top:28px;text-align:center}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 21px;border:1px solid transparent;border-radius:13px;font-weight:750;transition:.2s}
.button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(24,36,60,.14)}
.button-primary{color:#fff;background:var(--brand)}
.button-primary:hover{background:var(--brand-dark)}
.button-light{color:var(--ink);border-color:var(--line);background:#fff}
.ranking-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:40px}
.ranking-list{margin:0;padding:0;list-style:none}
.ranking-item{display:grid;grid-template-columns:42px 1fr auto auto;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.rank-no{font-size:20px;font-weight:900;color:#c5cbd6}
.rank-no.hot{color:var(--brand)}
.rank-name{font-weight:750}
.rank-type{display:inline-flex;padding:3px 8px;border-radius:7px;color:#667083;background:#f0f3f8;font-size:11px}
.rank-score{color:var(--brand-dark);font-weight:800}
.feature-panel{padding:31px;border-radius:24px;color:#fff;background:linear-gradient(145deg,#202b43,#121827)}
.feature-panel h3{font-size:26px;line-height:1.35}
.feature-panel p{color:#bac4d5}
.metric-row{display:flex;gap:25px;margin:25px 0}
.metric strong{display:block;font-size:28px}
.metric span{color:#aeb9ca;font-size:13px}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.news-item{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:.2s}
.news-item:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.news-item img{height:100%;min-height:92px;border-radius:11px}
.news-item h3{margin:4px 0 8px;font-size:16px;line-height:1.45}
.news-item time{color:var(--muted);font-size:12px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.faq-item{padding:23px 25px;border:1px solid var(--line);border-radius:16px;background:#fff}
.faq-item h3{margin:0 0 8px;font-size:17px}
.faq-item p{margin:0;color:var(--muted);font-size:14px}
.cta-box{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:35px;border-radius:24px;background:linear-gradient(135deg,#fff0f3,#fff8ee);border:1px solid #f3d6dc}
.cta-box h2{margin:0 0 8px;font-size:30px}
.cta-box p{margin:0;color:var(--muted)}
footer{padding:58px 0 20px;color:#bac4d5;background:var(--deep)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
footer .brand{color:#fff}
footer .brand-name{font-size:16px}
footer p{max-width:290px;color:#9ca9bb;font-size:14px}
footer h3{margin:0 0 13px;color:#fff;font-size:15px}
footer .footer-grid>div:not(:first-child) a{display:block;margin:7px 0;color:#9ca9bb;font-size:14px}
footer a:hover{color:#fff}
.footer-bottom{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);color:#8896a9;font-size:13px}
:focus-visible{outline:3px solid rgba(212,77,113,.35);outline-offset:3px}
@media(max-width:1024px){
 .nav-links{gap:0}.nav-links a{padding:8px 8px;font-size:14px}
 .content-grid{grid-template-columns:repeat(3,1fr)}.channel-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
 .container{width:min(var(--container),calc(100% - 30px))}
 .nav-cta{display:none}.menu-button{display:block}
 .nav-links{display:none;position:absolute;top:76px;left:15px;right:15px;padding:12px;flex-direction:column;align-items:stretch;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}
 .nav-links.open{display:flex}.nav-links a{padding:11px 14px}
 .hero{padding:58px 0 65px}.hero h1{font-size:40px}.hero-lead{font-size:16px}
 .intro-grid,.ranking-wrap{grid-template-columns:1fr}.content-grid{grid-template-columns:repeat(2,1fr)}
 .section{padding:60px 0}.section-head{display:block}.section-head p{margin-top:12px}
 .news-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}
 .cta-box{display:block}.cta-box .button{margin-top:22px}
}
@media(max-width:520px){
 .brand-name{font-size:14px}.brand-mark{width:35px;height:35px}
 .hero h1{font-size:33px}.search-box{display:block;padding:8px}.search-box input{width:100%;padding:12px}.search-box button{width:100%;margin-top:6px}
 .channel-grid,.content-grid,.faq-grid{grid-template-columns:1fr}
 .ranking-item{grid-template-columns:32px 1fr auto;gap:9px}.ranking-item .rank-type{display:none}
 .news-item{grid-template-columns:100px 1fr}.news-item img{min-height:80px}
 .footer-grid{grid-template-columns:1fr 1fr;gap:25px}.footer-grid>div:first-child{grid-column:1/-1}
 .footer-bottom{margin-top:28px;font-size:12px}
}