/* ============================================
       COMMUNITY PAGE — BLACK & GOLD
       Gold palette: #b49a6a #c4ad7c #d4be8a #9a8255
       Dark palette: #2c2520 #1a1714 #3a332c
       ============================================ */

    .cm {
      padding-top: 100px;
      overflow: hidden;
      background: #faf8f5;
    }

    .cm-honeypot {
      position: absolute;
      left: -9999px;
      width: 0;
      height: 0;
      opacity: 0;
    }

    /* ============================================
       HERO
       ============================================ */
    .cm-hero {
      min-height: 80vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 6vw var(--spacing-container) 4vw;
      position: relative;
    }

    .cm-hero::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 1px;
      height: 80px;
      background: linear-gradient(to bottom, #b49a6a, transparent);
    }

    .cm-hero-label {
      font-size: clamp(0.6rem, 0.85vw, 0.85vw);
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: #b49a6a;
      font-weight: 500;
      margin-bottom: 3vw;
      opacity: 1;
    }

    .cm-hero h1 {
      font-size: clamp(2.5rem, 5.5vw, 5.5vw);
      font-weight: 200;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: #1a1a1a;
      margin-bottom: 2vw;
    }

    .cm-hero h1 em {
      font-style: italic;
      color: #b49a6a;
    }

    .cm-hero h1 .cm-char {
      display: inline-block;
      opacity: 1;
      filter: blur(10px);
    }

    .cm-hero-divider {
      width: 80px;
      height: 1px;
      background: #b49a6a;
      margin: 0 auto 2vw;
      opacity: 1;
    }

    .cm-hero-statement {
      max-width: 600px;
      font-size: clamp(0.9rem, 1.1vw, 1.1vw);
      color: #7a7068;
      line-height: 1.8;
      font-weight: 300;
      opacity: 1;
    }

    /* ============================================
       LIVE COUNTERS — FUTURISTIC
       ============================================ */
    .cm-counters {
      background: #faf8f5;
      padding: 6vw var(--spacing-container);
      position: relative;
      overflow: hidden;
      border-top: 1px solid rgba(180,154,106,0.15);
      border-bottom: 1px solid rgba(180,154,106,0.15);
    }

    /* Subtle grid pattern */
    .cm-counters::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(180,154,106,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180,154,106,0.06) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }

    /* Radial glow behind cards */
    .cm-counters::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(180,154,106,0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    .cm-counters-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1100px;
      margin: 0 auto 4vw;
      position: relative;
      z-index: 1;
    }

    .cm-live-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: clamp(0.6rem, 0.7vw, 0.7vw);
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: #b49a6a;
      font-weight: 500;
    }

    .cm-live-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #b49a6a;
      animation: cm-pulse 2s ease-in-out infinite;
      box-shadow: 0 0 8px rgba(180,154,106,0.6);
    }

    @keyframes cm-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.7); }
    }

    .cm-counters-label {
      font-size: clamp(0.6rem, 0.7vw, 0.7vw);
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: #9a8c78;
    }

    .cm-counters-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(16px, 2vw, 2vw);
      max-width: 1100px;
      margin: 0 auto 3vw;
      position: relative;
      z-index: 1;
    }

    .cm-stat-card {
      background: #fff;
      border: 1px solid rgba(180,154,106,0.15);
      border-radius: 20px;
      padding: clamp(28px, 2.5vw, 2.5vw);
      text-align: center;
      position: relative;
      transition: all 0.5s ease;
    }

    .cm-stat-card:hover {
      border-color: rgba(180,154,106,0.4);
      background: #fff;
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(180,154,106,0.12);
    }

    .cm-stat-card:hover .cm-stat-ring {
      animation-duration: 4s;
    }

    .cm-stat-ring-wrap {
      width: clamp(100px, 9vw, 9vw);
      height: clamp(100px, 9vw, 9vw);
      margin: 0 auto clamp(16px, 1.5vw, 1.5vw);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cm-stat-ring {
      position: absolute;
      inset: 0;
      animation: cm-ring-rotate 12s linear infinite;
    }

    @keyframes cm-ring-rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .cm-stat-num {
      font-size: clamp(2.2rem, 3.5vw, 3.5vw);
      font-weight: 200;
      color: #2c2520;
      line-height: 1;
      letter-spacing: -0.03em;
      position: relative;
    }

    .cm-stat-suffix {
      font-size: 0.5em;
      vertical-align: super;
      opacity: 0.5;
    }

    .cm-stat-label {
      font-size: clamp(0.6rem, 0.72vw, 0.72vw);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #7a7068;
      line-height: 1.6;
      margin-top: clamp(4px, 0.4vw, 0.4vw);
    }

    .cm-stat-sublabel {
      font-size: clamp(0.55rem, 0.62vw, 0.62vw);
      color: #b49a6a;
      margin-top: 6px;
      letter-spacing: 0.1em;
    }

    /* Winner card */
    .cm-winner {
      max-width: 560px;
      margin: 0 auto;
      background: #fff;
      border: 1px solid rgba(180,154,106,0.15);
      border-radius: 20px;
      padding: clamp(28px, 2.5vw, 2.5vw);
      text-align: center;
      position: relative;
      z-index: 1;
      transition: all 0.5s ease;
    }

    .cm-winner:hover {
      border-color: rgba(180,154,106,0.4);
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(180,154,106,0.12);
    }

    .cm-winner-icon {
      font-size: clamp(1.8rem, 2.5vw, 2.5vw);
      color: #b49a6a;
      margin-bottom: 1vw;
    }

    .cm-winner-badge {
      display: inline-block;
      font-size: clamp(0.55rem, 0.65vw, 0.65vw);
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: #b49a6a;
      border: 1px solid rgba(180,154,106,0.3);
      padding: 4px 14px;
      border-radius: 20px;
      margin-bottom: 1.2vw;
    }

    .cm-winner-title {
      font-size: clamp(0.7rem, 0.85vw, 0.85vw);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #7a7068;
      margin-bottom: 0.8vw;
    }

    .cm-winner-name {
      font-size: clamp(1.3rem, 2vw, 2vw);
      font-weight: 300;
      color: #2c2520;
      letter-spacing: 0.02em;
    }

    .cm-winner-desc {
      font-size: clamp(0.72rem, 0.82vw, 0.82vw);
      color: #9a8c78;
      margin-top: 0.6vw;
      font-weight: 300;
    }

    /* ============================================
       JOIN FORM SECTION
       ============================================ */
    .cm-join {
      padding: 6vw var(--spacing-container);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px, 5vw, 5vw);
      max-width: 1200px;
      margin: 0 auto;
      align-items: start;
    }

    .cm-join-info {
      padding-top: 1vw;
    }

    .cm-join-title {
      font-size: clamp(1.8rem, 3.5vw, 3.5vw);
      font-weight: 200;
      color: #2c2520;
      letter-spacing: -0.03em;
      line-height: 1.15;
      margin-bottom: 1.5vw;
    }

    .cm-join-title em {
      font-style: italic;
      color: #b49a6a;
    }

    .cm-join-desc {
      font-size: clamp(0.85rem, 1vw, 1vw);
      color: #7a7068;
      line-height: 1.8;
      font-weight: 300;
    }

    .cm-form {
      background: #fff;
      border: 1px solid rgba(180,154,106,0.12);
      border-radius: 18px;
      padding: clamp(28px, 2.5vw, 2.5vw);
    }

    .cm-form-title {
      font-size: clamp(0.7rem, 0.8vw, 0.8vw);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #b49a6a;
      margin-bottom: 2vw;
      font-weight: 500;
    }

    .cm-field {
      margin-bottom: clamp(14px, 1.2vw, 1.2vw);
    }

    .cm-field label {
      display: block;
      font-size: clamp(0.6rem, 0.7vw, 0.7vw);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(0,0,0,0.4);
      margin-bottom: 6px;
      font-weight: 500;
    }

    .cm-field input {
      width: 100%;
      padding: 12px 16px;
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 10px;
      font-size: clamp(0.8rem, 0.9vw, 0.9vw);
      font-family: inherit;
      transition: border-color 0.3s;
      background: #faf8f5;
    }

    .cm-field input:focus {
      outline: none;
      border-color: #b49a6a;
    }

    .cm-field input::placeholder {
      color: rgba(0,0,0,0.2);
    }

    .cm-form-submit {
      width: 100%;
      padding: 14px;
      background: #2c2520;
      color: #f5f0ea;
      border: none;
      border-radius: 50px;
      font-size: clamp(0.75rem, 0.85vw, 0.85vw);
      font-family: inherit;
      letter-spacing: 0.05em;
      cursor: pointer;
      transition: all 0.3s;
      margin-top: clamp(8px, 0.8vw, 0.8vw);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .cm-form-submit:hover {
      background: #b49a6a;
    }

    .cm-form-submit .material-icons {
      font-size: 1.1em;
    }

    /* ============================================
       BENEFITS
       ============================================ */
    .cm-benefits {
      padding: 6vw var(--spacing-container);
      background: #faf8f5;
    }

    .cm-benefits-header {
      text-align: center;
      margin-bottom: 4vw;
    }

    .cm-benefits-title {
      font-size: clamp(1.8rem, 3.5vw, 3.5vw);
      font-weight: 200;
      color: #2c2520;
      letter-spacing: -0.03em;
      line-height: 1.15;
    }

    .cm-benefits-title em {
      font-style: italic;
      color: #b49a6a;
    }

    .cm-benefits-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(16px, 1.5vw, 1.5vw);
      max-width: 1200px;
      margin: 0 auto;
    }

    .cm-benefit {
      background: #fff;
      border: 1px solid rgba(180,154,106,0.1);
      border-radius: 20px;
      padding: clamp(32px, 2.8vw, 2.8vw);
      transition: all 0.4s ease;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .cm-benefit:hover {
      border-color: rgba(180,154,106,0.35);
      transform: translateY(-6px);
      box-shadow: 0 20px 50px rgba(180,154,106,0.1);
    }

    .cm-benefit-line {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #b49a6a, #c4ad7c);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.5s ease;
    }

    .cm-benefit:hover .cm-benefit-line {
      transform: scaleX(1);
    }

    .cm-benefit-head {
      display: flex;
      align-items: center;
      gap: clamp(14px, 1.2vw, 1.2vw);
      margin-bottom: clamp(14px, 1.2vw, 1.2vw);
    }

    .cm-benefit-head .cm-benefit-title {
      margin-bottom: 0;
    }

    .cm-benefit-icon {
      width: clamp(56px, 4.2vw, 4.2vw);
      height: clamp(56px, 4.2vw, 4.2vw);
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(180,154,106,0.1), rgba(196,173,124,0.04));
      border: 1px solid rgba(180,154,106,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.4s ease;
    }

    .cm-benefit:hover .cm-benefit-icon {
      background: linear-gradient(135deg, #b49a6a, #c4ad7c);
      border-color: #b49a6a;
    }

    .cm-benefit:hover .cm-benefit-icon .material-icons {
      color: #fff;
    }

    .cm-benefit-icon .material-icons {
      font-size: clamp(1.4rem, 1.8vw, 1.8vw);
      color: #b49a6a;
      transition: color 0.4s ease;
    }

    .cm-benefit-title {
      font-size: clamp(1rem, 1.15vw, 1.15vw);
      font-weight: 500;
      color: #1a1a1a;
      margin-bottom: clamp(10px, 0.8vw, 0.8vw);
      line-height: 1.35;
    }

    .cm-benefit-desc {
      font-size: clamp(0.82rem, 0.95vw, 0.95vw);
      color: #5a5249;
      line-height: 1.75;
      font-weight: 300;
      flex: 1;
    }

    .cm-benefit-extra {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: clamp(14px, 1vw, 1vw);
      font-size: clamp(0.65rem, 0.75vw, 0.75vw);
      color: #b49a6a;
      border: 1px solid rgba(180,154,106,0.25);
      padding: 6px 16px;
      border-radius: 20px;
      letter-spacing: 0.03em;
      font-weight: 500;
    }

    .cm-benefit-extra .material-icons {
      font-size: 0.9em;
    }

    /* ============================================
       CTA
       ============================================ */
    .cm-cta {
      text-align: center;
      padding: 4vw var(--spacing-container) 6vw;
      position: relative;
    }

    .cm-cta-line {
      width: 60px;
      height: 1px;
      background: #c4ad7c;
      margin: 0 auto 2.5vw;
      opacity: 1;
    }

    .cm-cta h2 {
      font-size: clamp(1.8rem, 3.5vw, 3.5vw);
      font-weight: 200;
      color: #2c2520;
      letter-spacing: -0.03em;
      line-height: 1.15;
      margin-bottom: 1vw;
      opacity: 1;
    }

    .cm-cta p {
      font-size: clamp(0.85rem, 1.1vw, 1.1vw);
      color: #9a8c78;
      font-weight: 300;
      font-style: italic;
      margin-bottom: 2.5vw;
      opacity: 1;
    }

    .cm-cta .btn-primary {
      opacity: 1;
    }

    /* ============================================
       RESPONSIVE
       ============================================ */
    @media (max-width: 991px) {
      .cm-hero { min-height: 60vh; padding: 80px 30px 60px; }
      .cm-counters { padding: 60px 30px; }
      .cm-join { padding: 60px 30px; gap: 40px; }
      .cm-benefits { padding: 60px 30px; }
      .cm-cta { padding: 40px 30px 60px; }
    }

    @media (max-width: 767px) {
      .cm-hero { min-height: auto; padding: 60px 20px 50px; }
      .cm-hero h1 { font-size: clamp(2.2rem, 10vw, 3.5rem); }
      .cm-hero::after { height: 50px; }

      .cm-counters-grid { grid-template-columns: 1fr; gap: 16px; }
      .cm-stat-card { padding: 24px; }
      .cm-stat-ring-wrap { width: 90px; height: 90px; }
      .cm-counters-header { flex-direction: column; gap: 10px; align-items: flex-start; }

      .cm-join { grid-template-columns: 1fr; gap: 30px; }

      .cm-benefits-grid { grid-template-columns: 1fr; gap: 14px; }
      .cm-benefit { padding: 24px; }
      .cm-benefit-icon { width: 48px; height: 48px; border-radius: 14px; }

      .cm-cta { padding: 40px 20px 50px; }
    }

    @media (max-width: 479px) {
      .cm-hero h1 { font-size: 2rem; }
      .cm-stat-num { font-size: 2rem; }
    }