:root {
          --theme: #009c3b;
          --theme-dark: #008431;
          --bg: #f4faf6;
          --text: #222;
          --radius-lg: 18px;
          --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.06);
      }

      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: "Poppins", Arial, sans-serif;
      }

      body {
          background: radial-gradient(circle at top, #e7fff0 0, #f4faf6 40%, #f4faf6 100%);
          color: var(--text);
      }

      /* ===== FIXED HEADER (desktop + mobile) ===== */
      header {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 1000;
          background: #ffffffee;
          backdrop-filter: blur(10px);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
      }

      .nav-inner {
          max-width: 1000px;
          margin: 0 auto;
          padding: 10px 16px;
          display: flex;
          align-items: center;
          justify-content: space-between;
      }

      .logo {
          display: flex;
          align-items: center;
          gap: 10px;
      }

      .logo img {
          width: 40px;
          height: 40px;
          border-radius: 12px;
          box-shadow: 0 3px 8px rgba(0, 156, 59, 0.35);
      }

      .logo span {
          font-weight: 700;
          font-size: 1.2rem;
          color: var(--theme-dark);
      }

      /* Desktop nav */
      nav {
          display: flex;
          align-items: center;
          gap: 20px;
      }

      nav a {
          text-decoration: none;
          color: #444;
          font-weight: 600;
          font-size: 0.9rem;
          padding: 6px 10px;
          border-radius: 999px;
          transition: background 0.2s ease, color 0.2s ease;
      }

      nav a:hover {
          background: var(--theme);
          color: #fff;
      }

      /* Mobile menu */
      .menu-toggle {
          display: none;
          flex-direction: column;
          cursor: pointer;
          gap: 4px;
          padding: 6px;
          border-radius: 10px;
          transition: background 0.3s ease;
      }

      .menu-toggle:hover {
          background: #ecfff3;
      }

      .menu-toggle span {
          background: var(--theme-dark);
          height: 3px;
          width: 24px;
          border-radius: 5px;
          transition: all 0.3s ease;
      }

      .mobile-nav {
          display: none;
          flex-direction: column;
          gap: 4px;
          padding: 8px 16px 12px;
          border-top: 1px solid #e9f7ef;
          background: #ffffff;
      }

      .mobile-nav a {
          text-decoration: none;
          color: var(--theme-dark);
          font-weight: 600;
          font-size: 0.9rem;
          padding: 8px 10px;
          border-radius: 10px;
          transition: background 0.2s ease, color 0.2s ease;
      }

      .mobile-nav a:hover {
          background: var(--theme);
          color: #fff;
      }

      .mobile-nav.show {
          display: flex;
      }

      /* ===== MAIN LAYOUT ===== */
      .app-wrapper {
          max-width: 1000px;
          margin: 0 auto;
          padding: 80px 16px 30px;
          /* space for fixed header */
      }

      .content-area {
          background: linear-gradient(180deg, #f9fff9 0, #f5faf7 30%, #f9fff9 100%);
      }

      /* Category bar */
      .category-bar {
          display: flex;
          gap: 10px;
          overflow-x: auto;
          padding: 10px 0 12px;
          background: transparent;
          scroll-behavior: smooth;
      }

      .category-bar::-webkit-scrollbar {
          height: 4px;
      }

      .category-bar::-webkit-scrollbar-track {
          background: #f3fff6;
          border-radius: 10px;
      }

      .category-bar::-webkit-scrollbar-thumb {
          background: #009c3b;
          border-radius: 10px;
      }

      .cat-btn {
          white-space: nowrap;
          padding: 7px 14px;
          background: #ffffff;
          color: #009c3b;
          border: 1.5px solid #009c3b;
          border-radius: 999px;
          font-size: 0.8rem;
          font-weight: 600;
          cursor: pointer;
          transition: 0.25s;
      }

      .cat-btn.active {
          background: #009c3b;
          color: #fff;
          box-shadow: 0 4px 10px rgba(0, 156, 59, 0.35);
      }

      .cat-btn:hover {
          background: #009c3b;
      }

      /* Slider */
      .slider-box {
          margin: 8px 0 10px;
          background: #fff;
          padding: 10px;
          border-radius: var(--radius-lg);
          box-shadow: var(--shadow-soft);
      }

      .slider {
          width: 100%;
          position: relative;
          overflow: hidden;
          border-radius: 14px;
      }

      .slides {
          display: flex;
          transition: transform 0.5s ease;
      }

      .slide {
          min-width: 100%;
          height: 220px;
          object-fit: cover;
      }

      .dots {
          position: absolute;
          bottom: 10px;
          width: 100%;
          display: flex;
          justify-content: center;
          gap: 6px;
          pointer-events: none;
      }

      .dot {
          width: 9px;
          height: 9px;
          background: #ffffffaa;
          border-radius: 50%;
          pointer-events: auto;
          cursor: pointer;
          border: 1px solid #ffffffdd;
      }

      .dot.active {
          background: #009c3b;
      }

      /* Search */
      .search-wrapper {
          width: 100%;
          margin: 10px auto 12px;
          background: #ffffff;
          padding: 10px 14px;
          border-radius: 999px;
          display: flex;
          align-items: center;
          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
          gap: 8px;
      }

      .search-wrapper input {
          border: none;
          outline: none;
          flex: 1;
          font-size: 0.95rem;
          color: #444;
          background: transparent;
      }

      .search-btn {
          width: 40px;
          height: 40px;
          background: var(--theme);
          border: none;
          outline: none;
          border-radius: 50%;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          box-shadow: 0 4px 10px rgba(0, 156, 59, 0.4);
          transition: transform 0.1s ease, box-shadow 0.2s ease, background 0.2s ease;
      }

      .search-btn:hover {
          background: var(--theme-dark);
          box-shadow: 0 5px 14px rgba(0, 132, 49, 0.45);
      }

      .search-btn:active {
          transform: scale(0.96);
          box-shadow: 0 3px 8px rgba(0, 132, 49, 0.35);
      }

      a {
          color: #009c3b;
          font-weight: 600;
          text-decoration: none;
      }

      a:hover {
          color: #008431;
          text-decoration: underline;
      }

      /* ===== APPS LIST (like yono-all-games) ===== */
      .apps-section {
          margin-top: 8px;
          padding-bottom: 10px;
      }

      .apps-section h2 {
          font-size: 1.1rem;
          margin-bottom: 4px;
          color: var(--theme-dark);
      }

      .apps-section p.sub-text {
          font-size: 0.85rem;
          color: #666;
          margin-bottom: 10px;
      }

      .apps-list {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      .app-card {
          background: #fff;
          border-radius: 14px;
          box-shadow: var(--shadow-soft);
          padding: 10px 12px;
          display: flex;
          gap: 10px;
          align-items: center;
      }

      .app-logo {
          width: 52px;
          height: 52px;
          border-radius: 14px;
          overflow: hidden;
          flex-shrink: 0;
          background: #f2fff6;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .app-logo img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .app-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .app-title {
          font-size: 0.95rem;
          font-weight: 700;
          color: #222;
      }

      .app-meta {
          font-size: 0.75rem;
          color: #777;
      }

      .app-tags {
          margin-top: 2px;
          display: flex;
          flex-wrap: wrap;
          gap: 4px;
          font-size: 0.75rem;
      }

      .badge {
          padding: 2px 7px;
          border-radius: 999px;
          font-weight: 600;
          font-size: 0.7rem;
          display: inline-flex;
          align-items: center;
          gap: 3px;
      }

      .badge-bonus {
          background: #e8fff2;
          color: #0d7a32;
          border: 1px solid #bcefd0;
      }

      .badge-withdraw {
          background: #f0faff;
          color: #145f99;
          border: 1px solid #c4e5ff;
      }

      .app-actions {
          display: flex;
          flex-direction: column;
          gap: 4px;
          align-items: flex-end;
      }

      .download-btn {
          border: none;
          outline: none;
          background: linear-gradient(135deg, #00a944, #008431);
          color: #fff;
          font-size: 0.8rem;
          font-weight: 700;
          padding: 7px 12px;
          border-radius: 999px;
          cursor: pointer;
          box-shadow: 0 4px 10px rgba(0, 156, 59, 0.4);
          white-space: nowrap;
          display: inline-flex;
          align-items: center;
          gap: 4px;
          text-decoration: none;
      }

      .download-btn span {
          font-size: 0.9rem;
      }

      .download-btn:hover {
          filter: brightness(1.05);
      }

      .download-btn:active {
          transform: translateY(1px);
          box-shadow: 0 2px 6px rgba(0, 132, 49, 0.4);
      }

      .app-note {
          font-size: 0.68rem;
          color: #999;
      }

     /* footer {
          max-width: 1000px;
          margin: 10px auto 20px;
          text-align: center;
          font-size: 0.8rem;
          color: #777;
          padding: 10px 16px;
          border-top: 1px solid #eee;
      }

      footer a {
          color: var(--theme);
          text-decoration: none;
          font-weight: 600;
      }

      footer a:hover {
          text-decoration: underline;
      }*/

      footer {
    background: #fff;
    text-align: center;
    font-size: 0.8rem;
    color: #777;
    padding: 12px;
    border-top: 1px solid #eee;
    margin-top: auto;
}

footer a {
    color: var(--theme);
    text-decoration: none;
    font-weight: 600;
}

      /* Responsive */
      @media (max-width: 768px) {
          .nav-inner {
              padding: 8px 12px;
          }

          nav {
              display: none;
          }

          .menu-toggle {
              display: flex;
          }

          .app-wrapper {
              padding: 70px 12px 20px;
          }

          .slide {
              height: 190px;
          }

          .app-card {
              align-items: flex-start;
          }

          .app-actions {
              align-items: flex-start;
          }
      }

      @media (min-width: 769px) {
          .mobile-nav {
              display: none !important;
          }
      }


      .content1 {
    background: #fff;
    /*margin: 10px;*/
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.content1 h2,
.content1 h3 {
    color: var(--theme-dark);
    border-bottom: 2px solid #c8f7d4;
    padding-bottom: 6px;
    margin-bottom: 10px;
    font-size: 1.1rem;
}