/* roulang page: index */
:root {
      color-scheme: light;
      --ink: #171a18;
      --ink-soft: #252a27;
      --paper: #ffffff;
      --canvas: #f4f5f2;
      --mist: #e9efeb;
      --mint: #c9e3d5;
      --mint-strong: #24765e;
      --coral: #e95f50;
      --coral-dark: #c9483d;
      --gold: #e4b45e;
      --text: #222724;
      --muted: #68716b;
      --line: #dfe4df;
      --line-dark: rgba(255,255,255,.16);
      --shadow-sm: 0 5px 18px rgba(22, 30, 25, .07);
      --shadow-md: 0 16px 38px rgba(22, 30, 25, .12);
      --shadow-lg: 0 24px 70px rgba(10, 14, 12, .28);
      --radius-sm: 5px;
      --radius-md: 9px;
      --radius-lg: 14px;
      --container: 1240px;
      --ease: 180ms ease;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 88px; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      font-size: 15px;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    body.menu-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button, input { font: inherit; }
    button { color: inherit; }
    p, h1, h2, h3, ul, ol { margin-top: 0; }
    p:last-child { margin-bottom: 0; }
    ::selection { background: var(--mint); color: var(--ink); }
    :focus-visible {
      outline: 3px solid var(--gold);
      outline-offset: 3px;
    }

    .container {
      width: min(var(--container), calc(100% - 48px));
      margin-inline: auto;
    }
    .skip-link {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 120;
      padding: 10px 16px;
      transform: translateY(-160%);
      color: #fff;
      background: var(--ink);
      border-radius: var(--radius-sm);
    }
    .skip-link:focus { transform: translateY(0); }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 40;
      background: rgba(255,255,255,.96);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(16px);
    }
    .header-inner {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }
    .brand {
      display: inline-flex;
      min-width: 0;
      align-items: center;
      gap: 11px;
      color: var(--ink);
      font-size: 17px;
      font-weight: 800;
      letter-spacing: 0;
      white-space: nowrap;
    }
    .brand-mark {
      display: grid;
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      place-items: center;
      color: #fff;
      background: var(--coral);
      border-radius: 7px;
      font-size: 19px;
      line-height: 1;
    }
    .brand-name { overflow: hidden; text-overflow: ellipsis; }
    .primary-nav {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-left: auto;
    }
    .primary-nav a {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      padding: 0 15px;
      color: #5d655f;
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-weight: 650;
      transition: background var(--ease), color var(--ease);
    }
    .primary-nav a:hover,
    .primary-nav a:focus-visible {
      color: var(--ink);
      background: var(--canvas);
    }
    .primary-nav a[aria-current="page"] {
      color: var(--coral-dark);
      background: #fff1ef;
    }
    .header-note {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
    }
    .header-note strong {
      display: grid;
      width: 28px;
      height: 28px;
      place-items: center;
      color: var(--coral-dark);
      background: #fff1ef;
      border-radius: 50%;
      font-size: 11px;
    }
    .menu-toggle {
      display: none;
      width: 42px;
      height: 42px;
      padding: 10px;
      place-items: center;
      background: var(--canvas);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      cursor: pointer;
    }
    .menu-toggle span {
      display: block;
      width: 18px;
      height: 2px;
      margin: 2px 0;
      background: var(--ink);
      transition: transform var(--ease), opacity var(--ease);
    }
    .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); }

    .hero {
      overflow: hidden;
      color: #fff;
      background: var(--ink);
    }
    .hero-grid {
      min-height: 520px;
      display: grid;
      grid-template-columns: 5fr 7fr;
      align-items: center;
      gap: 26px;
      padding-block: 42px 50px;
    }
    .hero-copy {
      position: relative;
      z-index: 1;
      max-width: 510px;
      padding: 28px 0 24px;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 18px;
      color: var(--mint);
      font-size: 12px;
      font-weight: 750;
      letter-spacing: 0;
      text-transform: uppercase;
    }
    .eyebrow::before {
      width: 24px;
      height: 2px;
      content: "";
      background: var(--coral);
    }
    .hero h1 {
      max-width: 580px;
      margin-bottom: 11px;
      color: #fff;
      font-size: clamp(34px, 4vw, 53px);
      font-weight: 850;
      line-height: 1.22;
      letter-spacing: 0;
    }
    .hero h1 span { color: var(--mint); }
    .hero-subtitle {
      margin-bottom: 18px;
      color: #f0f3ef;
      font-size: 18px;
      font-weight: 650;
    }
    .hero-description {
      max-width: 490px;
      margin-bottom: 25px;
      color: #c2cbc4;
      font-size: 14px;
      line-height: 1.95;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 11px;
      margin-bottom: 24px;
    }
    .button {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 0 19px;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 14px;
      font-weight: 750;
      line-height: 1.2;
      transition: transform var(--ease), background var(--ease), color var(--ease), border-color var(--ease), box-shadow var(--ease);
    }
    .button:hover { transform: translateY(-2px); }
    .button-primary {
      color: #fff;
      background: var(--coral);
      box-shadow: 0 7px 18px rgba(233,95,80,.22);
    }
    .button-primary:hover { background: var(--coral-dark); box-shadow: 0 10px 22px rgba(233,95,80,.27); }
    .button-outline {
      color: #fff;
      background: transparent;
      border-color: rgba(255,255,255,.3);
    }
    .button-outline:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }
    .button-dark {
      color: #fff;
      background: var(--ink);
    }
    .button-dark:hover { background: #303832; }
    .button-light {
      color: var(--ink);
      background: #fff;
      border-color: var(--line);
    }
    .button-light:hover { border-color: #b8c2ba; background: var(--canvas); }
    .hero-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 17px;
      color: #aeb8b1;
      font-size: 12px;
    }
    .hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
    .meta-dot {
      width: 6px;
      height: 6px;
      background: var(--mint);
      border-radius: 50%;
    }
    .hero-media {
      position: relative;
      min-width: 0;
      height: 440px;
      margin: 0 -48px 0 0;
      overflow: hidden;
      background: #303832;
      border-radius: 10px 0 0 10px;
      box-shadow: var(--shadow-lg);
      transform: translateY(15px);
    }
    .hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 45%;
    }
    .hero-media::after {
      position: absolute;
      inset: 0;
      content: "";
      background: rgba(10, 15, 12, .18);
      pointer-events: none;
    }
    .hero-image-caption {
      position: absolute;
      z-index: 1;
      right: 22px;
      bottom: 22px;
      left: 22px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      color: #fff;
    }
    .hero-image-caption strong {
      display: block;
      margin-bottom: 3px;
      font-size: 16px;
    }
    .hero-image-caption span { color: rgba(255,255,255,.78); font-size: 12px; }
    .image-index {
      display: grid;
      min-width: 42px;
      height: 42px;
      place-items: center;
      color: var(--ink);
      background: var(--mint);
      border-radius: 50%;
      font-size: 11px;
      font-weight: 800;
    }

    main section { scroll-margin-top: 88px; }
    .section {
      padding-block: 76px;
      border-bottom: 1px solid var(--line);
    }
    .section--mist { background: var(--canvas); }
    .section--ink {
      color: #fff;
      background: var(--ink);
      border-bottom-color: var(--line-dark);
    }
    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 30px;
    }
    .section-heading { max-width: 790px; }
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      color: var(--mint-strong);
      font-size: 11px;
      font-weight: 800;
    }
    .section-kicker::before {
      width: 18px;
      height: 2px;
      content: "";
      background: var(--coral);
    }
    .section--ink .section-kicker { color: var(--mint); }
    .section h2 {
      margin-bottom: 9px;
      color: var(--ink);
      font-size: 30px;
      font-weight: 820;
      line-height: 1.35;
      letter-spacing: 0;
    }
    .section--ink h2 { color: #fff; }
    .section-intro {
      max-width: 820px;
      margin-bottom: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.9;
    }
    .section--ink .section-intro { color: #b9c2bc; }
    .section-link {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--coral-dark);
      font-size: 13px;
      font-weight: 750;
      transition: gap var(--ease), color var(--ease);
    }
    .section-link:hover { gap: 12px; color: var(--ink); }
    .section--ink .section-link { color: var(--mint); }

    .value-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--line);
    }
    .value-item {
      min-height: 154px;
      padding: 25px 28px 16px 0;
    }
    .value-item + .value-item {
      padding-left: 28px;
      border-left: 1px solid var(--line);
    }
    .value-num {
      display: block;
      margin-bottom: 8px;
      color: var(--coral-dark);
      font-size: 12px;
      font-weight: 800;
    }
    .value-item h3 {
      margin-bottom: 7px;
      font-size: 17px;
      line-height: 1.4;
    }
    .value-item p {
      max-width: 340px;
      margin-bottom: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.8;
    }

    .catalog-tools {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 24px;
    }
    .search-box {
      width: min(360px, 100%);
      height: 44px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 12px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      transition: border-color var(--ease), box-shadow var(--ease);
    }
    .search-box:focus-within {
      border-color: var(--mint-strong);
      box-shadow: 0 0 0 3px rgba(36,118,94,.12);
    }
    .search-symbol {
      color: var(--muted);
      font-size: 17px;
      line-height: 1;
    }
    .search-box input {
      width: 100%;
      min-width: 0;
      height: 100%;
      padding: 0;
      color: var(--text);
      background: transparent;
      border: 0;
      outline: 0;
      font-size: 13px;
    }
    .search-box input::placeholder { color: #8a928c; }
    .search-box button {
      width: 30px;
      height: 30px;
      display: grid;
      flex: 0 0 30px;
      place-items: center;
      color: var(--muted);
      background: transparent;
      border: 0;
      border-radius: 4px;
      cursor: pointer;
    }
    .search-box button:hover { color: var(--ink); background: var(--canvas); }
    .search-status {
      min-height: 22px;
      margin: -15px 0 16px;
      color: var(--muted);
      font-size: 12px;
    }
    .catalog-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 23px 18px;
    }
    .catalog-card {
      min-width: 0;
      padding: 0;
      overflow: hidden;
      text-align: left;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }
    .catalog-card:hover {
      transform: translateY(-4px);
      border-color: #c8d2ca;
      box-shadow: var(--shadow-md);
    }
    .card-image {
      position: relative;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: #d9dfda;
    }
    .card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 350ms ease;
    }
    .catalog-card:hover .card-image img { transform: scale(1.04); }
    .card-image::after {
      position: absolute;
      inset: auto 0 0;
      height: 35%;
      content: "";
      background: linear-gradient(transparent, rgba(13,18,15,.36));
      pointer-events: none;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 23px;
      padding: 2px 8px;
      color: #fff;
      background: var(--ink);
      border-radius: 3px;
      font-size: 10px;
      font-weight: 800;
      line-height: 1.3;
    }
    .card-image .badge {
      position: absolute;
      z-index: 1;
      top: 11px;
      left: 11px;
    }
    .badge--coral { background: var(--coral-dark); }
    .badge--mint { color: #173d30; background: var(--mint); }
    .badge--gold { color: #382a14; background: #f0cf88; }
    .card-body { padding: 14px 14px 13px; }
    .card-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 9px;
      margin-bottom: 6px;
    }
    .card-title {
      display: block;
      overflow: hidden;
      color: var(--ink);
      font-size: 15px;
      font-weight: 780;
      line-height: 1.45;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .card-score {
      flex: 0 0 auto;
      color: #a36b20;
      font-size: 12px;
      font-weight: 800;
    }
    .card-description {
      min-height: 43px;
      margin-bottom: 9px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.75;
    }
    .card-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-top: 9px;
      border-top: 1px solid #edf0ed;
      color: #747d76;
      font-size: 11px;
    }
    .card-foot span:last-child { color: var(--mint-strong); font-weight: 750; }

    .featured-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
    .feature-card {
      min-width: 0;
      display: grid;
      grid-template-columns: 42% 1fr;
      min-height: 174px;
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      transition: box-shadow var(--ease), transform var(--ease);
    }
    .feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
    .feature-card img {
      width: 100%;
      height: 100%;
      min-height: 174px;
      object-fit: cover;
    }
    .feature-content { padding: 14px 13px; }
    .feature-content .badge { margin-bottom: 7px; }
    .feature-content h3 {
      margin-bottom: 6px;
      font-size: 14px;
      line-height: 1.45;
    }
    .feature-content p {
      margin-bottom: 9px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.7;
    }
    .feature-more {
      padding: 0;
      color: var(--coral-dark);
      background: transparent;
      border: 0;
      cursor: pointer;
      font-size: 11px;
      font-weight: 800;
    }
    .feature-more:hover { color: var(--ink); }

    .channel-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      margin-top: 27px;
    }
    .channel-card {
      position: relative;
      min-height: 184px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 19px 17px 15px;
      overflow: hidden;
      color: var(--ink);
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
    }
    .channel-card:hover {
      transform: translateY(-3px);
      border-color: #a9c8b7;
      box-shadow: var(--shadow-sm);
    }
    .channel-index {
      color: var(--coral-dark);
      font-size: 11px;
      font-weight: 850;
    }
    .channel-card h3 { margin: 9px 0 7px; font-size: 16px; }
    .channel-card p {
      margin-bottom: 12px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.75;
    }
    .channel-arrow {
      align-self: flex-end;
      color: var(--mint-strong);
      font-size: 20px;
      line-height: 1;
      transition: transform var(--ease);
    }
    .channel-card:hover .channel-arrow { transform: translateX(4px); }

    .ranking-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(240px, .7fr);
      gap: 38px;
      align-items: start;
    }
    .rank-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 22px;
      padding: 0;
      margin: 0;
      list-style: none;
      counter-reset: rank;
    }
    .rank-row {
      min-width: 0;
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr) auto;
      align-items: center;
      gap: 11px;
      min-height: 66px;
      border-bottom: 1px solid var(--line);
      counter-increment: rank;
    }
    .rank-number {
      display: grid;
      width: 27px;
      height: 27px;
      place-items: center;
      color: var(--muted);
      background: #edf0ed;
      border-radius: 5px;
      font-size: 12px;
      font-weight: 850;
    }
    .rank-row:nth-child(-n+3) .rank-number {
      color: #fff;
      background: var(--coral);
    }
    .rank-title {
      overflow: hidden;
      color: var(--ink);
      font-size: 13px;
      font-weight: 760;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .rank-category {
      display: block;
      color: var(--muted);
      font-size: 10px;
      font-weight: 500;
    }
    .rank-stats {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
    }
    .rank-stats strong { color: #a36b20; font-size: 12px; }
    .ranking-aside {
      padding: 24px;
      color: #fff;
      background: var(--ink);
      border-radius: var(--radius-md);
    }
    .ranking-aside .aside-label {
      display: block;
      margin-bottom: 15px;
      color: var(--mint);
      font-size: 11px;
      font-weight: 800;
    }
    .ranking-aside h3 {
      margin-bottom: 10px;
      font-size: 21px;
      line-height: 1.4;
    }
    .ranking-aside p {
      margin-bottom: 17px;
      color: #b9c2bc;
      font-size: 13px;
      line-height: 1.85;
    }
    .ranking-aside .button { min-height: 40px; padding-inline: 14px; font-size: 12px; }

    .theme-layout {
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 18px;
    }
    .theme-lead {
      position: relative;
      min-height: 400px;
      overflow: hidden;
      color: #fff;
      background: #323a35;
      border-radius: var(--radius-md);
    }
    .theme-lead img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .theme-lead::after {
      position: absolute;
      inset: 0;
      content: "";
      background: linear-gradient(0deg, rgba(13,18,15,.88), rgba(13,18,15,0) 72%);
    }
    .theme-lead-content {
      position: absolute;
      z-index: 1;
      right: 28px;
      bottom: 25px;
      left: 28px;
    }
    .theme-lead-content .badge { margin-bottom: 10px; }
    .theme-lead-content h3 { margin-bottom: 7px; font-size: 24px; }
    .theme-lead-content p { max-width: 520px; color: rgba(255,255,255,.82); font-size: 13px; }
    .theme-side { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
    .theme-small {
      position: relative;
      min-height: 190px;
      overflow: hidden;
      color: #fff;
      background: #4a514d;
      border-radius: var(--radius-md);
    }
    .theme-small img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .theme-small::after {
      position: absolute;
      inset: 0;
      content: "";
      background: linear-gradient(0deg, rgba(13,18,15,.82), rgba(13,18,15,0) 78%);
    }
    .theme-small-content {
      position: absolute;
      z-index: 1;
      right: 18px;
      bottom: 15px;
      left: 18px;
    }
    .theme-small h3 { margin-bottom: 2px; font-size: 16px; }
    .theme-small p { margin-bottom: 0; color: rgba(255,255,255,.8); font-size: 11px; }

    .standard-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      margin-top: 30px;
      border-top: 1px solid var(--line-dark);
      border-bottom: 1px solid var(--line-dark);
    }
    .standard-item { padding: 24px 26px 25px 0; }
    .standard-item + .standard-item { padding-left: 26px; border-left: 1px solid var(--line-dark); }
    .standard-symbol {
      display: grid;
      width: 35px;
      height: 35px;
      margin-bottom: 14px;
      place-items: center;
      color: var(--ink);
      background: var(--mint);
      border-radius: 50%;
      font-size: 13px;
      font-weight: 850;
    }
    .standard-item h3 { margin-bottom: 7px; font-size: 16px; }
    .standard-item p { margin-bottom: 0; color: #b9c2bc; font-size: 12px; line-height: 1.8; }

    .process-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 28px;
    }
    .process-item {
      position: relative;
      min-height: 185px;
      padding: 22px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
    }
    .process-number {
      display: block;
      margin-bottom: 19px;
      color: var(--coral-dark);
      font-size: 12px;
      font-weight: 850;
    }
    .process-item h3 { margin-bottom: 7px; font-size: 16px; }
    .process-item p { margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }

    .device-layout {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 50px;
      align-items: center;
    }
    .device-copy h2 { max-width: 410px; }
    .device-copy p { max-width: 470px; }
    .device-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 11px;
    }
    .device-item {
      min-height: 155px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 17px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
    }
    .device-icon {
      width: 35px;
      height: 35px;
      display: grid;
      place-items: center;
      color: var(--mint-strong);
      background: var(--mist);
      border-radius: 6px;
      font-size: 17px;
      font-weight: 800;
    }
    .device-item strong { display: block; margin-bottom: 2px; font-size: 14px; }
    .device-item span:last-child { color: var(--muted); font-size: 11px; }

    .notes-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 27px;
    }
    .note-card {
      min-height: 196px;
      padding: 22px;
      background: var(--canvas);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
    }
    .note-mark {
      display: block;
      margin-bottom: 8px;
      color: var(--coral-dark);
      font-family: Georgia, serif;
      font-size: 36px;
      line-height: 1;
    }
    .note-card p { margin-bottom: 16px; color: #39413b; font-size: 13px; line-height: 1.85; }
    .note-byline { color: var(--muted); font-size: 11px; font-weight: 750; }

    .compare-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 29px;
    }
    .compare-column {
      padding: 23px 24px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
    }
    .compare-column--accent { background: #f0f6f2; border-color: #cfe0d5; }
    .compare-column h3 { margin-bottom: 13px; font-size: 16px; }
    .compare-list { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
    .compare-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.7;
    }
    .compare-list li::before {
      width: 6px;
      height: 6px;
      flex: 0 0 6px;
      margin-top: 7px;
      content: "";
      background: var(--coral);
      border-radius: 50%;
    }
    .compare-column--accent .compare-list li::before { background: var(--mint-strong); }

    .news-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
    .news-card {
      min-width: 0;
      display: grid;
      grid-template-columns: 112px 1fr;
      gap: 14px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
    }
    .news-card img {
      width: 112px;
      height: 92px;
      object-fit: cover;
      background: var(--mist);
      border-radius: 5px;
    }
    .news-date {
      display: block;
      margin-bottom: 5px;
      color: var(--coral-dark);
      font-size: 10px;
      font-weight: 800;
    }
    .news-card h3 { margin-bottom: 5px; font-size: 13px; line-height: 1.5; }
    .news-card p { margin-bottom: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }

    .faq-layout {
      display: grid;
      grid-template-columns: .7fr 1.3fr;
      gap: 48px;
      align-items: start;
    }
    .faq-aside h2 { max-width: 330px; }
    .faq-list { border-top: 1px solid var(--line); }
    .faq-list details { border-bottom: 1px solid var(--line); }
    .faq-list summary {
      position: relative;
      padding: 17px 34px 17px 0;
      color: var(--ink);
      cursor: pointer;
      font-size: 14px;
      font-weight: 750;
      list-style: none;
    }
    .faq-list summary::-webkit-details-marker { display: none; }
    .faq-list summary::after {
      position: absolute;
      top: 16px;
      right: 2px;
      content: "+";
      color: var(--coral-dark);
      font-size: 21px;
      font-weight: 400;
      line-height: 1;
      transition: transform var(--ease);
    }
    .faq-list details[open] summary::after { transform: rotate(45deg); }
    .faq-answer { max-width: 710px; padding: 0 25px 17px 0; color: var(--muted); font-size: 13px; line-height: 1.9; }

    .closing {
      padding-block: 48px;
      color: #fff;
      background: var(--coral-dark);
    }
    .closing-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
    }
    .closing h2 { margin-bottom: 6px; color: #fff; font-size: 25px; line-height: 1.4; }
    .closing p { max-width: 760px; margin-bottom: 0; color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.8; }
    .closing .button { flex: 0 0 auto; color: var(--ink); background: #fff; }
    .closing .button:hover { background: var(--mint); }

    .site-footer {
      padding: 48px 0 24px;
      color: #dce2dd;
      background: var(--ink);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr repeat(3, 1fr);
      gap: 38px;
      padding-bottom: 34px;
    }
    .footer-brand .brand { margin-bottom: 15px; color: #fff; }
    .footer-brand p { max-width: 330px; margin-bottom: 0; color: #9da8a0; font-size: 12px; line-height: 1.9; }
    .footer-column h3 { margin: 5px 0 13px; color: #fff; font-size: 13px; }
    .footer-links { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
    .footer-links a {
      color: #aeb8b1;
      font-size: 12px;
      transition: color var(--ease);
    }
    .footer-links a:hover { color: var(--mint); }
    .footer-legal {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding-top: 17px;
      border-top: 1px solid var(--line-dark);
      color: #87928a;
      font-size: 11px;
    }
    .footer-legal p { margin: 0; }
    .footer-legal a { color: #aeb8b1; }
    .footer-legal a:hover { color: #fff; }

    .sticky-cta {
      position: fixed;
      z-index: 35;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      min-height: 62px;
      padding: 8px 20px calc(8px + env(safe-area-inset-bottom));
      color: #fff;
      background: rgba(23,26,24,.96);
      border-top: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 -8px 26px rgba(15,20,17,.16);
      backdrop-filter: blur(12px);
    }
    .sticky-cta span { color: #d3dbd5; font-size: 12px; }
    .sticky-cta .button { min-height: 39px; padding-inline: 15px; font-size: 12px; }
    .sticky-dismiss {
      position: absolute;
      top: 50%;
      right: 16px;
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      transform: translateY(-50%);
      color: #b6c0b9;
      background: transparent;
      border: 0;
      border-radius: 4px;
      cursor: pointer;
      font-size: 19px;
    }
    .sticky-dismiss:hover { color: #fff; background: rgba(255,255,255,.1); }

    .age-gate {
      position: fixed;
      z-index: 100;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 22px;
      background: rgba(10,14,12,.86);
      backdrop-filter: blur(8px);
    }
    .age-gate[hidden] { display: none; }
    .age-dialog {
      width: min(500px, 100%);
      padding: 34px;
      color: var(--text);
      background: #fff;
      border-top: 4px solid var(--coral);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
    }
    .age-symbol {
      display: grid;
      width: 46px;
      height: 46px;
      margin-bottom: 18px;
      place-items: center;
      color: var(--coral-dark);
      background: #fff1ef;
      border-radius: 50%;
      font-size: 15px;
      font-weight: 900;
    }
    .age-dialog h2 { margin-bottom: 8px; color: var(--ink); font-size: 23px; }
    .age-dialog p { margin-bottom: 18px; color: var(--muted); font-size: 13px; line-height: 1.85; }
    .age-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .age-actions .button { flex: 1 1 170px; }

    .detail-dialog {
      width: min(560px, calc(100% - 32px));
      padding: 0;
      color: var(--text);
      background: #fff;
      border: 0;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
    }
    .detail-dialog::backdrop { background: rgba(10,14,12,.76); backdrop-filter: blur(5px); }
    .detail-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 20px 22px 15px;
      border-bottom: 1px solid var(--line);
    }
    .detail-head h2 { margin: 0; font-size: 19px; }
    .detail-close {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      color: var(--muted);
      background: var(--canvas);
      border: 0;
      border-radius: 4px;
      cursor: pointer;
      font-size: 20px;
    }
    .detail-close:hover { color: var(--ink); background: var(--mist); }
    .detail-content { padding: 19px 22px 23px; }
    .detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
    .detail-content p { margin-bottom: 18px; color: var(--muted); font-size: 13px; line-height: 1.9; }
    .detail-warning {
      padding: 11px 13px;
      color: #59635c;
      background: var(--canvas);
      border-left: 3px solid var(--mint-strong);
      font-size: 11px;
      line-height: 1.75;
    }

    @media (max-width: 1100px) {
      .hero-media { margin-right: -24px; }
      .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .channel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .feature-card { grid-template-columns: 40% 1fr; }
      .footer-grid { gap: 26px; }
    }
    @media (max-width: 768px) {
      html { scroll-padding-top: 70px; }
      .container { width: min(100% - 36px, var(--container)); }
      .header-inner { min-height: 68px; gap: 14px; }
      .brand { gap: 8px; font-size: 15px; }
      .brand-mark { width: 34px; height: 34px; flex-basis: 34px; font-size: 17px; }
      .header-note { display: none; }
      .menu-toggle { display: grid; flex: 0 0 42px; }
      .primary-nav {
        position: absolute;
        top: 68px;
        right: 0;
        left: 0;
        display: none;
        align-items: stretch;
        gap: 4px;
        padding: 10px 18px 14px;
        background: #fff;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-sm);
      }
      .primary-nav.is-open { display: grid; }
      .primary-nav a { min-height: 44px; padding-inline: 12px; }
      .hero-grid {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 18px;
        padding-block: 35px 38px;
      }
      .hero-copy { max-width: 620px; padding: 8px 0 0; }
      .hero h1 { font-size: 38px; }
      .hero-description { max-width: 600px; }
      .hero-media {
        height: 330px;
        margin: 0;
        border-radius: var(--radius-md);
        transform: none;
      }
      .section { padding-block: 58px; }
      .section-head { align-items: flex-start; flex-direction: column; gap: 13px; margin-bottom: 23px; }
      .section h2 { font-size: 26px; }
      .value-grid { grid-template-columns: 1fr; }
      .value-item { min-height: 0; padding: 20px 0; }
      .value-item + .value-item { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
      .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 12px; }
      .card-body { padding: 12px 11px; }
      .card-description { min-height: 55px; font-size: 11px; }
      .featured-grid { grid-template-columns: 1fr; }
      .feature-card { min-height: 160px; grid-template-columns: 36% 1fr; }
      .feature-card img { min-height: 160px; }
      .channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .channel-card { min-height: 166px; padding: 16px 14px 13px; }
      .ranking-layout { grid-template-columns: 1fr; gap: 22px; }
      .ranking-aside { padding: 21px; }
      .theme-layout { grid-template-columns: 1fr; }
      .theme-lead { min-height: 340px; }
      .theme-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
      .theme-small { min-height: 180px; }
      .standard-grid { grid-template-columns: 1fr; }
      .standard-item { padding: 20px 0; }
      .standard-item + .standard-item { padding-left: 0; border-top: 1px solid var(--line-dark); border-left: 0; }
      .process-grid { grid-template-columns: 1fr; }
      .process-item { min-height: 0; }
      .device-layout { grid-template-columns: 1fr; gap: 25px; }
      .device-list { grid-template-columns: repeat(3, 1fr); }
      .notes-grid { grid-template-columns: 1fr; }
      .note-card { min-height: 0; }
      .compare-grid { grid-template-columns: 1fr; }
      .news-grid { grid-template-columns: 1fr; }
      .faq-layout { grid-template-columns: 1fr; gap: 20px; }
      .faq-aside h2 { max-width: 600px; }
      .closing-inner { align-items: flex-start; flex-direction: column; gap: 18px; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-legal { align-items: flex-start; flex-direction: column; gap: 5px; }
    }
    @media (max-width: 520px) {
      .container { width: calc(100% - 30px); }
      .brand-name { max-width: 218px; font-size: 14px; }
      .hero-grid { padding-block: 29px 32px; }
      .hero h1 { font-size: 33px; }
      .hero-subtitle { font-size: 16px; }
      .hero-description { font-size: 13px; line-height: 1.85; }
      .hero-actions { gap: 9px; }
      .hero-actions .button { flex: 1 1 145px; padding-inline: 12px; font-size: 12px; }
      .hero-meta { gap: 10px 14px; font-size: 11px; }
      .hero-media { height: 260px; }
      .hero-image-caption { right: 14px; bottom: 14px; left: 14px; }
      .section { padding-block: 47px; }
      .section h2 { font-size: 23px; }
      .section-intro { font-size: 13px; }
      .catalog-tools { align-items: stretch; }
      .search-box { width: 100%; }
      .catalog-grid { gap: 12px 9px; }
      .card-image { aspect-ratio: 1 / .88; }
      .card-image .badge { top: 7px; left: 7px; min-height: 21px; padding-inline: 6px; font-size: 9px; }
      .card-topline { align-items: flex-start; flex-direction: column; gap: 1px; }
      .card-title { width: 100%; font-size: 13px; }
      .card-score { font-size: 11px; }
      .card-description { min-height: 66px; font-size: 10px; }
      .card-foot { align-items: flex-start; flex-direction: column; gap: 3px; font-size: 10px; }
      .feature-card { grid-template-columns: 34% 1fr; min-height: 150px; }
      .feature-card img { min-height: 150px; }
      .feature-content { padding: 11px 10px; }
      .feature-content h3 { font-size: 13px; }
      .feature-content p { font-size: 10px; }
      .channel-grid { gap: 9px; }
      .channel-card { min-height: 170px; padding: 13px 11px 11px; }
      .channel-card h3 { font-size: 14px; }
      .channel-card p { font-size: 11px; }
      .rank-list { grid-template-columns: 1fr; }
      .rank-row { min-height: 61px; }
      .rank-stats { gap: 7px; font-size: 10px; }
      .theme-lead { min-height: 290px; }
      .theme-lead-content { right: 17px; bottom: 18px; left: 17px; }
      .theme-lead-content h3 { font-size: 20px; }
      .theme-side { grid-template-columns: 1fr; }
      .theme-small { min-height: 160px; }
      .device-list { grid-template-columns: 1fr; }
      .device-item { min-height: 100px; flex-direction: row; align-items: center; gap: 14px; }
      .device-item > div { margin-left: auto; text-align: right; }
      .news-card { grid-template-columns: 92px 1fr; gap: 11px; }
      .news-card img { width: 92px; height: 82px; }
      .closing { padding-block: 34px; }
      .closing h2 { font-size: 21px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
      .footer-brand { grid-column: 1 / -1; }
      .sticky-cta { justify-content: flex-start; min-height: 58px; padding-inline: 13px 46px; }
      .sticky-cta span { max-width: 48%; font-size: 10px; line-height: 1.45; }
      .sticky-cta .button { min-height: 37px; margin-left: auto; padding-inline: 11px; font-size: 10px; }
      .sticky-dismiss { right: 7px; }
      .age-dialog { padding: 26px 22px; }
      .age-dialog h2 { font-size: 21px; }
      .detail-head, .detail-content { padding-inline: 17px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
      }
    }

.detail-modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      padding: 24px;
      visibility: hidden;
      opacity: 0;
      transition: opacity .22s ease, visibility .22s ease;
    }

    .detail-modal.is-open {
      visibility: visible;
      opacity: 1;
    }

    .detail-modal__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(22, 29, 38, .72);
      backdrop-filter: blur(8px);
    }

    .detail-modal__panel {
      position: relative;
      z-index: 1;
      width: min(100%, 560px);
      padding: 42px 40px 36px;
      border: 1px solid rgba(255, 255, 255, .65);
      border-radius: 24px;
      background: #fffdf9;
      box-shadow: 0 26px 80px rgba(16, 24, 40, .28);
      transform: translateY(18px);
      transition: transform .22s ease;
    }

    .detail-modal.is-open .detail-modal__panel {
      transform: translateY(0);
    }

    .detail-modal__panel h2 {
      margin: 10px 0 14px;
      color: #18242d;
      font-size: clamp(26px, 4vw, 36px);
      line-height: 1.2;
    }

    .detail-modal__panel p {
      margin: 0;
      color: #5d6870;
      font-size: 16px;
      line-height: 1.85;
    }

    .detail-modal__close {
      position: absolute;
      top: 16px;
      right: 18px;
      width: 36px;
      height: 36px;
      border: 1px solid #d9e0de;
      border-radius: 50%;
      background: transparent;
      color: #506068;
      font-size: 25px;
      line-height: 1;
      cursor: pointer;
      transition: background .2s ease, color .2s ease, border-color .2s ease;
    }

    .detail-modal__close:hover,
    .detail-modal__close:focus-visible {
      border-color: #e36f58;
      background: #fff1ed;
      color: #bd503d;
      outline: none;
    }

    .detail-modal__notice {
      margin-top: 24px;
      padding: 14px 16px;
      border-left: 3px solid #e3ad52;
      background: #fff6e4;
      color: #75603a;
      font-size: 13px;
      line-height: 1.7;
    }

    body.modal-open {
      overflow: hidden;
    }

    @media (max-width: 520px) {
      .detail-modal {
        padding: 16px;
      }

      .detail-modal__panel {
        padding: 38px 24px 26px;
        border-radius: 18px;
      }
    }

/* roulang page: category1 */
:root{
 color-scheme:light;
 --ink:#171a18;
 --ink-soft:#252a27;
 --paper:#fff;
 --canvas:#f4f5f2;
 --mist:#e9efeb;
 --mint:#c9e3d5;
 --mint-strong:#24765e;
 --coral:#e95f50;
 --coral-dark:#c9483d;
 --gold:#e4b45e;
 --text:#222724;
 --muted:#68716b;
 --line:#dfe4df;
 --line-dark:rgba(255,255,255,.16);
 --shadow-sm:0 5px 18px rgba(22,30,25,.07);
 --shadow-md:0 16px 38px rgba(22,30,25,.12);
 --shadow-lg:0 24px 70px rgba(10,14,12,.28);
 --radius-sm:5px;
 --radius-md:9px;
 --radius-lg:14px;
 --container:1240px;
 --ease:180ms ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
 margin:0;
 background:var(--paper);
 color:var(--text);
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
 font-size:15px;
 line-height:1.75;
 -webkit-font-smoothing:antialiased;
 text-rendering:optimizeLegibility;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit}
button{color:inherit}
.container{width:min(var(--container),calc(100% - 48px));margin-inline:auto}
.site-header{
 position:sticky;top:0;z-index:40;
 background:rgba(255,255,255,.96);
 border-bottom:1px solid var(--line);
 backdrop-filter:blur(16px);
}
.header-inner{
 min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px
}
.brand{
 display:inline-flex;min-width:0;align-items:center;gap:11px;
 color:var(--ink);font-size:17px;font-weight:800;white-space:nowrap
}
.brand-mark{
 display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;
 color:#fff;background:var(--coral);border-radius:7px;font-size:19px;line-height:1
}
.brand-name{overflow:hidden;text-overflow:ellipsis}
.primary-nav{display:flex;align-items:center;gap:7px;margin-left:auto}
.primary-nav a{
 min-height:42px;display:inline-flex;align-items:center;padding:0 15px;
 color:#5d655f;border-radius:var(--radius-sm);font-size:14px;font-weight:650;
 transition:background var(--ease),color var(--ease)
}
.primary-nav a:hover,.primary-nav a:focus-visible{color:var(--ink);background:var(--canvas)}
.primary-nav a[aria-current=page]{color:var(--coral-dark);background:#fff1ef}
.header-note{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;white-space:nowrap}
.header-note strong{
 display:grid;width:28px;height:28px;place-items:center;color:var(--coral-dark);
 background:#fff1ef;border-radius:50%;font-size:11px
}
.menu-toggle{
 display:none;width:42px;height:42px;padding:10px;place-items:center;
 background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer
}
.menu-toggle span{display:block;width:18px;height:2px;margin:2px 0;background:var(--ink);transition:transform var(--ease),opacity var(--ease)}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-6px) rotate(-45deg)}
.hero{
 overflow:hidden;color:#fff;background:var(--ink);
 background-image:linear-gradient(90deg,rgba(23,26,24,.98) 0%,rgba(23,26,24,.92) 48%,rgba(23,26,24,.68) 100%),url("https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=1800&q=85");
 background-position:center;background-size:cover
}
.hero-grid{
 min-height:475px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:55px;padding:64px 0
}
.eyebrow{
 display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;color:var(--mint);
 font-size:12px;font-weight:750;letter-spacing:.08em
}
.eyebrow:before{width:24px;height:2px;content:"";background:var(--coral)}
.hero-copy{max-width:600px}
.hero h1{margin:0 0 12px;color:#fff;font-size:clamp(34px,4vw,56px);font-weight:850;line-height:1.2}
.hero h1 span{color:var(--mint)}
.hero-subtitle{margin:0 0 18px;color:#f0f3ef;font-size:19px;font-weight:650}
.hero-description{max-width:550px;margin:0 0 26px;color:#c2cbc4;font-size:15px;line-height:1.95}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px}
.button{
 min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
 padding:0 19px;border:1px solid transparent;border-radius:var(--radius-sm);
 cursor:pointer;font-size:14px;font-weight:750;line-height:1.2;
 transition:transform var(--ease),background var(--ease),color var(--ease),border-color var(--ease),box-shadow var(--ease)
}
.button:hover{transform:translateY(-2px)}
.button:focus-visible,.primary-nav a:focus-visible,.footer-links a:focus-visible{outline:3px solid rgba(233,95,80,.35);outline-offset:3px}
.button-primary{color:#fff;background:var(--coral);box-shadow:0 7px 18px rgba(233,95,80,.22)}
.button-primary:hover{background:var(--coral-dark);box-shadow:0 10px 22px rgba(233,95,80,.27)}
.button-outline{color:#fff;background:transparent;border-color:rgba(255,255,255,.32)}
.button-outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.65)}
.hero-panel{
 padding:27px;background:rgba(255,255,255,.97);color:var(--text);
 border:1px solid rgba(255,255,255,.35);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)
}
.panel-label{margin:0 0 7px;color:var(--coral-dark);font-size:12px;font-weight:800;letter-spacing:.08em}
.hero-panel h2{margin:0 0 18px;color:var(--ink);font-size:25px;line-height:1.3}
.plan-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.plan-list li{
 display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:13px 14px;
 background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-md)
}
.plan-list li.recommended{background:#fff1ef;border-color:#f2b6ae}
.plan-list strong{display:block;color:var(--ink);font-size:15px}
.plan-list span{display:block;color:var(--muted);font-size:12px}
.plan-tag{color:var(--coral-dark);font-size:12px;font-weight:800;white-space:nowrap}
.section{padding:84px 0}
.section-tint{background:var(--canvas)}
.section-dark{color:#fff;background:var(--ink)}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:26px;margin-bottom:32px}
.section-heading h2{margin:0;color:var(--ink);font-size:30px;line-height:1.25}
.section-dark .section-heading h2{color:#fff}
.section-heading p{max-width:530px;margin:0;color:var(--muted);font-size:14px}
.section-dark .section-heading p{color:#bfc9c1}
.kicker{margin:0 0 9px;color:var(--coral-dark);font-size:12px;font-weight:800;letter-spacing:.08em}
.section-dark .kicker{color:var(--mint)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{
 padding:23px 22px;background:var(--paper);border:1px solid var(--line);
 border-radius:var(--radius-md);box-shadow:var(--shadow-sm)
}
.stat strong{display:block;margin-bottom:4px;color:var(--coral-dark);font-size:28px;line-height:1.2}
.stat span{color:var(--muted);font-size:13px}
.channel-layout{display:grid;grid-template-columns:1.05fr 1.95fr;gap:48px;align-items:start}
.channel-intro h2{margin:0 0 15px;color:var(--ink);font-size:31px;line-height:1.3}
.channel-intro p{margin:0;color:var(--muted);line-height:1.95}
.channel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.channel-card{
 padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);
 transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease)
}
.channel-card:hover{transform:translateY(-3px);border-color:#b6cabe;box-shadow:var(--shadow-md)}
.channel-index{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.channel-index b{color:var(--coral);font-size:13px}
.channel-index span{color:var(--muted);font-size:12px}
.channel-card h3{margin:0 0 7px;color:var(--ink);font-size:18px}
.channel-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.8}
.feature-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.feature-image{position:relative;min-height:385px;overflow:hidden;border-radius:var(--radius-lg);background:var(--ink)}
.feature-image img{width:100%;height:100%;object-fit:cover;opacity:.8}
.feature-image:after{position:absolute;inset:35% 0 0;content:"";background:linear-gradient(transparent,rgba(0,0,0,.84))}
.feature-caption{position:absolute;right:28px;bottom:25px;left:28px;z-index:1;color:#fff}
.feature-caption h3{margin:0 0 7px;font-size:26px}
.feature-caption p{margin:0;color:#dbe3dd;font-size:13px}
.editorial-list{display:grid;gap:12px}
.editorial-item{
 display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:center;
 padding:13px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md)
}
.editorial-item img{width:112px;height:86px;object-fit:cover;border-radius:var(--radius-sm)}
.editorial-item h3{margin:0 0 5px;color:var(--ink);font-size:16px;line-height:1.4}
.editorial-item p{margin:0;color:var(--muted);font-size:12px}
.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:800}
.badge-coral{color:var(--coral-dark);background:#fff1ef}
.badge-mint{color:var(--mint-strong);background:#e7f2eb}
.badge-gold{color:#88641c;background:#fff5dd}
.standard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.standard-card{padding:25px 23px;border-top:3px solid var(--mint-strong);background:#202522;border-radius:var(--radius-md)}
.standard-card h3{margin:0 0 9px;color:#fff;font-size:18px}
.standard-card p{margin:0;color:#bcc8bf;font-size:13px;line-height:1.85}
.standard-card b{display:block;margin-bottom:13px;color:var(--mint);font-size:12px;letter-spacing:.06em}
.ranking-layout{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.ranking-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.rank-item{
 display:grid;grid-template-columns:42px 1fr auto auto;align-items:center;gap:14px;
 min-height:63px;border-bottom:1px solid var(--line)
}
.rank-number{color:var(--coral);font-size:20px;font-weight:850}
.rank-title{color:var(--ink);font-weight:750}
.rank-meta{color:var(--muted);font-size:12px}
.rank-score{color:var(--coral-dark);font-weight:800;font-size:13px}
.quote-box{padding:30px;background:var(--mist);border-left:4px solid var(--coral);border-radius:var(--radius-md)}
.quote-box p{margin:0 0 18px;color:var(--ink-soft);font-size:21px;font-weight:700;line-height:1.55}
.quote-box span{color:var(--muted);font-size:13px}
.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.faq-item{padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md)}
.faq-item h3{margin:0 0 8px;color:var(--ink);font-size:16px}
.faq-item p{margin:0;color:var(--muted);font-size:13px;line-height:1.85}
.cta-band{padding:48px 0;color:#fff;background:var(--coral-dark)}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
.cta-inner h2{margin:0 0 7px;font-size:28px;line-height:1.3}
.cta-inner p{margin:0;color:#ffe4df;font-size:14px}
.cta-band .button{background:#fff;color:var(--coral-dark)}
.cta-band .button:hover{background:#fff5f3}
.site-footer{padding:58px 0 24px;color:#c2cbc4;background:var(--ink)}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:38px;padding-bottom:40px}
.footer-brand .brand{margin-bottom:17px;color:#fff}
.footer-brand p{max-width:340px;margin:0;color:#aeb9b1;font-size:13px;line-height:1.9}
.footer-column h3{margin:4px 0 14px;color:#fff;font-size:14px}
.footer-links{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.footer-links a{color:#aeb9b1;font-size:13px;transition:color var(--ease)}
.footer-links a:hover{color:var(--mint)}
.footer-legal{
 display:flex;justify-content:space-between;gap:20px;padding-top:20px;
 border-top:1px solid var(--line-dark);color:#8f9a92;font-size:12px
}
.footer-legal p{margin:0}
@media (max-width:1024px){
 .header-note{display:none}
 .hero-grid{grid-template-columns:1fr 1fr;gap:28px}
 .channel-layout,.feature-layout{grid-template-columns:1fr}
 .channel-intro{max-width:700px}
 .footer-grid{grid-template-columns:1.5fr 1fr 1fr}
 .footer-column:last-child{grid-column:2}
}
@media (max-width:768px){
 .container{width:min(var(--container),calc(100% - 34px))}
 .header-inner{min-height:68px}
 .menu-toggle{display:grid}
 .primary-nav{
  display:none;position:absolute;top:69px;right:17px;left:17px;
  padding:10px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow-md)
 }
 .primary-nav.is-open{display:grid}
 .primary-nav a{min-height:46px}
 .hero-grid{grid-template-columns:1fr;min-height:auto;padding:56px 0}
 .hero-copy{padding:0}
 .hero-panel{max-width:560px}
 .section{padding:62px 0}
 .section-heading{display:block;margin-bottom:24px}
 .section-heading h2{margin-bottom:10px;font-size:27px}
 .stats-grid{grid-template-columns:repeat(2,1fr)}
 .standard-grid,.faq-list{grid-template-columns:1fr}
 .ranking-layout{grid-template-columns:1fr;gap:28px}
 .cta-inner{display:block}
 .cta-inner .button{margin-top:22px}
 .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
 .footer-brand{grid-column:1/-1}
 .footer-column:last-child{grid-column:auto}
 .footer-legal{display:block}
 .footer-legal p+p{margin-top:8px}
}
@media (max-width:520px){
 .brand{font-size:15px}
 .brand-mark{width:34px;height:34px;flex-basis:34px;font-size:17px}
 .hero h1{font-size:35px}
 .hero-subtitle{font-size:17px}
 .hero-actions{display:grid}
 .hero-actions .button{width:100%}
 .stats-grid,.channel-grid{grid-template-columns:1fr}
 .feature-image{min-height:300px}
 .editorial-item{grid-template-columns:88px 1fr;gap:11px}
 .editorial-item img{width:88px;height:76px}
 .rank-item{grid-template-columns:32px 1fr auto}
 .rank-meta{display:none}
 .cta-inner h2{font-size:24px}
 .footer-grid{grid-template-columns:1fr}
 .footer-brand,.footer-column:last-child{grid-column:auto}
}