/* roulang page: index */
:root {
      --ink: #142a25;
      --forest: #245b48;
      --forest-dark: #173e32;
      --coral: #db795f;
      --paper: #f6f7f2;
      --white: #fff;
      --muted: #687770;
      --line: #dce4dc;
      --sage: #edf2eb;
      --radius: 8px;
      --shadow: 0 12px 30px rgba(20, 42, 37, .08);
      --container: 1200px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 92px; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 15px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; width: 100%; height: auto; object-fit: cover; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    :focus-visible { outline: 3px solid rgba(219, 121, 95, .62); outline-offset: 3px; }
    .container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
    .site-header {
      position: sticky; top: 0; z-index: 40;
      background: rgba(246, 247, 242, .96);
      border-bottom: 1px solid rgba(20, 42, 37, .1);
      backdrop-filter: blur(14px);
    }
    .nav-shell { min-height: 76px; display: flex; align-items: center; gap: 34px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; font-weight: 800; font-size: 16px; }
    .brand-mark {
      width: 36px; height: 36px; display: grid; place-items: center;
      border-radius: 7px; color: white; background: var(--forest); font-size: 15px;
    }
    .nav-links { display: flex; align-items: center; gap: 25px; flex: 1; }
    .nav-links a { color: #52615a; font-size: 13px; transition: color .2s ease; }
    .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--forest); }
    .nav-links a[aria-current="page"] { font-weight: 700; }
    .nav-action {
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 42px; padding: 0 17px; border: 1px solid var(--forest);
      border-radius: 5px; background: var(--forest); color: white;
      font-size: 13px; font-weight: 700; transition: background .2s, transform .2s;
    }
    .nav-action:hover { background: var(--forest-dark); transform: translateY(-1px); }
    .menu-toggle { display: none; border: 1px solid var(--line); border-radius: 5px; background: white; color: var(--ink); padding: 8px 12px; }
    .hero {
      min-height: 560px; display: flex; align-items: center; position: relative;
      color: white; overflow: hidden; background: #1c332c;
      background-image: linear-gradient(90deg, rgba(15, 39, 31, .91) 0%, rgba(15, 39, 31, .74) 48%, rgba(15, 39, 31, .18) 100%), url("https://images.unsplash.com/photo-1559757175-0eb30cd8c063?auto=format&fit=crop&w=2000&q=88");
      background-size: cover; background-position: center 42%;
    }
    .hero-inner { position: relative; z-index: 1; padding-block: 74px 82px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #d5e8db; font-size: 12px; font-weight: 700; letter-spacing: 0; }
    .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--coral); }
    .hero h1 { max-width: 820px; margin: 20px 0 13px; font-size: clamp(34px, 5vw, 58px); line-height: 1.22; font-weight: 800; }
    .hero h1 span { color: #efaa91; }
    .hero-subtitle { margin: 0; font-size: 20px; color: #e5eee8; font-weight: 600; }
    .hero-copy { max-width: 670px; margin: 16px 0 26px; color: #d0ddd5; font-size: 15px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
    .button {
      display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      min-height: 47px; padding: 0 19px; border: 1px solid transparent; border-radius: 5px;
      font-size: 14px; font-weight: 700; transition: transform .2s, background .2s, border-color .2s;
    }
    .button:hover { transform: translateY(-2px); }
    .button-primary { background: var(--coral); color: #fff; }
    .button-primary:hover { background: #c9654c; }
    .button-ghost { color: white; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); }
    .button-ghost:hover { background: rgba(255,255,255,.14); }
    .hero-facts { display: flex; gap: 24px; margin-top: 31px; color: #d0ddd5; font-size: 12px; }
    .hero-facts span { display: flex; align-items: center; gap: 8px; }
    .fact-dot { width: 7px; height: 7px; border-radius: 50%; background: #efaa91; }
    main { display: block; }
    .section { padding: 74px 0; }
    .section-white { background: #fff; }
    .section-sage { background: var(--sage); }
    .section-dark { background: var(--ink); color: white; }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 29px; }
    .section-kicker { margin: 0 0 8px; color: var(--forest); font-size: 11px; font-weight: 800; text-transform: uppercase; }
    .section-dark .section-kicker { color: #a8d0b8; }
    .section-title { margin: 0; font-size: 29px; line-height: 1.35; font-weight: 800; }
    .section-intro { max-width: 660px; margin: 10px 0 0; color: var(--muted); font-size: 14px; }
    .section-dark .section-intro { color: #bdcbc3; }
    .text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--forest); font-size: 13px; font-weight: 700; white-space: nowrap; }
    .text-link:hover { color: var(--coral); }
    .benefit-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
    .benefit-item { display: flex; gap: 15px; padding: 24px 25px; border-right: 1px solid var(--line); }
    .benefit-item:last-child { border-right: 0; }
    .benefit-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 5px; color: var(--forest); background: #e0eee4; font-size: 17px; font-weight: 800; }
    .benefit-item h3 { margin: 0 0 4px; font-size: 15px; }
    .benefit-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
    .feature-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; }
    .feature-story { min-height: 360px; position: relative; overflow: hidden; color: white; background: #263d34; border-radius: var(--radius); }
    .feature-story img { position: absolute; inset: 0; height: 100%; transition: transform .5s; }
    .feature-story:hover img { transform: scale(1.035); }
    .feature-story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,24,19,.88), rgba(10,24,19,.04) 72%); }
    .feature-story-content { position: absolute; z-index: 1; inset: auto 27px 25px; }
    .feature-story h3 { margin: 10px 0 6px; font-size: 24px; }
    .feature-story p { max-width: 520px; margin: 0; color: rgba(255,255,255,.82); font-size: 13px; }
    .feature-side { display: flex; flex-direction: column; justify-content: space-between; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
    .feature-side h3 { margin: 11px 0 8px; font-size: 22px; line-height: 1.4; }
    .feature-side p { margin: 0; color: var(--muted); font-size: 13px; }
    .feature-meta { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
    .badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 3px; color: var(--forest); background: #e9f2eb; font-size: 10px; line-height: 1.5; font-weight: 800; }
    .badge-coral { color: #a34834; background: #fff0e9; }
    .badge-dark { color: white; background: rgba(255,255,255,.18); }
    .media-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 18px; }
    .media-card { min-width: 0; }
    .media-cover { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: #dce4dc; }
    .media-cover img { height: 100%; transition: transform .35s; }
    .media-card:hover .media-cover img { transform: scale(1.045); }
    .cover-shade { position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(12,27,22,.58)); }
    .cover-badge { position: absolute; top: 10px; left: 10px; }
    .cover-time { position: absolute; right: 10px; bottom: 8px; color: white; font-size: 11px; font-weight: 700; }
    .media-card h3 { margin: 10px 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
    .media-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; }
    .rating { color: #ae694b; font-weight: 800; }
    .popular-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
    .popular-item { display: grid; grid-template-columns: 100px 1fr; min-height: 112px; gap: 15px; padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: rgba(255,255,255,.04); transition: background .2s, transform .2s; }
    .popular-item:hover { background: rgba(255,255,255,.09); transform: translateY(-2px); }
    .popular-item img { height: 100%; min-height: 88px; border-radius: 4px; }
    .popular-item h3 { margin: 5px 0 5px; font-size: 14px; line-height: 1.5; }
    .popular-item p { margin: 0; color: #c3d0c8; font-size: 11px; }
    .channel-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
    .channel-item { min-height: 155px; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.58); transition: background .2s; }
    .channel-item:hover { background: white; }
    .channel-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .channel-item h3 { margin: 0; font-size: 17px; }
    .channel-number { color: #9daf9f; font-size: 11px; font-weight: 800; }
    .channel-item p { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
    .rank-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 55px; align-items: start; }
    .rank-aside { position: sticky; top: 110px; }
    .rank-note { margin-top: 23px; padding: 17px; border-left: 3px solid var(--coral); background: rgba(255,255,255,.08); color: #c6d1cb; font-size: 12px; }
    .rank-list { border-top: 1px solid rgba(255,255,255,.17); }
    .rank-row { display: grid; grid-template-columns: 35px 1fr 72px 52px; align-items: center; gap: 12px; min-height: 59px; border-bottom: 1px solid rgba(255,255,255,.13); }
    .rank-no { color: #9eb9a8; font-size: 14px; font-weight: 800; }
    .rank-row:nth-child(-n+3) .rank-no { color: #efa58c; }
    .rank-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
    .rank-heat, .rank-score { color: #c1cec6; font-size: 11px; text-align: right; }
    .rank-score { color: #efa58c; font-weight: 800; }
    .rank-label { display: block; color: #9bb3a4; font-size: 10px; font-weight: 500; }
    .poster-grid { display: grid; grid-template-columns: 1.1fr .9fr .9fr 1.1fr; gap: 13px; align-items: stretch; }
    .poster-card { min-height: 210px; position: relative; overflow: hidden; border-radius: 6px; color: white; background: #30483d; }
    .poster-card img { position: absolute; inset: 0; height: 100%; transition: transform .35s; }
    .poster-card:hover img { transform: scale(1.04); }
    .poster-card::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(14,30,23,.88)); }
    .poster-card-copy { position: absolute; z-index: 1; inset: auto 16px 15px; }
    .poster-card h3 { margin: 7px 0 3px; font-size: 15px; }
    .poster-card p { margin: 0; color: rgba(255,255,255,.78); font-size: 11px; }
    .update-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
    .update-row { display: grid; grid-template-columns: 76px 1fr auto; gap: 15px; align-items: center; padding: 17px 14px 17px 0; border-bottom: 1px solid var(--line); }
    .update-date { color: var(--forest); font-size: 11px; font-weight: 800; }
    .update-row h3 { margin: 0 0 3px; font-size: 13px; }
    .update-row p { margin: 0; color: var(--muted); font-size: 11px; }
    .update-tag { color: #64766b; font-size: 10px; white-space: nowrap; }
    .quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-block: 1px solid var(--line); }
    .quote-item { padding: 25px 25px 24px 0; margin-right: 24px; border-right: 1px solid var(--line); }
    .quote-item:last-child { border: 0; margin: 0; }
    .quote-mark { color: var(--coral); font-size: 25px; line-height: 1; }
    .quote-item p { margin: 9px 0 14px; color: #43534b; font-size: 13px; }
    .quote-item strong { font-size: 11px; }
    .quote-item span { margin-left: 8px; color: var(--muted); font-size: 10px; }
    .assurance-row { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid rgba(255,255,255,.16); border-radius: 6px; }
    .assurance-item { padding: 19px 20px; border-right: 1px solid rgba(255,255,255,.16); }
    .assurance-item:last-child { border: 0; }
    .assurance-item strong { display: block; margin-bottom: 4px; font-size: 13px; }
    .assurance-item span { color: #b9c9bf; font-size: 11px; }
    .closing-band { padding: 42px 0; background: #e8efe7; border-block: 1px solid #d7e2d8; }
    .closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
    .closing-inner h2 { margin: 0 0 4px; font-size: 23px; }
    .closing-inner p { margin: 0; color: var(--muted); font-size: 13px; }
    .site-footer { padding: 48px 0 22px; color: #d9e2dc; background: #142a25; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 34px; }
    .footer-brand p { max-width: 330px; margin: 14px 0 0; color: #aabbb0; font-size: 12px; }
    .footer-column h3 { margin: 3px 0 13px; color: white; font-size: 12px; }
    .footer-column a, .footer-column span { display: block; margin: 8px 0; color: #aabbb0; font-size: 11px; transition: color .2s; }
    .footer-column a:hover { color: white; }
    .footer-bottom { display: flex; justify-content: space-between; gap: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); color: #93a69a; font-size: 10px; }
    .age-note { color: #e4c4ae; }
    @media (max-width: 1024px) {
      .nav-shell { gap: 20px; }
      .nav-links { gap: 16px; }
      .nav-links a { font-size: 12px; }
      .media-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
      .popular-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .rank-layout { gap: 32px; }
    }
    @media (max-width: 768px) {
      .container { width: min(100% - 36px, var(--container)); }
      .nav-shell { min-height: 68px; justify-content: space-between; }
      .menu-toggle { display: inline-flex; align-items: center; gap: 7px; }
      .nav-links {
        display: none; position: absolute; top: 68px; left: 0; right: 0; padding: 12px 18px 18px;
        background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
      }
      .nav-links.is-open { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
      .nav-links a { padding: 10px 8px; border-radius: 4px; }
      .nav-links a:hover { background: #e8eee7; }
      .nav-action { min-height: 38px; padding-inline: 12px; font-size: 12px; }
      .hero { min-height: 520px; background-position: 58% center; }
      .hero-inner { padding-block: 60px; }
      .hero-copy { max-width: 590px; }
      .section { padding: 58px 0; }
      .section-head { align-items: start; }
      .feature-grid, .rank-layout { grid-template-columns: 1fr; }
      .rank-aside { position: static; }
      .rank-note { max-width: 560px; }
      .channel-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .poster-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .poster-card { min-height: 195px; }
      .quote-grid { grid-template-columns: 1fr; }
      .quote-item { margin: 0; padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line); }
      .quote-item:last-child { border-bottom: 0; }
      .assurance-row { grid-template-columns: repeat(2,1fr); }
      .assurance-item:nth-child(2) { border-right: 0; }
      .assurance-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.16); }
      .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 25px; }
      .footer-brand { grid-column: 1 / -1; }
    }
    @media (max-width: 520px) {
      body { font-size: 14px; }
      .container { width: calc(100% - 32px); }
      .brand { font-size: 13px; gap: 8px; }
      .brand-mark { width: 32px; height: 32px; font-size: 13px; }
      .nav-shell { gap: 9px; }
      .nav-action { display: none; }
      .nav-links.is-open { grid-template-columns: repeat(2, 1fr); }
      .hero { min-height: 500px; background-position: 61% center; }
      .hero::before { content: ""; position: absolute; inset: 0; background: rgba(10,30,23,.15); }
      .hero-inner { padding-block: 49px; }
      .hero h1 { margin-top: 16px; font-size: 35px; }
      .hero-subtitle { font-size: 16px; }
      .hero-copy { font-size: 13px; }
      .hero-facts { gap: 12px; flex-wrap: wrap; margin-top: 23px; }
      .hero-facts span { font-size: 10px; }
      .button { min-height: 43px; padding-inline: 14px; font-size: 12px; }
      .section { padding: 47px 0; }
      .section-head { display: block; margin-bottom: 22px; }
      .section-title { font-size: 24px; }
      .section-intro { font-size: 12px; }
      .section-head .text-link { margin-top: 13px; }
      .benefit-strip { grid-template-columns: 1fr; }
      .benefit-item { padding: 17px 2px; border-right: 0; border-bottom: 1px solid var(--line); }
      .benefit-item:last-child { border-bottom: 0; }
      .feature-story { min-height: 280px; }
      .feature-story-content { inset: auto 18px 18px; }
      .feature-story h3 { font-size: 20px; }
      .feature-side { padding: 20px; min-height: 230px; }
      .media-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 12px; }
      .media-cover { aspect-ratio: 1.17 / 1; }
      .media-card h3 { font-size: 12px; }
      .media-meta { font-size: 10px; }
      .popular-grid { grid-template-columns: 1fr; gap: 10px; }
      .popular-item { min-height: 100px; grid-template-columns: 96px 1fr; }
      .channel-item { min-height: 160px; padding: 16px; }
      .channel-item h3 { font-size: 14px; }
      .channel-item p { font-size: 11px; }
      .rank-layout { gap: 23px; }
      .rank-row { grid-template-columns: 27px 1fr 57px 42px; gap: 7px; min-height: 55px; }
      .rank-title { font-size: 11px; }
      .rank-heat, .rank-score { font-size: 10px; }
      .poster-grid { gap: 9px; }
      .poster-card { min-height: 175px; }
      .poster-card-copy { inset: auto 11px 11px; }
      .poster-card h3 { font-size: 12px; }
      .poster-card p { font-size: 10px; }
      .update-list { grid-template-columns: 1fr; }
      .update-row { grid-template-columns: 65px 1fr auto; gap: 9px; padding: 14px 0; }
      .update-row h3 { font-size: 12px; }
      .update-row p { font-size: 10px; }
      .closing-inner { align-items: flex-start; flex-direction: column; }
      .closing-inner h2 { font-size: 20px; }
      .footer-grid { grid-template-columns: repeat(2,1fr); gap: 22px; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-bottom { flex-direction: column; gap: 7px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }

/* roulang page: category1 */
:root{
 --ink:#142a25;--forest:#245b48;--forest-dark:#173e32;--coral:#db795f;
 --paper:#f6f7f2;--white:#fff;--muted:#687770;--line:#dce4dc;--sage:#edf2eb;
 --radius:8px;--shadow:0 12px 30px rgba(20,42,37,.08);--container:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;color:var(--ink);background:var(--paper);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto;object-fit:cover}
button,input{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid rgba(219,121,95,.48);outline-offset:3px}
.container{width:min(var(--container),calc(100% - 48px));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:40;background:rgba(246,247,242,.96);border-bottom:1px solid rgba(20,42,37,.1);backdrop-filter:blur(14px)}
.nav-shell{min-height:76px;display:flex;align-items:center;gap:34px}
.brand{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto;font-weight:800;font-size:16px}
.brand-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:7px;color:#fff;background:var(--forest);font-size:15px}
.nav-links{display:flex;align-items:center;gap:25px;flex:1}
.nav-links a{color:#52615a;font-size:13px;transition:color .2s ease}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--forest)}
.nav-links a[aria-current=page]{font-weight:700}
.nav-action{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 17px;border:1px solid var(--forest);border-radius:5px;background:var(--forest);color:#fff;font-size:13px;font-weight:700;transition:.2s}
.nav-action:hover{background:var(--forest-dark);transform:translateY(-1px)}
.menu-toggle{display:none;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);padding:8px 12px}
main{display:block}
.category-hero{background:var(--forest-dark);color:#fff;padding:76px 0 70px;position:relative;overflow:hidden}
.category-hero:after{content:"";position:absolute;right:-80px;top:-140px;width:430px;height:430px;border:1px solid rgba(214,235,219,.15);border-radius:50%}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center;position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:#cfe3d4;font-size:12px;font-weight:700}
.eyebrow:before{content:"";width:24px;height:2px;background:var(--coral)}
.category-hero h1{margin:19px 0 14px;font-size:clamp(34px,5vw,57px);line-height:1.2;font-weight:800}
.category-hero h1 span{color:#efaa91}
.hero-copy{max-width:650px;margin:0;color:#d1dfd6;font-size:15px}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:47px;padding:0 19px;border:1px solid transparent;border-radius:5px;font-size:14px;font-weight:700;transition:transform .2s,background .2s,border-color .2s}
.button:hover{transform:translateY(-2px)}
.button-primary{background:var(--coral);color:#fff}.button-primary:hover{background:#c9654c}
.button-ghost{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}.button-ghost:hover{background:rgba(255,255,255,.14)}
.coupon-panel{background:#fff;color:var(--ink);border-radius:var(--radius);box-shadow:0 18px 45px rgba(0,0,0,.2);padding:26px;position:relative}
.coupon-panel:before,.coupon-panel:after{content:"";position:absolute;top:50%;width:18px;height:18px;background:var(--forest-dark);border-radius:50%;transform:translateY(-50%)}
.coupon-panel:before{left:-9px}.coupon-panel:after{right:-9px}
.coupon-label{color:var(--coral);font-size:11px;font-weight:800;letter-spacing:.08em}
.coupon-panel h2{margin:10px 0 6px;font-size:26px;line-height:1.35}
.coupon-panel p{margin:0;color:var(--muted);font-size:13px}
.coupon-rule{border-top:1px dashed var(--line);margin:21px 0}
.coupon-data{display:flex;justify-content:space-between;gap:15px;font-size:12px;color:var(--muted)}
.coupon-data strong{display:block;color:var(--forest);font-size:22px;line-height:1.3}
.section{padding:72px 0}.section-white{background:#fff}.section-sage{background:var(--sage)}.section-dark{background:var(--ink);color:#fff}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:29px}
.section-kicker{margin:0 0 8px;color:var(--forest);font-size:11px;font-weight:800;letter-spacing:.08em}
.section-dark .section-kicker{color:#a8d0b8}
.section-title{margin:0;font-size:29px;line-height:1.35;font-weight:800}
.section-intro{max-width:680px;margin:10px 0 0;color:var(--muted);font-size:14px}
.section-dark .section-intro{color:#bdcbc3}
.text-link{display:inline-flex;align-items:center;gap:8px;color:var(--forest);font-size:13px;font-weight:700;white-space:nowrap}.text-link:hover{color:var(--coral)}
.category-tabs{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:27px}
.category-tabs span{padding:8px 14px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--muted);font-size:13px}
.category-tabs span.active{border-color:var(--forest);background:var(--forest);color:#fff}
.feature-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}
.feature-story{min-height:350px;position:relative;overflow:hidden;color:#fff;background:#263d34;border-radius:var(--radius)}
.feature-story img{position:absolute;inset:0;height:100%;transition:transform .5s}.feature-story:hover img{transform:scale(1.035)}
.feature-story:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,24,19,.9),rgba(10,24,19,.05) 72%)}
.feature-story-content{position:absolute;z-index:1;inset:auto 27px 25px}.feature-story h3{margin:10px 0 6px;font-size:25px}.feature-story p{max-width:540px;margin:0;color:rgba(255,255,255,.82);font-size:13px}
.feature-side{padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}.feature-side h3{margin:12px 0 8px;font-size:22px}.feature-side p{margin:0;color:var(--muted);font-size:13px}
.feature-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:3px;color:var(--forest);background:#e4eee6;font-size:11px;font-weight:800}.badge.coral{color:#9b4a39;background:#fae3dc}.badge.dark{color:#fff;background:rgba(255,255,255,.16)}
.content-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.content-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:transform .25s,box-shadow .25s}
.content-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card-image{aspect-ratio:4/3;position:relative;background:#dce4dc;overflow:hidden}.card-image img{height:100%;transition:transform .4s}.content-card:hover .card-image img{transform:scale(1.04)}
.card-badge{position:absolute;left:11px;top:11px}.card-body{padding:16px}.card-body h3{margin:0 0 6px;font-size:16px;line-height:1.45}.card-body p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}
.card-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:13px;color:var(--muted);font-size:11px}.rating{color:#b15d47;font-weight:800}
.proof-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:46px;align-items:start}
.proof-number{font-size:62px;line-height:1;color:var(--coral);font-weight:800}.proof-copy{color:var(--muted);font-size:14px}
.proof-list{border-top:1px solid var(--line)}.proof-row{display:grid;grid-template-columns:90px 1fr 80px;gap:18px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line)}.proof-row strong{font-size:14px}.proof-row span{color:var(--muted);font-size:12px}.proof-row b{color:var(--forest);font-size:14px;text-align:right}
.ranking{display:grid;grid-template-columns:1fr 1fr;gap:0 45px}.rank-item{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:13px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.13)}.rank-no{color:#9fbea9;font-size:20px;font-weight:800}.rank-item strong{font-size:14px}.rank-item small{display:block;color:#aebeb5;font-size:11px}.rank-score{color:#efaa91;font-weight:800}
.news-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}.news-item{display:grid;grid-template-columns:132px 1fr;gap:17px;align-items:center;padding:13px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);transition:box-shadow .2s,transform .2s}.news-item:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.news-item img{height:94px;border-radius:5px}.news-item h3{margin:0 0 7px;font-size:15px;line-height:1.45}.news-item time{color:var(--muted);font-size:11px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:20px 22px}.faq-item h3{margin:0 0 7px;font-size:15px}.faq-item p{margin:0;color:var(--muted);font-size:13px}
.final-cta{padding:58px 0;background:#dfeae1}.cta-layout{display:flex;justify-content:space-between;align-items:center;gap:28px}.cta-layout h2{margin:0 0 8px;font-size:28px}.cta-layout p{margin:0;color:var(--muted);font-size:14px}
.site-footer{padding:58px 0 22px;background:var(--ink);color:#fff}.footer-grid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr;gap:38px}.footer-brand p{max-width:330px;margin:17px 0 0;color:#b7c7bd;font-size:12px}.footer-column{display:flex;flex-direction:column;gap:9px}.footer-column h3{margin:0 0 9px;color:#fff;font-size:14px}.footer-column a,.footer-column span{color:#b7c7bd;font-size:12px}.footer-column a:hover{color:#efaa91}.age-note{color:#efaa91!important}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:43px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);color:#91a59a;font-size:11px}
@media(max-width:1024px){.nav-shell{gap:20px}.nav-links{gap:14px}.hero-grid,.feature-layout,.proof-layout{grid-template-columns:1fr}.hero-grid{gap:35px}.content-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.container{width:min(var(--container),calc(100% - 32px))}.nav-shell{min-height:68px;flex-wrap:wrap}.brand{margin-right:auto}.menu-toggle{display:block}.nav-action{display:none}.nav-links{display:none;order:3;flex-basis:100%;overflow-x:auto;padding:0 0 15px;gap:20px}.nav-links.open{display:flex}.category-hero{padding:55px 0}.section{padding:55px 0}.section-head{display:block}.section-head .text-link{margin-top:17px}.content-grid{grid-template-columns:repeat(2,1fr)}.news-layout,.faq-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}}
@media(max-width:520px){.brand{font-size:14px}.brand-mark{width:33px;height:33px}.category-hero h1{font-size:34px}.hero-actions .button{width:100%}.coupon-panel{padding:21px}.content-grid{grid-template-columns:1fr 1fr;gap:10px}.card-body{padding:12px}.card-body h3{font-size:14px}.card-body p{font-size:11px}.proof-row{grid-template-columns:58px 1fr 53px;gap:8px}.ranking{grid-template-columns:1fr}.news-item{grid-template-columns:105px 1fr;gap:12px}.news-item img{height:80px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}}