/* roulang page: category1 */
:root {
      --ink: #111719;
      --ink-soft: #242e30;
      --paper: #f6f7f2;
      --white: #fff;
      --mint: #9ff4d4;
      --coral: #ff886f;
      --muted: #687476;
      --line: #dfe5df;
      --radius: 20px;
      --shadow: 0 18px 48px rgba(17, 23, 25, .12);
      --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: "DM Sans", "Noto Sans SC", system-ui, sans-serif;
      font-size: 15px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button { font: inherit; }
    a:focus-visible, button:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
    .container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
    .topbar {
      position: sticky; top: 0; z-index: 50;
      background: rgba(17, 23, 25, .96);
      border-bottom: 1px solid rgba(255,255,255,.1);
      backdrop-filter: blur(16px);
    }
    .nav-shell { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-weight: 800; letter-spacing: 0; white-space: nowrap; }
    .brand-mark {
      width: 38px; height: 38px; display: grid; place-items: center;
      border-radius: 12px; color: var(--ink); background: var(--mint);
      font-size: 18px; font-weight: 800;
    }
    .brand-name { font-size: 16px; }
    .nav-links { display: flex; align-items: center; gap: 8px; }
    .nav-links a {
      padding: 9px 13px; border-radius: 999px; color: #c9d0ce;
      font-size: 13px; font-weight: 600; transition: color .2s, background .2s;
    }
    .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); background: var(--mint); }
    .nav-links .nav-home:hover { background: rgba(255,255,255,.12); color: #fff; }
    .nav-links .nav-home { color: #d8dfdc; }
    .menu-toggle {
      display: none; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.22);
      border-radius: 12px; color: #fff; background: transparent; cursor: pointer;
    }
    .hero {
      position: relative; overflow: hidden; min-height: 470px; color: #fff;
      background-color: #111719;
      background-image: linear-gradient(90deg, rgba(17,23,25,.95) 0%, rgba(17,23,25,.82) 48%, rgba(17,23,25,.15) 100%),
        url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=2000&q=90");
      background-position: center, center 46%; background-size: cover;
    }
    .hero::after { content: ""; position: absolute; inset: auto 0 0; height: 90px; background: linear-gradient(transparent, rgba(17,23,25,.5)); pointer-events: none; }
    .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); align-items: center; gap: 54px; min-height: 470px; padding-block: 58px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--mint); font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
    .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--coral); }
    h1 { max-width: 720px; margin: 17px 0 10px; font-size: clamp(38px, 5vw, 62px); line-height: 1.16; letter-spacing: 0; font-weight: 800; }
    .hero h1 em { color: var(--mint); font-style: normal; }
    .hero-subtitle { margin: 0 0 14px; color: #e4eae7; font-size: 19px; font-weight: 600; }
    .hero-copy { max-width: 610px; margin: 0; color: #b9c4c0; font-size: 14px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
    .button {
      min-height: 46px; display: inline-flex; justify-content: center; align-items: center; gap: 9px;
      padding: 0 19px; border: 1px solid transparent; border-radius: 999px;
      font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s;
    }
    .button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
    .button-primary { color: var(--ink); background: var(--mint); }
    .button-secondary { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
    .coupon-board {
      padding: 20px; border: 1px solid rgba(255,255,255,.2); border-radius: 24px;
      background: rgba(16,23,24,.66); box-shadow: var(--shadow); backdrop-filter: blur(14px);
    }
    .coupon-top { display: flex; align-items: center; justify-content: space-between; color: #d8e1dc; font-size: 12px; font-weight: 700; }
    .coupon-tag { padding: 5px 9px; border-radius: 999px; color: var(--ink); background: var(--coral); font-size: 10px; font-weight: 800; }
    .coupon-main {
      position: relative; margin-top: 15px; padding: 22px 20px; overflow: hidden;
      border-radius: 17px; color: var(--ink); background: linear-gradient(115deg, #b5ffe2, #8edfc7 60%, #bcebdc);
    }
    .coupon-main::after { content: ""; position: absolute; top: -27px; right: -28px; width: 118px; height: 118px; border: 1px solid rgba(17,23,25,.15); border-radius: 50%; box-shadow: 0 0 0 15px rgba(17,23,25,.035), 0 0 0 31px rgba(17,23,25,.025); }
    .coupon-kicker { margin: 0 0 4px; font-size: 11px; font-weight: 800; }
    .coupon-value { margin: 0; font-size: 34px; line-height: 1.2; font-weight: 800; }
    .coupon-desc { margin: 6px 0 0; color: #36534a; font-size: 12px; }
    .coupon-main .button { position: relative; z-index: 1; min-height: 38px; margin-top: 16px; color: #fff; background: var(--ink); }
    .coupon-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; color: #adb9b4; font-size: 11px; }
    .section { padding: 76px 0; }
    .section-white { background: #fff; }
    .section-dark { color: #fff; background: var(--ink); }
    .section-line { border-top: 1px solid var(--line); }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
    .section-kicker { margin: 0 0 6px; color: #4f8877; font-size: 11px; font-weight: 800; letter-spacing: 0; }
    .section-dark .section-kicker { color: var(--mint); }
    .section-title { margin: 0; font-size: 29px; line-height: 1.3; font-weight: 800; letter-spacing: 0; }
    .section-intro { max-width: 560px; margin: 8px 0 0; color: var(--muted); font-size: 13px; }
    .section-dark .section-intro { color: #aebbb7; }
    .text-link { display: inline-flex; align-items: center; gap: 7px; color: #316f5c; font-size: 12px; font-weight: 800; white-space: nowrap; }
    .text-link:hover { color: #c35e48; }
    .benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .benefit {
      min-height: 180px; padding: 23px; border: 1px solid var(--line); border-radius: var(--radius);
      background: #fff; transition: transform .2s, box-shadow .2s;
    }
    .benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .benefit-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 14px; color: var(--ink); background: var(--mint); font-size: 17px; font-weight: 800; }
    .benefit:nth-child(2) .benefit-icon { background: #ffd4c8; }
    .benefit:nth-child(3) .benefit-icon { background: #d9e6ff; }
    .benefit h3 { margin: 0 0 7px; font-size: 16px; font-weight: 800; }
    .benefit p { margin: 0; color: var(--muted); font-size: 13px; }
    .feature-strip { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; overflow: hidden; border-radius: 24px; background: #e8efe9; }
    .feature-image { min-height: 350px; background: url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=85") center/cover; }
    .feature-copy { display: flex; flex-direction: column; justify-content: center; padding: 42px; }
    .feature-copy h2 { margin: 0 0 13px; max-width: 460px; font-size: 30px; line-height: 1.35; }
    .feature-copy p { margin: 0 0 20px; color: #5f6b68; font-size: 14px; }
    .feature-points { display: grid; gap: 11px; margin: 0 0 24px; padding: 0; list-style: none; }
    .feature-points li { display: flex; gap: 10px; align-items: baseline; font-size: 13px; font-weight: 600; }
    .feature-points li::before { content: "✓"; color: #298265; font-weight: 900; }
    .button-dark { align-self: flex-start; color: #fff; background: var(--ink); }
    .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid rgba(255,255,255,.16); }
    .stat { padding: 22px 15px; text-align: center; border-right: 1px solid rgba(255,255,255,.14); }
    .stat:last-child { border: 0; }
    .stat strong { display: block; color: var(--mint); font-size: 25px; font-weight: 800; }
    .stat span { color: #b6c2bd; font-size: 12px; }
    .quote-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
    .quote-main { padding: 28px; border-radius: var(--radius); color: var(--ink); background: var(--mint); }
    .quote-main blockquote { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.65; }
    .quote-main cite { display: block; margin-top: 16px; color: #41685c; font-size: 12px; font-style: normal; font-weight: 700; }
    .quote-side { display: grid; gap: 18px; }
    .quote-note { padding: 22px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); background: rgba(255,255,255,.045); }
    .quote-note p { margin: 0; color: #d3dcd8; font-size: 13px; }
    .quote-note strong { display: block; margin-top: 10px; color: var(--mint); font-size: 12px; }
    .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .compare-box { padding: 26px; border-radius: var(--radius); background: #f0f3ef; }
    .compare-box.highlight { color: #fff; background: var(--ink); }
    .compare-box h3 { margin: 0 0 16px; font-size: 17px; }
    .compare-box ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
    .compare-box li { display: flex; gap: 10px; color: #65716e; font-size: 13px; }
    .compare-box.highlight li { color: #c4ceca; }
    .compare-box li::before { content: "•"; color: #d76d56; font-size: 18px; line-height: 1.1; }
    .compare-box.highlight li::before { color: var(--mint); }
    .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .news-card { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; transition: transform .2s, box-shadow .2s; }
    .news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .news-image { aspect-ratio: 16/9; background-size: cover; background-position: center; }
    .news-card:nth-child(1) .news-image { background-image: url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=800&q=80"); }
    .news-card:nth-child(2) .news-image { background-image: url("https://images.unsplash.com/photo-1478720568477-152d9b164e26?auto=format&fit=crop&w=800&q=80"); }
    .news-card:nth-child(3) .news-image { background-image: url("https://images.unsplash.com/photo-1492619375914-88005aa9e8fb?auto=format&fit=crop&w=800&q=80"); }
    .news-body { padding: 17px; }
    .news-meta { display: flex; justify-content: space-between; gap: 8px; color: #73807b; font-size: 11px; }
    .news-body h3 { margin: 8px 0 0; font-size: 15px; line-height: 1.55; }
    .faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .faq-item { border: 1px solid var(--line); border-radius: 15px; background: #fff; }
    .faq-item summary { padding: 17px 19px; cursor: pointer; font-size: 14px; font-weight: 800; list-style: none; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: "+"; float: right; color: #48836d; font-size: 20px; line-height: 1; }
    .faq-item[open] summary::after { content: "−"; }
    .faq-item p { margin: 0; padding: 0 19px 18px; color: var(--muted); font-size: 13px; }
    .closing-band { padding: 36px 0; color: #fff; background: linear-gradient(110deg, #152421, #284f43 60%, #356653); }
    .closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .closing-inner h2 { margin: 0; font-size: 24px; line-height: 1.4; }
    .closing-inner p { margin: 5px 0 0; color: #c5d7d0; font-size: 13px; }
    .footer { color: #bdc8c3; background: #111719; }
    .footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; padding: 49px 0 35px; }
    .footer-brand p { max-width: 300px; margin: 14px 0 0; color: #9ba9a3; font-size: 12px; }
    .footer-col h3 { margin: 0 0 13px; color: #fff; font-size: 13px; }
    .footer-col a, .footer-col span { display: block; margin: 7px 0; color: #9ba9a3; font-size: 12px; transition: color .2s; }
    .footer-col a:hover { color: var(--mint); }
    .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 17px 0; border-top: 1px solid rgba(255,255,255,.12); color: #899791; font-size: 11px; }
    .fixed-cta { position: fixed; right: 22px; bottom: 20px; z-index: 40; }
    .fixed-cta a { min-height: 46px; display: inline-flex; align-items: center; gap: 9px; padding: 0 17px; border: 1px solid rgba(17,23,25,.12); border-radius: 999px; color: var(--ink); background: var(--mint); box-shadow: 0 12px 30px rgba(17,23,25,.2); font-size: 12px; font-weight: 800; transition: transform .2s; }
    .fixed-cta a:hover { transform: translateY(-3px); }
    @media (max-width: 900px) {
      .hero-inner { grid-template-columns: 1fr .8fr; gap: 26px; }
      .benefit-grid { gap: 12px; }
      .footer-main { grid-template-columns: 1.2fr 1fr 1fr; }
      .footer-col:last-child { grid-column: 2 / 4; }
    }
    @media (max-width: 700px) {
      .container { width: min(100% - 36px, var(--container)); }
      .nav-shell { min-height: 68px; }
      .brand-name { font-size: 14px; }
      .menu-toggle { display: grid; place-items: center; }
      .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; padding: 10px 18px 16px; border-top: 1px solid rgba(255,255,255,.1); background: #111719; }
      .nav-links.open { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
      .nav-links a { border-radius: 10px; }
      .hero, .hero-inner { min-height: 0; }
      .hero-inner { grid-template-columns: 1fr; gap: 28px; padding-block: 54px 44px; }
      .hero h1 { font-size: 42px; }
      .coupon-board { max-width: 470px; }
      .section { padding: 56px 0; }
      .section-head { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 22px; }
      .benefit-grid { grid-template-columns: 1fr; }
      .benefit { min-height: auto; }
      .feature-strip { grid-template-columns: 1fr; }
      .feature-image { min-height: 240px; }
      .feature-copy { padding: 28px; }
      .feature-copy h2 { font-size: 25px; }
      .stats-row { grid-template-columns: 1fr 1fr; }
      .stat:nth-child(2) { border-right: 0; }
      .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.14); }
      .quote-grid, .compare-grid { grid-template-columns: 1fr; }
      .news-grid { grid-template-columns: 1fr 1fr; }
      .faq-list { grid-template-columns: 1fr; }
      .closing-inner { align-items: flex-start; flex-direction: column; }
      .footer-main { grid-template-columns: 1fr 1fr; gap: 26px; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-col:last-child { grid-column: auto; }
    }
    @media (max-width: 520px) {
      .container { width: calc(100% - 30px); }
      .hero h1 { font-size: 36px; }
      .hero-subtitle { font-size: 16px; }
      .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
      .button { padding-inline: 13px; font-size: 12px; }
      .section-title { font-size: 25px; }
      .news-grid { grid-template-columns: 1fr; }
      .news-card { display: grid; grid-template-columns: 112px 1fr; }
      .news-image { min-height: 100%; aspect-ratio: auto; }
      .news-body { padding: 13px; }
      .news-body h3 { font-size: 13px; }
      .news-meta { flex-direction: column; gap: 0; }
      .coupon-main { padding: 19px; }
      .coupon-value { font-size: 30px; }
      .footer-main { grid-template-columns: 1fr 1fr; }
      .footer-bottom { align-items: flex-start; flex-direction: column; gap: 5px; }
      .fixed-cta { right: 12px; bottom: 12px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }