/* roulang page: index */
:root{
      --bg:#fff8f4;
      --card:#fffdfb;
      --text:#4a3d38;
      --muted:#7a6b65;
      --line:rgba(157,112,95,.16);
      --soft:rgba(255,140,129,.12);
      --soft2:rgba(206,193,255,.18);
      --accent:#ff8f7d;
      --accent2:#f8b07f;
      --accent3:#d7c9ff;
      --shadow:0 18px 45px rgba(114,82,71,.10);
      --shadow2:0 12px 30px rgba(255,140,129,.12);
      --radius:28px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(255,179,138,.22), transparent 25%),
        radial-gradient(circle at 88% 10%, rgba(206,193,255,.22), transparent 22%),
        radial-gradient(circle at 70% 70%, rgba(255,157,176,.12), transparent 24%),
        linear-gradient(180deg, #fff8f4 0%, #fffdfb 38%, #fff8f4 100%);
      font-family: PingFang SC, Microsoft YaHei, Noto Sans SC, system-ui, -apple-system, sans-serif;
      line-height:1.7;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    ::selection{background:rgba(255,125,125,.18)}
    .container{max-width:1240px;margin:0 auto;padding:0 20px}
    .glass{
      background:rgba(255,255,255,.76);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(255,255,255,.65);
    }
    .top-line{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,125,125,.5), rgba(206,193,255,.5), transparent);
    }
    .section{
      padding:84px 0;
    }
    .section-tight{
      padding:72px 0;
    }
    .card{
      background:rgba(255,255,255,.82);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .card-soft{
      background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,248,243,.82));
      border:1px solid rgba(255,179,138,.16);
      border-radius:28px;
      box-shadow:0 14px 32px rgba(114,82,71,.08);
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.55rem .95rem;
      border-radius:999px;
      border:1px solid rgba(255,125,125,.14);
      background:rgba(255,255,255,.72);
      color:#6f5b55;
      font-size:13px;
      font-weight:600;
      transition:.25s ease;
    }
    .pill:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(114,82,71,.09)}
    .pill-active{
      background:linear-gradient(135deg, rgba(255,140,129,.18), rgba(206,193,255,.2));
      color:#6d3f39;
      border-color:rgba(255,125,125,.22);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      min-height:48px;
      padding:.9rem 1.35rem;
      border-radius:999px;
      font-weight:700;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      border:1px solid transparent;
      cursor:pointer;
      user-select:none;
    }
    .btn:active{transform:scale(.98)}
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg, #ff907c, #ffb06d);
      box-shadow:0 14px 28px rgba(255,125,125,.25);
    }
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(255,125,125,.30)}
    .btn-secondary{
      color:#644d46;
      background:rgba(255,255,255,.9);
      border-color:rgba(255,179,138,.35);
      box-shadow:0 10px 24px rgba(114,82,71,.07);
    }
    .btn-secondary:hover{transform:translateY(-2px);border-color:rgba(255,125,125,.35);box-shadow:0 16px 30px rgba(114,82,71,.10)}
    .btn-ghost{
      color:#6f5d57;
      background:rgba(255,248,243,.7);
      border:1px solid rgba(255,125,125,.15);
    }
    .btn-ghost:hover{transform:translateY(-2px);background:#fff;border-color:rgba(255,125,125,.26)}
    .nav-link{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.7rem 1rem;
      border-radius:999px;
      color:#6b5a54;
      font-size:14px;
      font-weight:600;
      transition:.2s ease;
    }
    .nav-link:hover{background:rgba(255,255,255,.85);color:#4e3e39;transform:translateY(-1px)}
    .nav-link.active{
      background:linear-gradient(135deg, rgba(255,140,129,.15), rgba(206,193,255,.18));
      color:#563730;
      box-shadow:0 8px 18px rgba(114,82,71,.08);
    }
    .hero-badge{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.52rem .9rem;
      border-radius:999px;
      background:rgba(255,255,255,.76);
      border:1px solid rgba(255,125,125,.15);
      box-shadow:0 10px 28px rgba(114,82,71,.07);
      font-size:13px;
      font-weight:700;
      color:#725c56;
    }
    .hero-title{
      font-size:clamp(34px, 5vw, 56px);
      line-height:1.08;
      letter-spacing:-.03em;
    }
    .hero-sub{
      font-size:clamp(16px, 1.45vw, 19px);
      color:var(--muted);
      max-width:760px;
    }
    .soft-grid{
      background:
        linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,248,243,.88)),
        radial-gradient(circle at top left, rgba(255,179,138,.18), transparent 25%);
    }
    .countdown-digit{
      min-width:74px;
      padding:.9rem .8rem;
      border-radius:18px;
      background:#fff;
      border:1px solid rgba(255,125,125,.12);
      box-shadow:0 10px 22px rgba(114,82,71,.08);
      text-align:center;
    }
    .countdown-digit strong{
      display:block;
      font-size:30px;
      line-height:1;
      color:#ff7d7d;
      font-weight:800;
      margin-bottom:.25rem;
    }
    .countdown-digit span{
      font-size:12px;
      color:#846f67;
      font-weight:600;
    }
    .num-badge{
      width:48px;height:48px;border-radius:16px;
      display:grid;place-items:center;
      color:#fff;font-weight:800;
      background:linear-gradient(135deg, #ff8f7d, #ffb06d);
      box-shadow:0 12px 24px rgba(255,125,125,.24);
      flex:0 0 auto;
    }
    .tag{
      display:inline-flex;align-items:center;gap:.35rem;
      padding:.35rem .7rem;border-radius:999px;
      background:rgba(255,255,255,.8);
      border:1px solid rgba(255,125,125,.12);
      color:#6c5c56;font-size:12px;font-weight:700;
    }
    .tag.mint{background:rgba(216,248,236,.65)}
    .tag.lavender{background:rgba(230,222,255,.68)}
    .feature-list li{
      position:relative;
      padding-left:1.5rem;
      color:#685852;
    }
    .feature-list li::before{
      content:"";
      position:absolute;left:0;top:.7rem;
      width:.55rem;height:.55rem;border-radius:999px;
      background:linear-gradient(135deg, #ff8f7d, #d7c9ff);
      box-shadow:0 0 0 6px rgba(255,140,129,.08);
    }
    .mosaic-card{
      position:relative;
      overflow:hidden;
      min-height:180px;
      border-radius:28px;
      border:1px solid rgba(255,125,125,.12);
      box-shadow:0 14px 34px rgba(114,82,71,.09);
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.9), transparent 22%),
        linear-gradient(135deg, rgba(255,179,138,.38), rgba(255,157,176,.26), rgba(206,193,255,.34));
    }
    .mosaic-card::after{
      content:"";
      position:absolute;inset:auto -18% -30% auto;
      width:220px;height:220px;border-radius:50%;
      background:rgba(255,255,255,.22);
      filter:blur(8px);
    }
    .bubble{
      padding:1rem 1.1rem;
      border-radius:22px;
      background:rgba(255,255,255,.84);
      border:1px solid rgba(255,125,125,.12);
      box-shadow:0 10px 24px rgba(114,82,71,.06);
    }
    .bubble::before{
      content:"";
      display:block;
      width:24px;height:24px;border-radius:50%;
      margin-bottom:.75rem;
      background:linear-gradient(135deg, #ff8f7d, #ffb06d);
      opacity:.8;
    }
    .feed-item{
      padding:1rem 0;
      border-bottom:1px solid rgba(125,95,86,.11);
    }
    .feed-item:last-child{border-bottom:none}
    .input{
      width:100%;
      min-height:52px;
      border-radius:16px;
      background:rgba(255,255,255,.9);
      border:1px solid rgba(255,179,138,.25);
      padding:.9rem 1rem;
      outline:none;
      color:var(--text);
      transition:.2s ease;
    }
    .input:focus{
      border-color:rgba(255,125,125,.55);
      box-shadow:0 0 0 4px rgba(255,125,125,.10);
    }
    .faq-item{
      border:1px solid rgba(255,179,138,.18);
      background:rgba(255,255,255,.82);
      border-radius:22px;
      overflow:hidden;
      box-shadow:0 12px 26px rgba(114,82,71,.06);
    }
    .faq-btn{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1.05rem 1.15rem;
      text-align:left;
      font-weight:700;
      color:#584842;
      background:transparent;
      border:none;
      cursor:pointer;
    }
    .faq-answer{
      padding:0 1.15rem 1.1rem;
      color:#6f605a;
      font-size:15px;
      display:none;
    }
    .faq-item.open .faq-answer{display:block}
    .faq-icon{
      width:28px;height:28px;border-radius:999px;
      display:grid;place-items:center;
      background:rgba(255,179,138,.16);
      color:#8a5c52;
      flex:0 0 auto;
      transition:.2s ease;
    }
    .faq-item.open .faq-icon{
      background:linear-gradient(135deg, rgba(255,140,129,.18), rgba(206,193,255,.2));
      transform:rotate(45deg);
    }
    .footer-link{
      color:#725f58;
      font-weight:600;
      transition:.2s ease;
    }
    .footer-link:hover{color:#4d3c37}
    .mobile-menu{
      display:none;
    }
    @media (max-width: 1024px){
      .section,.section-tight{padding:64px 0}
    }
    @media (max-width: 768px){
      .container{padding:0 16px}
      .mobile-menu{display:block}
      .desktop-nav{display:none}
      .hero-title{font-size:clamp(32px, 9vw, 42px)}
      .countdown-digit{min-width:64px;padding:.75rem .6rem}
      .countdown-digit strong{font-size:26px}
    }

/* roulang page: category1 */
:root {
      --bg: #fffaf6;
      --bg-soft: #fff3ed;
      --surface: rgba(255, 255, 255, .82);
      --surface-strong: #ffffff;
      --text: #463731;
      --muted: #786760;
      --weak: #9a837a;
      --primary: #ff806f;
      --primary-2: #ffb067;
      --lavender: #d7c9ff;
      --mint: #bfeee2;
      --amber: #f5c66d;
      --border: rgba(116, 82, 68, .13);
      --shadow: 0 18px 48px rgba(113, 75, 58, .12);
      --shadow-soft: 0 14px 34px rgba(113, 75, 58, .10);
      --radius: 28px;
      --radius-sm: 18px;
      --container: 1200px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: PingFang SC, Microsoft YaHei, Noto Sans SC, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
      color: var(--text);
      line-height: 1.7;
      background:
        radial-gradient(circle at 12% 8%, rgba(255, 143, 125, .18), transparent 28%),
        radial-gradient(circle at 88% 14%, rgba(215, 201, 255, .22), transparent 30%),
        linear-gradient(180deg, #fff9f5 0%, #fffaf7 46%, #fff7f0 100%);
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      max-width: 100%;
      display: block;
    }

    button,
    input {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    .container {
      width: min(100% - 32px, var(--container));
      margin-inline: auto;
    }

    .glass {
      border-bottom: 1px solid rgba(240, 227, 220, .78);
      background: rgba(255, 250, 246, .78);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .shadow-soft {
      box-shadow: var(--shadow-soft);
    }

    .nav-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 9px 15px;
      border-radius: 999px;
      color: #6a544d;
      font-size: 14px;
      font-weight: 700;
      transition: transform .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease;
      outline: none;
    }

    .nav-link:hover,
    .nav-link:focus-visible {
      color: #4f3b35;
      background: linear-gradient(135deg, rgba(255, 143, 125, .18), rgba(215, 201, 255, .26));
      box-shadow: 0 10px 24px rgba(143, 96, 80, .10);
      transform: translateY(-1px);
    }

    .nav-link.active {
      color: #4f332b;
      background: linear-gradient(135deg, rgba(255, 143, 125, .26), rgba(255, 176, 103, .20));
    }

    .nav-link.active::after {
      content: "";
      position: absolute;
      bottom: 5px;
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: var(--primary);
    }

    .section {
      padding: 82px 0;
    }

    .section-tight {
      padding: 54px 0;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border: 1px solid rgba(255, 143, 125, .22);
      border-radius: 999px;
      background: rgba(255, 255, 255, .72);
      color: #805149;
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 10px 24px rgba(113, 75, 58, .08);
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      box-shadow: 0 0 0 5px rgba(255, 143, 125, .14);
    }

    .hero-title {
      margin: 0;
      color: #4c3831;
      font-size: clamp(32px, 5vw, 54px);
      line-height: 1.12;
      font-weight: 900;
      letter-spacing: 0;
    }

    .hero-copy {
      color: var(--muted);
      font-size: 17px;
      max-width: 760px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 48px;
      padding: 13px 20px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-weight: 800;
      line-height: 1.2;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
      outline: none;
      white-space: nowrap;
    }

    .btn:hover,
    .btn:focus-visible {
      transform: translateY(-2px);
      box-shadow: 0 18px 36px rgba(255, 128, 111, .20);
    }

    .btn:active {
      transform: scale(.98);
    }

    .btn-primary {
      color: #fff;
      background: linear-gradient(135deg, #ff806f, #ffad68);
      box-shadow: 0 14px 28px rgba(255, 128, 111, .22);
    }

    .btn-primary:hover,
    .btn-primary:focus-visible {
      background: linear-gradient(135deg, #f36d5f, #ff9c52);
    }

    .btn-secondary {
      color: #604c46;
      border-color: rgba(116, 82, 68, .14);
      background: rgba(255, 255, 255, .78);
      box-shadow: 0 12px 26px rgba(113, 75, 58, .08);
    }

    .btn-secondary:hover,
    .btn-secondary:focus-visible {
      background: rgba(255, 248, 244, .96);
      border-color: rgba(255, 143, 125, .32);
    }

    .tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 7px 13px;
      border-radius: 999px;
      border: 1px solid rgba(116, 82, 68, .11);
      color: #6c554e;
      background: rgba(255, 255, 255, .76);
      font-size: 13px;
      font-weight: 800;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
      white-space: nowrap;
    }

    .tag:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(113, 75, 58, .09);
    }

    .tag.active {
      color: #fff;
      border-color: transparent;
      background: linear-gradient(135deg, #ff806f, #ffad68);
      box-shadow: 0 12px 26px rgba(255, 128, 111, .18);
    }

    .card {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .76);
      box-shadow: var(--shadow-soft);
      transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
    }

    .card:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 143, 125, .26);
      box-shadow: var(--shadow);
    }

    .cover {
      position: relative;
      min-height: 158px;
      border-radius: 24px;
      overflow: hidden;
      background:
        radial-gradient(circle at 24% 24%, rgba(255, 255, 255, .72), transparent 22%),
        linear-gradient(135deg, rgba(255, 143, 125, .82), rgba(215, 201, 255, .72) 52%, rgba(191, 238, 226, .72));
    }

    .cover::after {
      content: "";
      position: absolute;
      inset: 14px;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, .58);
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .60), transparent 42%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .18) 0 8px, transparent 8px 18px);
    }

    .cover-badge {
      position: absolute;
      z-index: 2;
      left: 16px;
      top: 16px;
      padding: 7px 12px;
      border-radius: 999px;
      color: #6c443b;
      background: rgba(255, 255, 255, .82);
      font-size: 12px;
      font-weight: 900;
      box-shadow: 0 10px 20px rgba(96, 68, 56, .10);
    }

    .notice-card {
      border: 1px solid rgba(245, 198, 109, .34);
      border-radius: var(--radius);
      background: linear-gradient(135deg, rgba(255, 250, 237, .92), rgba(255, 241, 230, .86));
      box-shadow: var(--shadow-soft);
    }

    .step-dot {
      display: inline-flex;
      width: 42px;
      height: 42px;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      color: #fff;
      font-weight: 900;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      box-shadow: 0 12px 24px rgba(255, 128, 111, .22);
      flex: 0 0 auto;
    }

    .filter-bar {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding: 10px 2px 16px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 143, 125, .44) transparent;
    }

    .feed-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 22px;
    }

    .feed-card {
      grid-column: span 4;
      padding: 18px;
    }

    .feed-card.wide {
      grid-column: span 8;
      display: grid;
      grid-template-columns: .82fr 1.18fr;
      gap: 22px;
      align-items: stretch;
    }

    .feed-card.note {
      grid-column: span 4;
      background: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 242, 236, .78));
    }

    .meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .mini-chip {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 5px 10px;
      border-radius: 999px;
      color: #765f58;
      background: rgba(255, 246, 240, .88);
      border: 1px solid rgba(255, 143, 125, .18);
      font-size: 12px;
      font-weight: 800;
    }

    .mini-chip.mint {
      background: rgba(229, 252, 246, .88);
      border-color: rgba(106, 198, 177, .20);
    }

    .mini-chip.lavender {
      background: rgba(244, 240, 255, .90);
      border-color: rgba(153, 130, 226, .20);
    }

    .side-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }

    .rule-item {
      display: flex;
      gap: 14px;
      padding: 18px;
      border-radius: 22px;
      border: 1px solid rgba(116, 82, 68, .11);
      background: rgba(255, 255, 255, .72);
    }

    .faq-item {
      border: 1px solid rgba(116, 82, 68, .12);
      border-radius: 22px;
      background: rgba(255, 255, 255, .76);
      box-shadow: 0 12px 28px rgba(113, 75, 58, .07);
      overflow: hidden;
    }

    .faq-question {
      width: 100%;
      min-height: 58px;
      padding: 18px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border: 0;
      background: transparent;
      color: #4f3d37;
      font-weight: 900;
      text-align: left;
      outline: none;
    }

    .faq-question:focus-visible {
      box-shadow: inset 0 0 0 3px rgba(255, 143, 125, .24);
    }

    .faq-answer {
      display: none;
      padding: 0 20px 20px;
      color: var(--muted);
      font-size: 15px;
    }

    .faq-item.open .faq-answer {
      display: block;
    }

    .faq-icon {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      flex: 0 0 auto;
      font-weight: 900;
    }

    .cta-panel {
      position: relative;
      overflow: hidden;
      border-radius: 34px;
      border: 1px solid rgba(255, 143, 125, .18);
      background:
        radial-gradient(circle at 8% 16%, rgba(255, 255, 255, .72), transparent 22%),
        linear-gradient(135deg, rgba(255, 239, 232, .96), rgba(246, 241, 255, .88) 54%, rgba(232, 253, 247, .78));
      box-shadow: var(--shadow);
    }

    .cta-panel::after {
      content: "";
      position: absolute;
      right: -80px;
      top: -80px;
      width: 220px;
      height: 220px;
      border-radius: 999px;
      background: rgba(255, 143, 125, .16);
    }

    .input {
      width: 100%;
      height: 52px;
      border: 1px solid rgba(116, 82, 68, .14);
      border-radius: 16px;
      background: rgba(255, 255, 255, .82);
      padding: 0 16px;
      color: var(--text);
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .input:focus {
      border-color: rgba(255, 128, 111, .68);
      box-shadow: 0 0 0 4px rgba(255, 143, 125, .14);
      background: #fff;
    }

    .footer-link {
      color: #74635d;
      transition: color .2s ease, transform .2s ease;
      display: inline-flex;
    }

    .footer-link:hover,
    .footer-link:focus-visible {
      color: #ff806f;
      transform: translateX(2px);
      outline: none;
    }

    @media (max-width: 1024px) {
      .section {
        padding: 66px 0;
      }

      .feed-card,
      .feed-card.note {
        grid-column: span 6;
      }

      .feed-card.wide {
        grid-column: span 12;
      }

      .side-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      .container {
        width: min(100% - 24px, var(--container));
      }

      .section {
        padding: 52px 0;
      }

      .section-tight {
        padding: 42px 0;
      }

      .feed-grid {
        gap: 16px;
      }

      .feed-card,
      .feed-card.note,
      .feed-card.wide {
        grid-column: span 12;
      }

      .feed-card.wide {
        grid-template-columns: 1fr;
      }

      .btn {
        width: 100%;
        white-space: normal;
        text-align: center;
      }

      .hero-copy {
        font-size: 16px;
      }

      .cover {
        min-height: 140px;
      }
    }

    @media (max-width: 520px) {
      .hero-title {
        font-size: 32px;
      }

      .mobile-menu .nav-link {
        min-height: 46px;
      }

      .tag {
        font-size: 12px;
      }

      .rule-item {
        padding: 15px;
      }
    }