/* roulang page: index */
:root {
      --ink: #28201f;
      --muted: #756b68;
      --soft: #a59a96;
      --line: #eee2dc;
      --paper: #fffdfb;
      --warm: #fff7f1;
      --peach: #ff9d69;
      --coral: #f45b59;
      --berry: #c92f61;
      --mint: #dff3e8;
      --lemon: #fff0bf;
      --lavender: #eee4ff;
      --gradient: linear-gradient(115deg, #ffad70 0%, #f45b59 52%, #c92f61 100%);
      --shadow: 0 16px 42px rgba(95, 48, 40, .09);
      --shadow-small: 0 8px 24px rgba(95, 48, 40, .07);
      --radius-lg: 24px;
      --radius-md: 17px;
      --radius-sm: 12px;
      --container: 1240px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 90px; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      font-size: 15px;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button { color: inherit; }
    img { display: block; max-width: 100%; }
    :focus-visible { outline: 3px solid rgba(244, 91, 89, .5); outline-offset: 3px; }
    .container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
    .site-header {
      position: sticky; top: 0; z-index: 20; height: 72px;
      background: rgba(255, 253, 251, .94); border-bottom: 1px solid rgba(238, 226, 220, .85);
      backdrop-filter: blur(14px); transition: box-shadow .2s ease, background .2s ease;
    }
    .site-header.scrolled { box-shadow: 0 8px 24px rgba(74, 40, 35, .07); }
    .nav-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
    .brand-mark {
      width: 38px; height: 38px; display: grid; place-items: center; color: white;
      border-radius: 12px; background: var(--gradient); box-shadow: 0 6px 15px rgba(222, 70, 79, .24);
    }
    .brand-mark svg { width: 20px; height: 20px; }
    .brand-name { font-size: 17px; font-weight: 800; letter-spacing: 0; }
    .main-nav { display: flex; align-items: center; gap: 25px; margin-left: auto; }
    .main-nav a { position: relative; color: #665c59; font-size: 13px; font-weight: 650; transition: color .18s; }
    .main-nav a::after {
      position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; content: "";
      background: var(--gradient); transform: scaleX(0); transform-origin: left; transition: transform .18s;
    }
    .main-nav a:hover, .main-nav a.active { color: var(--berry); }
    .main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
    .nav-action, .button {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 44px; padding: 0 19px; border: 0; border-radius: 999px;
      font-weight: 750; transition: transform .18s, box-shadow .18s, background .18s;
      cursor: pointer;
    }
    .nav-action, .button-primary { color: #fff; background: var(--gradient); box-shadow: 0 8px 20px rgba(214, 61, 83, .22); }
    .nav-action { min-height: 40px; padding-inline: 17px; font-size: 13px; }
    .button:hover, .nav-action:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(214, 61, 83, .27); }
    .button:active, .nav-action:active { transform: translateY(0); }
    .button-secondary { border: 1px solid #f0d8cd; color: var(--berry); background: rgba(255,255,255,.78); }
    .button-secondary:hover { background: #fff0e9; }
    .menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: white; cursor: pointer; }
    .menu-toggle span, .menu-toggle::before, .menu-toggle::after { display: block; width: 18px; height: 2px; margin: 4px auto; content: ""; background: var(--ink); border-radius: 2px; }
    .hero {
      position: relative; overflow: hidden; padding: 56px 0 64px;
      background: #fff7f0;
    }
    .hero::before {
      position: absolute; inset: 0; content: ""; opacity: .4;
      background-image: radial-gradient(#e6b9a5 .7px, transparent .7px);
      background-size: 18px 18px; mask-image: linear-gradient(90deg, black, transparent 78%);
    }
    .hero-grid { position: relative; display: grid; grid-template-columns: 1fr 390px; align-items: center; gap: 56px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--berry); font-size: 12px; font-weight: 800; }
    .eyebrow::before { width: 18px; height: 2px; content: ""; background: var(--gradient); }
    h1 { max-width: 720px; margin: 17px 0 12px; font-size: clamp(38px, 5vw, 62px); line-height: 1.14; font-weight: 850; letter-spacing: 0; }
    .hero h1 span { color: var(--coral); }
    .hero-subtitle { margin: 0 0 14px; font-size: 17px; font-weight: 720; color: #554541; }
    .hero-copy { max-width: 670px; margin: 0; color: var(--muted); line-height: 1.9; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
    .hero-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
    .stat-pill { padding: 8px 13px; border: 1px solid #f1ddd3; border-radius: 999px; color: #68514b; background: rgba(255,255,255,.75); font-size: 12px; }
    .stat-pill strong { margin-right: 5px; color: var(--berry); font-size: 14px; }
    .search-stage { padding: 25px; border: 1px solid rgba(255,255,255,.9); border-radius: 28px; background: rgba(255,255,255,.82); box-shadow: var(--shadow); }
    .search-stage h2 { margin: 0 0 5px; font-size: 18px; }
    .search-stage p { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
    .search-form { display: flex; gap: 8px; }
    .search-form input { min-width: 0; flex: 1; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 13px; background: #fffaf7; color: var(--ink); }
    .search-form button { width: 48px; height: 46px; border: 0; border-radius: 13px; color: white; background: var(--gradient); cursor: pointer; }
    .search-form button svg { width: 18px; height: 18px; }
    .hot-terms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
    .hot-terms a { padding: 5px 10px; border-radius: 999px; color: #785d53; background: #fff0e8; font-size: 11px; }
    .hero-art { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; min-height: 312px; }
    .poster {
      position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
      aspect-ratio: 2 / 3; padding: 14px; border-radius: 18px; color: white; isolation: isolate;
      box-shadow: var(--shadow-small); transition: transform .25s ease;
    }
    .poster::before { position: absolute; inset: 0; z-index: -2; content: ""; background: var(--poster, linear-gradient(145deg,#f6ad72,#9c294e)); }
    .poster::after { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(180deg, transparent 35%, rgba(25,12,15,.82)); }
    .poster:hover { transform: translateY(-4px) rotate(-1deg); }
    .poster:nth-child(1) { transform: translateY(12px) rotate(-4deg); }
    .poster:nth-child(2) { transform: translateY(-12px) rotate(3deg); }
    .poster:nth-child(3) { transform: translateY(13px) rotate(3deg); }
    .poster:nth-child(4) { transform: translateY(-10px) rotate(-3deg); }
    .poster:nth-child(1)::before { background: linear-gradient(155deg,#f6be82 5%,#dc6675 48%,#5e284c); }
    .poster:nth-child(2)::before { background: linear-gradient(145deg,#8ac9b2,#277b81 52%,#253f57); }
    .poster:nth-child(3)::before { background: linear-gradient(145deg,#f2cc70,#e47751 50%,#8e3b53); }
    .poster:nth-child(4)::before { background: linear-gradient(145deg,#b8a3df,#70599c 48%,#31314c); }
    .poster-symbol { position: absolute; top: 18%; left: 50%; width: 72px; height: 72px; display: grid; place-items: center; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: rgba(255,255,255,.85); font-size: 26px; }
    .poster small { font-size: 10px; opacity: .82; }
    .poster strong { margin-top: 3px; font-size: 15px; line-height: 1.35; }
    .poster-badge { position: absolute; top: 10px; left: 10px; padding: 3px 7px; border-radius: 999px; color: #fff; background: rgba(42,24,25,.52); font-size: 9px; font-weight: 800; }
    .section { padding: 82px 0; }
    .section-tint { background: var(--warm); }
    .section-dark { color: white; background: #2d2223; }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
    .section-kicker { margin-bottom: 5px; color: var(--coral); font-size: 11px; font-weight: 850; text-transform: uppercase; }
    .section-head h2 { margin: 0; font-size: 30px; line-height: 1.3; font-weight: 830; }
    .section-head p { max-width: 560px; margin: 8px 0 0; color: var(--muted); font-size: 14px; }
    .section-dark .section-head p { color: #c7b9b5; }
    .text-link { color: var(--berry); font-size: 13px; font-weight: 750; white-space: nowrap; }
    .text-link:hover { color: var(--coral); }
    .pain-strip { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; }
    .pain-item { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: white; }
    .pain-item:first-child { background: #fff0e9; border-color: #f6d7c9; }
    .pain-icon { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--berry); background: #ffe0d2; font-weight: 850; }
    .pain-item h3 { margin: 1px 0 4px; font-size: 15px; }
    .pain-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
    .solution-layout { display: grid; grid-template-columns: 1.7fr .8fr; gap: 22px; }
    .solution-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .solution-card { display: flex; gap: 15px; align-items: center; min-height: 128px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: white; transition: transform .2s, box-shadow .2s; }
    .solution-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-small); }
    .solution-thumb { flex: 0 0 78px; width: 78px; height: 92px; display: grid; place-items: center; border-radius: 12px; color: white; background: var(--thumb, var(--gradient)); font-size: 24px; }
    .solution-card:nth-child(2) .solution-thumb { --thumb: linear-gradient(145deg,#83c7aa,#317b77); }
    .solution-card:nth-child(3) .solution-thumb { --thumb: linear-gradient(145deg,#f6c666,#e87553); }
    .solution-card:nth-child(4) .solution-thumb { --thumb: linear-gradient(145deg,#bba4df,#705294); }
    .solution-card h3 { margin: 0 0 4px; font-size: 15px; }
    .solution-card p { margin: 0 0 6px; color: var(--muted); font-size: 12px; line-height: 1.65; }
    .solution-card a { color: var(--berry); font-size: 11px; font-weight: 750; }
    .solution-aside { display: flex; flex-direction: column; justify-content: space-between; padding: 25px; border-radius: 22px; color: white; background: var(--gradient); }
    .solution-aside small { opacity: .8; font-weight: 700; }
    .solution-aside h3 { max-width: 240px; margin: 9px 0; font-size: 25px; line-height: 1.35; }
    .solution-aside p { margin: 0; color: rgba(255,255,255,.85); font-size: 13px; }
    .solution-aside .aside-count { margin-top: 24px; font-size: 12px; }
    .solution-aside .aside-count strong { display: block; font-size: 34px; line-height: 1.2; }
    .release-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px 16px; }
    .video-card { min-width: 0; }
    .cover {
      position: relative; overflow: hidden; aspect-ratio: 2/2.55; border-radius: 17px;
      background: var(--cover, linear-gradient(150deg,#f1bd81,#a33e5b 55%,#492943));
      box-shadow: 0 8px 20px rgba(70,35,38,.1); transition: transform .25s, box-shadow .25s;
    }
    .cover::before { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg,transparent 35%,rgba(23,12,17,.78)); }
    .cover::after { position: absolute; top: 16%; left: 50%; width: 44%; aspect-ratio: 1; content: ""; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.48); border-radius: 50%; box-shadow: 0 0 0 12px rgba(255,255,255,.08), 0 0 0 25px rgba(255,255,255,.05); }
    .video-card:hover .cover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(70,35,38,.16); }
    .video-card:nth-child(4n+2) .cover { --cover: linear-gradient(150deg,#9dcbb3,#337b7a 55%,#283c52); }
    .video-card:nth-child(4n+3) .cover { --cover: linear-gradient(150deg,#f4d27b,#db7754 55%,#783849); }
    .video-card:nth-child(4n) .cover { --cover: linear-gradient(150deg,#b7a2d9,#7a5a96 55%,#343047); }
    .video-card:nth-child(5n) .cover { --cover: linear-gradient(150deg,#f7a879,#e25d6c 55%,#632b55); }
    .cover-label { position: absolute; top: 11px; left: 11px; padding: 4px 8px; border-radius: 7px; color: white; background: rgba(39,22,24,.6); font-size: 10px; font-weight: 800; }
    .cover-title { position: absolute; right: 13px; bottom: 13px; left: 13px; color: white; font-size: 17px; font-weight: 800; line-height: 1.4; }
    .video-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 11px; }
    .video-meta h3 { overflow: hidden; margin: 0; font-size: 14px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
    .score { flex: 0 0 auto; padding: 3px 7px; border-radius: 8px; color: #8e4f0f; background: var(--lemon); font-size: 11px; font-weight: 850; }
    .video-sub { display: flex; gap: 8px; margin-top: 3px; color: var(--muted); font-size: 11px; }
    .steps { display: grid; grid-template-columns: repeat(4,1fr); position: relative; gap: 14px; }
    .steps::before { position: absolute; top: 23px; left: 7%; right: 7%; height: 2px; content: ""; background: repeating-linear-gradient(90deg,#f0c9bb 0 7px,transparent 7px 14px); }
    .step { position: relative; z-index: 1; padding: 0 12px 14px; }
    .step-num { width: 47px; height: 47px; display: grid; place-items: center; margin-bottom: 17px; border: 5px solid var(--warm); border-radius: 50%; color: white; background: var(--gradient); font-size: 13px; font-weight: 850; }
    .step h3 { margin: 0 0 5px; font-size: 15px; }
    .step p { margin: 0; color: var(--muted); font-size: 12px; }
    .step-ui { display: flex; gap: 5px; margin-top: 12px; }
    .step-ui i { width: 34px; height: 6px; border-radius: 5px; background: #f4d8cc; }
    .step-ui i:first-child { background: var(--coral); }
    .featured-layout { display: grid; grid-template-columns: 1fr 1fr 1.05fr; gap: 16px; }
    .feature-card { position: relative; min-height: 305px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 23px; border-radius: 21px; color: white; background: var(--feature, linear-gradient(145deg,#f6b977,#9d4059 54%,#412943)); }
    .feature-card::before { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg,rgba(25,14,18,.03),rgba(25,14,18,.78)); transition: opacity .2s; }
    .feature-card:hover::before { opacity: .82; }
    .feature-card:nth-child(2) { --feature: linear-gradient(145deg,#88c8b5,#2f7d7d 52%,#26354a); }
    .feature-card > * { position: relative; }
    .feature-card .trend { align-self: flex-start; margin-bottom: auto; padding: 5px 9px; border-radius: 999px; color: white; background: rgba(40,22,27,.4); font-size: 10px; font-weight: 800; }
    .feature-card h3 { margin: 0 0 5px; font-size: 22px; }
    .feature-card p { margin: 0; color: rgba(255,255,255,.83); font-size: 12px; }
    .compact-list { display: flex; flex-direction: column; gap: 9px; }
    .compact-item { display: flex; align-items: center; gap: 12px; min-height: 67px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; background: rgba(255,255,255,.07); transition: background .2s; }
    .compact-item:hover { background: rgba(255,255,255,.13); }
    .mini-cover { flex: 0 0 46px; width: 46px; height: 50px; border-radius: 9px; background: var(--mini, linear-gradient(145deg,#f2c079,#d95964)); }
    .compact-item:nth-child(2) .mini-cover { --mini: linear-gradient(145deg,#8bcab5,#367b79); }
    .compact-item:nth-child(3) .mini-cover { --mini: linear-gradient(145deg,#b8a3d9,#725398); }
    .compact-item:nth-child(4) .mini-cover { --mini: linear-gradient(145deg,#f6d67d,#da754e); }
    .compact-info { min-width: 0; flex: 1; }
    .compact-info strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
    .compact-info small { color: #cbb9b5; font-size: 10px; }
    .compact-score { color: #ffd889; font-size: 11px; font-weight: 850; }
    .data-quote-grid { display: grid; grid-template-columns: .9fr 1.5fr; gap: 30px; align-items: stretch; }
    .metric-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .metric { padding: 20px 16px; border: 1px solid var(--line); border-radius: 17px; background: white; }
    .metric strong { display: block; color: var(--berry); font-size: 27px; line-height: 1.2; }
    .metric span { color: var(--muted); font-size: 11px; }
    .quote-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; }
    .quote { padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: white; }
    .quote p { margin: 0 0 15px; color: #554946; font-size: 13px; line-height: 1.8; }
    .quote-footer { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }
    .avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--berry); background: #ffe5d9; font-weight: 850; }
    .stars { margin-left: auto; color: #e9a537; letter-spacing: 0; }
    .category-grid { display: grid; grid-template-columns: 1.2fr .9fr .9fr; grid-template-rows: 190px 190px; gap: 14px; }
    .category-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 20px; border-radius: 19px; color: white; background: var(--category, linear-gradient(145deg,#f2b276,#bb4c61 58%,#482c4a)); }
    .category-card::before { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg,transparent 10%,rgba(32,18,23,.76)); }
    .category-card:nth-child(1) { grid-row: span 2; --category: linear-gradient(145deg,#f0c47d,#dd6b58 48%,#632f51); }
    .category-card:nth-child(2) { --category: linear-gradient(145deg,#9fd0b8,#398281 52%,#2d4650); }
    .category-card:nth-child(3) { --category: linear-gradient(145deg,#c3addd,#8562a2 50%,#40334e); }
    .category-card:nth-child(4) { --category: linear-gradient(145deg,#f2dc8d,#db9957 52%,#68404a); }
    .category-card:nth-child(5) { --category: linear-gradient(145deg,#f0a07a,#c85672 52%,#493052); }
    .category-card > * { position: relative; }
    .category-card h3 { margin: 0 0 4px; font-size: 19px; }
    .category-card p { max-width: 380px; margin: 0; color: rgba(255,255,255,.87); font-size: 11px; line-height: 1.65; }
    .category-tag { position: absolute; top: 13px; left: 14px; padding: 4px 8px; border-radius: 999px; background: rgba(38,20,26,.32); font-size: 10px; }
    .scene-row { display: flex; flex-wrap: wrap; gap: 12px; }
    .scene-chip { display: flex; align-items: center; gap: 12px; min-width: 220px; padding: 13px 17px; border: 1px solid var(--line); border-radius: 16px; background: white; transition: border .18s, transform .18s; }
    .scene-chip:hover { transform: translateY(-3px); border-color: #f3bca8; }
    .scene-chip b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--berry); background: #ffe9de; }
    .scene-chip span { font-size: 13px; font-weight: 750; }
    .scene-chip small { display: block; color: var(--muted); font-size: 10px; font-weight: 450; }
    .rank-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 24px; }
    .rank-list { overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 19px; }
    .rank-row { display: grid; grid-template-columns: 44px 1fr 78px 55px 70px; align-items: center; gap: 10px; min-height: 54px; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,.09); }
    .rank-row:last-child { border-bottom: 0; }
    .rank-num { color: #cfbfbb; font-size: 14px; font-weight: 850; }
    .rank-row:nth-child(-n+3) .rank-num { color: #ffb363; font-size: 19px; }
    .rank-name { overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .rank-hot, .rank-rate { color: #d0c1bd; font-size: 11px; }
    .rank-rate { color: #ffd889; font-weight: 800; }
    .rank-category { justify-self: end; padding: 3px 8px; border-radius: 999px; color: #f6c9b7; background: rgba(244,91,89,.16); font-size: 10px; }
    .top-focus { display: flex; flex-direction: column; gap: 12px; }
    .top-focus-card { position: relative; flex: 1; min-height: 155px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 19px; border-radius: 18px; background: linear-gradient(145deg,#f1c176,#d76559 50%,#53304e); }
    .top-focus-card:nth-child(2) { background: linear-gradient(145deg,#9fcab2,#488982 52%,#2b3d51); }
    .top-focus-card::before { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg,transparent,rgba(25,15,20,.7)); }
    .top-focus-card > * { position: relative; }
    .top-focus-card small { color: #ffd99e; font-weight: 800; }
    .top-focus-card h3 { margin: 2px 0; font-size: 18px; }
    .top-focus-card p { margin: 0; color: rgba(255,255,255,.78); font-size: 11px; }
    .news-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 23px; }
    .news-feature { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: white; }
    .news-image { min-height: 230px; background: linear-gradient(145deg,#f0b985,#d35d67 50%,#55314e); position: relative; }
    .news-image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(135deg,transparent 30%,rgba(47,24,37,.35)); }
    .news-feature-body { padding: 20px; }
    .news-tag { color: var(--berry); font-size: 10px; font-weight: 850; }
    .news-feature h3 { margin: 5px 0 7px; font-size: 19px; line-height: 1.45; }
    .news-feature p { margin: 0; color: var(--muted); font-size: 12px; }
    .news-side { display: flex; flex-direction: column; gap: 10px; }
    .news-item { display: flex; align-items: center; gap: 13px; padding: 10px; border-bottom: 1px solid var(--line); transition: background .18s; }
    .news-item:hover { background: #fff8f4; }
    .news-thumb { flex: 0 0 74px; height: 57px; border-radius: 10px; background: var(--news, linear-gradient(145deg,#f0c47f,#d26565)); }
    .news-item:nth-child(2) .news-thumb { --news: linear-gradient(145deg,#9ccbb3,#39827e); }
    .news-item:nth-child(3) .news-thumb { --news: linear-gradient(145deg,#c0a9df,#80609c); }
    .news-item:nth-child(4) .news-thumb { --news: linear-gradient(145deg,#f1d681,#da8650); }
    .news-item:nth-child(5) .news-thumb { --news: linear-gradient(145deg,#f2a17c,#c35172); }
    .news-item:nth-child(6) .news-thumb { --news: linear-gradient(145deg,#a4c5dc,#4c7294); }
    .news-item strong { display: block; font-size: 12px; line-height: 1.5; }
    .news-item small { color: var(--muted); font-size: 10px; }
    .resource-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px; }
    .resource { padding: 21px; border-radius: 18px; background: white; border: 1px solid var(--line); }
    .resource:first-child { background: #fff0e8; border-color: #f3d4c6; }
    .resource-number { color: var(--coral); font-size: 11px; font-weight: 850; }
    .resource h3 { margin: 7px 0 5px; font-size: 16px; }
    .resource p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
    .resource a { display: inline-block; margin-top: 10px; color: var(--berry); font-size: 11px; font-weight: 800; }
    .saved-band { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 26px 30px; border: 1px solid #f3d7cc; border-radius: 22px; background: linear-gradient(100deg,#fff2e9,#fff9f3 60%,#fcedf0); }
    .saved-band h2 { margin: 0 0 4px; font-size: 22px; }
    .saved-band p { margin: 0; color: var(--muted); font-size: 13px; }
    .saved-heart { width: 55px; height: 55px; flex: 0 0 55px; display: grid; place-items: center; border-radius: 18px; color: var(--berry); background: white; font-size: 24px; box-shadow: var(--shadow-small); }
    .faq-list { max-width: 850px; margin-inline: auto; }
    details { border-bottom: 1px solid var(--line); }
    summary { position: relative; padding: 19px 38px 19px 0; list-style: none; cursor: pointer; font-size: 15px; font-weight: 750; }
    summary::-webkit-details-marker { display: none; }
    summary::after { position: absolute; top: 18px; right: 3px; content: "+"; color: var(--berry); font-size: 23px; line-height: 1; transition: transform .2s; }
    details[open] summary::after { content: "−"; }
    details p { max-width: 760px; margin: -2px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.85; }
    .closing-cta { margin-top: 40px; padding: 33px 38px; border-radius: 24px; color: white; background: var(--gradient); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .closing-cta h2 { margin: 0 0 5px; font-size: 25px; }
    .closing-cta p { margin: 0; color: rgba(255,255,255,.86); font-size: 13px; }
    .closing-cta .button { color: var(--berry); background: white; box-shadow: none; white-space: nowrap; }
    .closing-cta .button:hover { background: #fff4ed; }
    .site-footer { padding: 54px 0 22px; color: #e9deda; background: #292122; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 35px; padding-bottom: 35px; }
    .footer-brand .brand-name { color: white; }
    .footer-brand p { max-width: 310px; color: #b8a9a6; font-size: 12px; }
    .footer-col h3 { margin: 0 0 13px; color: white; font-size: 13px; }
    .footer-col a { display: block; width: fit-content; margin: 7px 0; color: #b8a9a6; font-size: 12px; }
    .footer-col a:hover { color: #ffb093; }
    .footer-bottom { display: flex; justify-content: space-between; gap: 15px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); color: #a99996; font-size: 11px; }
    .footer-bottom a { color: #d4c4bf; }
    @media (max-width: 1200px) {
      .container { width: min(var(--container), calc(100% - 40px)); }
      .main-nav { gap: 16px; }
      .hero-grid { grid-template-columns: 1fr 340px; gap: 32px; }
      .release-grid { gap: 17px 13px; }
    }
    @media (max-width: 992px) {
      .main-nav { gap: 13px; }
      .main-nav a { font-size: 12px; }
      .nav-action { padding-inline: 13px; }
      .hero-grid { grid-template-columns: 1fr 300px; gap: 24px; }
      .hero-art { min-height: 260px; gap: 8px; }
      .solution-layout { grid-template-columns: 1.5fr .8fr; }
      .release-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
      .featured-layout { grid-template-columns: 1fr 1fr; }
      .compact-list { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
      .data-quote-grid { grid-template-columns: 1fr; }
      .category-grid { grid-template-rows: 170px 170px; }
      .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    }
    @media (max-width: 768px) {
      html { scroll-padding-top: 72px; }
      .site-header { height: 64px; }
      .nav-wrap { gap: 12px; }
      .menu-toggle { display: block; order: 3; }
      .nav-action { margin-left: auto; min-height: 38px; }
      .main-nav {
        position: absolute; top: 63px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch;
        gap: 0; padding: 8px 22px 15px; border-bottom: 1px solid var(--line); background: var(--paper);
        box-shadow: 0 12px 18px rgba(74,40,35,.08);
      }
      .main-nav.open { display: flex; }
      .main-nav a { padding: 11px 4px; font-size: 14px; }
      .main-nav a::after { bottom: 4px; right: auto; width: 36px; }
      .hero { padding: 44px 0 48px; }
      .hero-grid { grid-template-columns: 1fr; gap: 24px; }
      .hero-art { max-width: 430px; min-height: auto; margin: 5px auto 0; }
      .poster { max-width: 190px; }
      .search-stage { max-width: 560px; }
      .section { padding: 64px 0; }
      .section-head { align-items: flex-start; flex-direction: column; gap: 12px; }
      .section-head h2 { font-size: 26px; }
      .pain-strip { grid-template-columns: 1fr; }
      .solution-layout { grid-template-columns: 1fr; }
      .solution-aside { min-height: 190px; }
      .steps { grid-template-columns: 1fr 1fr; row-gap: 25px; }
      .steps::before { display: none; }
      .featured-layout { grid-template-columns: 1fr 1fr; }
      .feature-card { min-height: 270px; }
      .compact-list { grid-column: 1 / -1; }
      .category-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 160px 160px; }
      .category-card:nth-child(1) { grid-row: span 2; }
      .category-card:nth-child(5) { grid-column: 1 / -1; }
      .rank-layout { grid-template-columns: 1fr; }
      .top-focus { display: grid; grid-template-columns: 1fr 1fr; }
      .top-focus-card { min-height: 145px; }
      .news-layout { grid-template-columns: 1fr; }
      .news-image { min-height: 200px; }
      .resource-grid { grid-template-columns: 1fr 1fr; }
      .resource:first-child { grid-column: 1 / -1; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 25px; }
    }
    @media (max-width: 576px) {
      .container { width: calc(100% - 32px); }
      .brand-mark { width: 35px; height: 35px; }
      .brand-name { font-size: 15px; }
      .nav-action { display: none; }
      .hero { padding-top: 36px; }
      h1 { font-size: 39px; }
      .hero-subtitle { font-size: 15px; }
      .hero-copy { font-size: 13px; }
      .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
      .hero-actions .button { min-height: 43px; padding-inline: 12px; font-size: 12px; }
      .hero-stats { gap: 7px; }
      .stat-pill { padding: 6px 9px; font-size: 10px; }
      .hero-art { gap: 8px; }
      .poster { padding: 10px; border-radius: 14px; }
      .poster-symbol { width: 52px; height: 52px; font-size: 20px; }
      .poster strong { font-size: 12px; }
      .search-stage { padding: 19px; }
      .section { padding: 53px 0; }
      .section-head h2 { font-size: 23px; }
      .solution-list { grid-template-columns: 1fr; }
      .solution-card { min-height: 110px; }
      .release-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 11px; }
      .cover { border-radius: 14px; }
      .cover-title { font-size: 14px; }
      .video-meta h3 { font-size: 12px; }
      .score { font-size: 10px; }
      .steps { grid-template-columns: 1fr; gap: 14px; }
      .step { display: grid; grid-template-columns: 47px 1fr; column-gap: 13px; padding: 0; }
      .step-num { grid-row: span 3; margin-bottom: 0; }
      .step h3 { align-self: end; }
      .step-ui { margin-top: 8px; }
      .featured-layout { grid-template-columns: 1fr; }
      .feature-card { min-height: 245px; }
      .compact-list { grid-column: auto; display: flex; }
      .metric-panel { gap: 8px; }
      .metric { padding: 16px 12px; }
      .metric strong { font-size: 23px; }
      .quote-list { grid-template-columns: 1fr; }
      .category-grid { grid-template-rows: 190px 145px 145px 145px; gap: 10px; }
      .category-card { padding: 14px; }
      .category-card:nth-child(1) { grid-row: span 2; }
      .category-card h3 { font-size: 16px; }
      .category-card p { font-size: 10px; }
      .scene-chip { min-width: 0; width: 100%; }
      .rank-row { grid-template-columns: 31px minmax(0,1fr) 53px 40px; gap: 7px; padding: 8px 10px; }
      .rank-category { display: none; }
      .rank-hot, .rank-rate { font-size: 10px; }
      .rank-name { font-size: 11px; }
      .top-focus { grid-template-columns: 1fr; }
      .top-focus-card { min-height: 130px; }
      .news-item { gap: 10px; }
      .news-thumb { flex-basis: 64px; height: 52px; }
      .resource-grid { grid-template-columns: 1fr; }
      .resource:first-child { grid-column: auto; }
      .saved-band { align-items: flex-start; padding: 20px; }
      .saved-band h2 { font-size: 18px; }
      .saved-band p { font-size: 11px; }
      .saved-band .button { padding-inline: 12px; font-size: 11px; }
      .saved-heart { width: 42px; height: 42px; flex-basis: 42px; font-size: 19px; }
      .closing-cta { align-items: flex-start; flex-direction: column; padding: 25px; }
      .closing-cta h2 { font-size: 21px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 14px; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-bottom { flex-direction: column; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }