/* --- Local Ecosystem Variables --- */
    :root {
      --navy: #1d2b53;
      --navy-hover: #2a3863;
      --purple: #3000bc;
      --yellow: #f8de22;
      --bg-cyan: #c6fdff;
      --border-cyan: #32f9ff;
      --bg-yellow: #faffc6;
      --border-yellow: #f8de22;
      --font-sans: 'Inter', sans-serif;
      --font-serif: 'Fraunces', serif;
      --font-mono: 'JetBrains Mono', monospace;
    }

    /* --- Page Container --- */
    .eco-page-wrapper {
      padding-top: 140px; 
      padding-bottom: 100px;
      max-width: 1000px;
      margin: 0 auto;
      padding-left: 20px;
      padding-right: 20px;
      overflow-x: hidden;
    }

    /* --- Hero Section --- */
    .eco-hero-box {
      border: 3px dashed #000;
      padding: 60px 40px;
      margin-bottom: 70px;
      border-radius: 4px;
    }

    .eco-hero-title {
      font-family: var(--font-serif);
      font-size: 3.5rem;
      line-height: 1.15;
      font-weight: 400;
      color: #000;
      margin-bottom: 30px;
    }

    .eco-hero-desc {
      font-family: var(--font-sans);
      font-size: 1.25rem;
      line-height: 1.6;
      color: #111;
    }

    .eco-hero-desc strong {
      font-weight: 700;
    }

    /* --- Section Headings --- */
    .eco-section-heading {
      font-family: var(--font-serif);
      font-size: 2.8rem;
      font-weight: 400;
      color: var(--navy);
      margin-bottom: 40px;
    }

    /* --- The Five Arms (Desktop: Lines | Mobile: Colored Cards) --- */
    .arms-list {
      display: flex;
      flex-direction: column;
      margin-bottom: 100px;
    }

    .arm-item {
      display: flex;
      align-items: center;
      padding: 40px 0;
      border-bottom: 1px solid rgba(0,0,0,0.15);
    }

    .arm-item:first-child {
      border-top: 1px solid rgba(0,0,0,0.15);
    }

    .arm-name {
      font-family: var(--font-mono);
      font-size: 1.2rem;
      color: var(--navy);
      text-transform: uppercase;
      width: 30%;
      padding-right: 20px;
    }

    .arm-details {
      width: 70%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
    }

    .arm-text {
      font-family: var(--font-sans);
      font-size: 1.15rem;
      line-height: 1.5;
      color: #000;
    }

    .btn-weapon {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      background-color: var(--navy);
      color: #fff;
      font-family: var(--font-mono);
      font-size: 0.85rem;
      text-transform: uppercase;
      padding: 10px 20px;
      border: 1px solid var(--border-cyan);
      min-width: 200px;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .btn-weapon:hover {
      background-color: var(--navy-hover);
    }


    .arm-itemnn {
    display: flex;
    align-items: center;
    padding: 40px 9px;
    border: 2px solid black;
    margin: 10px;
}


    /* --- MOBILE RESPONSIVE (Matches Mobile Mockup Exactly) --- */
    @media (max-width: 768px) {
      .eco-page-wrapper { padding-top: 110px; }
      .eco-hero-box { padding: 40px 25px; }
      .eco-hero-title { font-size: 2.5rem; }
      .eco-section-heading { font-size: 2.2rem; }

      /* Convert Lines to Colored Cards */
      .arm-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px 25px;
        margin-bottom: 20px;
        border: none !important;
      }
      .arm-item:nth-child(odd) {
        background-color: var(--bg-cyan);
        border: 1px solid var(--border-cyan) !important;
      }
      .arm-item:nth-child(even) {
        background-color: var(--bg-yellow);
        border: 1px solid var(--border-yellow) !important;
      }
      .arm-name { width: 100%; margin-bottom: 15px; }
      .arm-details { width: 100%; }
      .btn-weapon { width: 100%; }
    }